title: React Native Flexbox alignment discrepancy on bare RN project vs Expo Snack demo
body: <p>I'm developing a personal project to experiment with TypeScript, React Native and <code>styled-components</code>, in which I have a layout that is supposed to look like this:</p>
  <p><a href="https://i.stack.imgur.com/eEHC5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eEHC5.png" alt="intended result" /></a> <a href="https://i.stack.imgur.com/h2pjN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h2pjN.png" alt="intended result" /></a></p>
  <p>But I'm kinda struggling to align the two lines of text together with <code>Flexbox</code>. Below is the current outcome of my attempts:</p>
  <p><a href="https://i.stack.imgur.com/ZsR8q.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZsR8q.jpg" alt="actual result" /></a></p>
  <p>After isolating the code on an <a href="https://snack.expo.io/2jIjGCsIh" rel="nofollow noreferrer">Expo Snack project</a> to post here and ask for help, everything started behaving as expected. But my style sheets are exaclty the same both on my local machine and on Snack, which leads me to think I'm running into some inheritance problem or a TypeScript/Babel transpilation issue that I'm not aware of.</p>
  <p>All I did on Snack was remove the wrapper components created via <code>react-navigation/stack</code>s <code>createStackNavigator()</code> that went around my application routes. Now I'm not sure if the problem is in the transpilation step, or in my actual code. Can someone help me diagnose this problem?</p>