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

Question

i have a modal screen like below:

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

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

Answer 1

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.

Answer 2

I know the question it's old, but I had myself dealt with this problem right now, as a solution I found calling pop before navigate:

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

Posting this as an alternative solution to the one provided by @iphonic