How can i wrap react-navigation into Modalize?

[likeSo]

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

I want to display a navigator inside the Modalize. Here is my code:

<Portal>
        <Modalize modalHeight={screenHeight * 0.9} withHandle={false} ref={ref}>
          <NavigationContainer independent>
            <Stack.Navigator
              initialRouteName={'SelectProvinceAndDistrict'}
              screenOptions={{
                headerBackTitleVisible: false,
                headerTintColor: Colors.primaryText,
              }}
            >
              <Stack.Screen
                name={'SelectProvinceAndDistrict'}
                component={SelectProvinceAndDistrictScreen}
              />
            </Stack.Navigator>
          </NavigationContainer>
        </Modalize>
      </Portal>

And this is what i got:

The problems are:

• No border-radius;
• A warning "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation"
• Stack.Screen not rendered

Describe the solution you'd like A clear and concise description of what you want to happen.

I hope the modalize and navigation container works correctly

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

[harveyappleton]

@likeSo I just got this working myself, here's minimal code example

App.tsx (root)

<Host>
  <NavigationContainer>{/* your main app here */}</NavigationContainer>
</Host>

Then in your child component file that opens your modal ChildComponent.tsx

<Portal>
  <Modalize
    modalHeight={/* a value here for the height of your modal, I used a dynamic hook to get screen height * 0.9 - or you can set it manually*/}
    scrollViewProps={{
       contentContainerStyle: { flex: 1 }
    }}
  >
     <NavigationContainer>{/* your modal content here - eg top tabs */}</NavigationContainer>
  </Modalize>
</Portal>

(as you can see I'm using the react-native-portalize library here)

They key was setting contentContainerStyle: { flex: 1 } on the scroll view props of the modal :) And also having another navigation container inside the modal. (I disabled deep linking for this navigation container like so to ensure it didnt steal precedence from the main app's navigation container - eg as follows)

<NavigationContainer linking={{ enabled: false, prefixes: [] }} documentTitle={{ enabled: false }} theme={isDarkMode ? DarkTheme : DefaultTheme}>

[likeSo]

@harveyappleton I got this: The border-radius is gone and there is an error about the virtualized list

[harveyappleton]

@likeSo yeh so this shows that you can use react-navigation within react-native-modalize :) I managed to get the border-radius back by doing some crafty styling on the headers of the react-navigation stack component I'm using - but that's not the responsibility of react-native-modalize, so out of the scope of this library. RE: the virtualized list, yeh I have the same problem at the moment, seeing if I can find a workaround.

[likeSo]

@harveyappleton You don't understand... There are other problems such as scroll behavior. And there is another bottom sheet library that works with React Navigation perfectly: https://github.com/gorhom/react-native-bottom-sheet The modalize library's Robustness and usability are better than that one, but no react-navigation support

[harveyappleton]

@likeSo you're correct that it has not got react navigation integrated directly into the library, you have to do it yourself. I have no problems with integrating it, or any problems with scroll behaviour... ultimately you need to find the best library for your project, if that's react native modalize than awesome, if not it may need to be the one you linked. But it is possible to use react navigation in this library, I am using it fine with multiple screens and scrolling within the modal itself.

[harveyappleton]

Also, you can fix the nested virtualized lists error by using custom renderer (docs here)

 <Modalize
     // ...other props here     
     customRenderer={<Animated.View style={{ flex: 1 }}>{/* modal content */}</Animated.View>}
    />

Now I have react navigation working inside the modal, and no errors :)

[likeSo]

@harveyappleton Okay, thank you

[chrismerino]

Thank you for sharing this solution.