unname coder's blog

I am currently making a chat bubble in react-native. Since I am new to react-native I first tried to make the chat bubble on a browser and then tried to replicate the same in react-native. I am struggling to replicate the arrow in react-native. Any ideas/suggestions? Normal HTML/CSS: <div> <p class="to-me">Hey!</p> </div> div { padding:20px; justify-self: center; align-self: center; text-align: left; display: flex; flex-direction: column; width: 450px; } div p { font-size: 16px; line-height: 1.4; margin: 1px 0; padding: 8px 17px 6px 13px; max-width: 380px; position: relative; border-radius: 18px; } div p:after { position: absolute; content: ""; top: 0; bottom: 0; right: 0; left: 0; z-index: -1; } div p.to-me { color: black; align-self: flex-start; background-color: #E5E5EA; } div p.to-me:after { background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3....

React Native uses flexbox for layout. In all of the examples I've seen, they do something like this: var styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'row' } }); I'm curious about the flex: 1 part. Based on Chris Coyier's definition here https://css-tricks.com/snippets/css/a-guide-to-flexbox/, flex: 1 should be the same as flex-grow: 1 , but to me it looks like flex: 1 in React Native is equivalent to display: flex in CSS. Here's a CodePen that demonstrates that flex: 1 the way React Native examples use it doesn't do anything in CSS: http://codepen.io/johnnyo/pen/BoKbpb It's not until we use display: flex in CSS until flexbox starts to work: http://codepen.io/johnnyo/pen/epZXgz So does this mean that flex: 1 in React Native is equivalent to display: flex in CSS? There is quite a difference between css flexbox and the one implemented by Facebook. Lots of things in common but defaults are v...