score:2

Accepted answer

However, this renders without any of the MainContainer elements at all.

You need to use this.props.children

<LinearGradient
  style={{ flex: 1 }}
  colors={[primary, primaryGradient2, primaryGradient1]}
  locations={locations}>
  //add this:
  {this.props.children}
</LinearGradient>

It's a prop passed to all components using an opening and closing tag and contains whatever is between the opening and closing tags.

I'm not totally clear on exactly what you're trying to accomplish, but I suspect you would be best served by placing the <GradientTheme/> component at or near the root of your app, and managing the theme either locally in it's parent component state or with redux. In case you need it, here is a nice series of tutorials on using redux and react-navigation together in react-native.


Related Query

More Query from same tag