React Native Flexbox confusion with custom components

For our Fly-by-Wire project, I’ve been learning and using React Native to build mobile applications. When trying to do a sidebar layout for a tablet view using nested custom components, I got stuck with Flexbox — no matter what I did, the flex option didn’t seem to have any effect in making my sidebar only take up a portion of the screen. You can see an example here.

I thought that ReactNative wrapped each component in an extra View or something (like how React wraps everything in a div). So I thought the components would render something like:


   
    
  
  
    
  

As you can probably guess, that is not how it works. The styles on the custom components’ (Sidebar and MainContent) View elements overrode anything I set on the custom components themselves (the sidebar and content classes). I was not expecting that, and I couldn’t find it clearly explained in the documentation. What I really wanted was something like this. Which would render (per my example above) as:


  
  

My lesson learned — with React Native, styles go on the “lowest” component in the tree, something to watch out for with nested custom components.