React native react-navigation(v6): How to set presentation options on each screen-CodePudding

I'm building an chat application using react native.(for study)

I wanted to apply modal presentation mode only to the Profile screen, so I passed the option value like options={{ presentation: 'modal', headerShown: true }}, but it was not applied. However, headerShown, one of the option values, was applied normally.

How can I apply different presentation modes to different screens?

For example, in the code below, I want to use the Modal presentation mode for the Profile screen and the Card presentation mode for the Chat screen.


import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Profile from '../screens/profile';
import Chat from '../screens/chat';

const NativeStack = createNativeStackNavigator();

const ScreensRouter = () => (
  <NativeStack.Navigator screenOptions={{ headerShown: false }}>
    <NativeStack.Screen name="Profile" component={Profile} />
    <NativeStack.Screen name="Chat" component={Chat} />
  </NativeStack.Navigator>
);

export default ScreensRouter;

Additionally, below is the full code.

// rootRouter.js : Entry point
import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import ScreensRouter from './screensRouter';
import TabRouter from './tabRouter';

const NativeStack = createNativeStackNavigator();

const RootRouter = () => {
  return (
    <NativeStack.Navigator
      screenOptions={{
        headerShown: false,
        presentation: 'modal',
      }}
    >
      <NativeStack.Screen name="TabRouter" component={TabRouter} />
      <NativeStack.Screen name="ScreensRouter" component={ScreensRouter} />
    </NativeStack.Navigator>
  );
};

export default RootRouter;

// screensRouter.js
import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Profile from '../screens/profile';
import AddFriends from '../screens/addFirend';
import SearchFriend from '../screens/searchFriend';
import Chat from '../screens/chat';
import EditProfile from '../screens/editProfile';
import FaceTime from '../screens/faceTime';
import FullImage from '../screens/fullImage';

const NativeStack = createNativeStackNavigator();

const ScreensRouter = () => (
  <NativeStack.Navigator screenOptions={{ headerShown: false }}>
    <NativeStack.Screen
      name="Profile"
      component={Profile}
      options={{ presentation: 'modal', headerShown: true }}
    />
    <NativeStack.Screen name="AddFriend" component={AddFriends} />
    <NativeStack.Screen name="SearchFriend" component={SearchFriend} />
    <NativeStack.Screen name="Chat" component={Chat} />
    <NativeStack.Screen name="EditProfile" component={EditProfile} />
    <NativeStack.Screen name="FaceTime" component={FaceTime} />
    <NativeStack.Screen name="FullImage" component={FullImage} />
  </NativeStack.Navigator>
);

export default ScreensRouter;

CodePudding user response：

As per documentation https://reactnavigation.org/docs/modal/, what you are most likely looking for is <Stack.Group/> for setting different behavior of screens. Check code below:


function RootStackScreen() {
  return (
    <RootStack.Navigator>
      <RootStack.Group>
        <RootStack.Screen name="Home" component={HomeScreen} />
        <RootStack.Screen name="Details" component={DetailsScreen} />
      </RootStack.Group>
      <RootStack.Group screenOptions={{ presentation: 'modal' }}>
        <RootStack.Screen name="MyModal" component={ModalScreen} />
      </RootStack.Group>
    </RootStack.Navigator>
  );
}