How can i wrap react-navigation into Modalize?

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.

[likeSo]

@harveyappleton Okay, thank you

[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 😃