react-nativenavigationmodalviewcontroller

react native can not push a screen from 'screen modal'


i have a modal screen like below:

 <Stack.Screen name="ForwardChatContent" component={ForwardChatContentScreen}
                            options={{
                              presentation: 'modal',
                            }} />

enter image description here

I want to push a screen from this screen, for example i have other screen like below:

<Stack.Screen name="ForwardChatToUser" component={ForwardChatToUserScreen}

But when using navigate, it's does not show new screen, can someone help? Thanks

Update, i changed ForwardChatContent and ForwardChatToUser into stack navigator like this:

const forwardStack = () => {
    return <Stack.Navigator>
      <>
        <Stack.Screen name="ForwardChatContent" component={ForwardChatContentScreen}
          options={{
            presentation: 'modal',
          }} />
        <Stack.Screen name="ForwardChatToUser" component={ForwardChatToUserScreen}
          options={{
            // presentation: 'modal',
          }} />
      </>
    </Stack.Navigator>
  }

when navigate im using this code:

RootNavigation.navigate('ForwardChat', {message : props.currentMessage})

But in ForwardChatContent i got error ERROR TypeError: undefined is not an object (evaluating 'route.params.message')* Because Im using this code to get message :

 const message = route.params.message

Can u provide some way to get the params, thanks


Solution

  • It's because when you open a screen as Modal, it is treated as a separate set out of your existing Navigation Stack, it expects a Modal to be a NavigationStack, not just a Screen.

    In your case, ForwardChatContentScreen is just a simple <Stack.Screen> it doesn't have a navigation stack.

    Change it to NavigationStack from Screen it will work and open the NavigationStack as Modal having your screen as root, then it will work.

    Check demo here

    Cheers.