react-navigation nested stack navigator isn't visible when wrapped with a View or ScrollView

Question

I work on a complex React Native application, which uses the react-navigation library. The navigation architecture is something like this:

• Switch navigator
  • Authentication stack (Login, Register, forgot password, etc)
  • Authenticated stack
  • bottomTabNavigator
    • 3 pages, one of which is another switch navigator (which is the focus here)
      • In this switch navigator (call it Report) are multiple routes, one of which is a new Stack navigator (call it Rulings)

The 'Report' switch navigator is wrapped in a container which all screens for this level have.

Here is a small code example of how these are written:

const AppNavigator = createSwitchNavigator({
  Authentication: createStackNavigator({
    Login,
    Register
    // etc
 }),
 Authenticated: createStackNavigator({
   Main: {
     screen: createBottomTabNavigator({
       tab1,
       tab2,
       Report: ReportContainer
    })
   // other screens outside of the tab navigator but still at the top level
})

const ReportNavigator = createSwitchNavigator({
  page1,
  page2,
  Rulings: createStackNavigator({
    RulingsHome: <Text>Rulings Home</Text>,
    // other screens
  })

const ReportContainer = ({ navigation }) => (
  <ScrollView>
    // other stylistic stuff
    <ReportNavigator navigation={navigation} />
  </ScrollView>
)

Apologies if I've made mistakes there, it's just an example.

So the Report navigator works perfectly for all the other screens. The wrapping content around the <ReportNavigator> works perfectly and the content works. However, for the Rulings, nothing from the navigator is displayed. Only the main wrapper from ReportContainer is shown. However, when I use the React devtools, I can see that the content is being rendered, but it's not visible. Further, if I delete the <ScrollView> in ReportContainer , and am just using <ReportNavigator navigation={navigation} /> , it shows the content for Rulings.

Switching ScrollView for View has the same problem, but if I switch to <React.Fragment> , it works, wrapping content and all. But obviously as it's no longer a ScrollView, the content is not scrollable. I need the content and the wrapper to be scrollable.

If I add some code above the Navigator component, like this:

const ReportContainer = ({ navigation }) => (
  <ScrollView>
    // other stylistic stuff
    <Text>Hello, world!</Text>
    <ReportNavigator navigation={navigation} />
  </ScrollView>
)

The text is shown, but nothing from the navigator is visible. Looking at the inspector, they are both children of the <ScrollView> , as they should be.

So the issue is, <ScrollView><ReportSwitchNavigator /></ScrollView> (or <View> ) seems to screw up the deeply nested stack navigator inside the parent switch navigator. What can I do to get around this? Is it expected behaviour or should I make an example on Snack and submit to react-navigation issues?

Answer 1

I had to set contentContainerStyle={{ flex: 1 }} on the <ScrollView> . This makes the content scrollable and renders the Rulings stack navigator content. However it does mess up the styling of some of the other components so will need to fix them. Thanks to @Andrew for pointing me in the right direction!