CODEWITHSUNDEEP
javascriptreact-nativereact-navigationreact-navigation-stack
Xuân Việt
Xuân Việt

Reputation: 65

How to find the document about React native createStackNavigator configuration

I just want to ask how people search for material. Let me explain more.

I found two ways to create stack navigator is that:

First (mentioned on the document):

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
);

}

And second (I don't know how everyone knows about it):

export const StackNavigator = createStackNavigator(
  {
    Home: {screen: Home},
    Profile: {screen: Profile},
    Settings: {screen: Settings},
  },
  stackNavigatorConfig,
);

On the home page of react navigation https://reactnavigation.org/docs/stack-navigator/, the document never mentioned how to use an object to config when createStackNavigator as the second example.

I don't know how people search for material. Why can't I find them? Am I missing anything in my way of learning?

Upvotes: 0

Views: 165

Answers (2)

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16364

You have to use the first method which is the new version (v5) of react navigation and the docs you have shared has all the information you need.

As for configuration its all props now, if you want to have navigation level settings you can use screenOptions https://reactnavigation.org/docs/screen-options/#screenoptions-prop-on-the-navigator

    <Stack.Navigator
      initialRouteName="Home"
      headerMode="screen"
      screenOptions={{
        headerTintColor: 'white',
        headerStyle: { backgroundColor: 'tomato' },
      }}
    >
      <Stack.Screen
        name="Home"
        component={Home}
        options={{
          title: 'Awesome app',
        }}
      />
</Stack.Navigator>

Also you can have screen level options https://reactnavigation.org/docs/screen-options/

As for older versions of the documentation you can switch using the versions option in the documentation. https://reactnavigation.org/versions

Upvotes: 1

Nacho Zullo
Nacho Zullo

Reputation: 571

There are different react-navigation versions:

Version 5.X:

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
);
}

Doc: https://reactnavigation.org/docs/stack-navigator

And Version 4.X:

export const StackNavigator = createStackNavigator(
  {
    Home: {screen: Home},
    Profile: {screen: Profile},
    Settings: {screen: Settings},
  },
  stackNavigatorConfig,
);

Doc: https://reactnavigation.org/docs/4.x/stack-navigator

Upvotes: 1

Related Questions