CODEWITHSUNDEEP
reactjsreact-nativereact-redux
sohil
sohil

Reputation: 848

How can i change Navigationbar title in React Native

i am new in react native. i am create new basic app with navigation bar. i have two screen.

  1. Home
  2. List

i want to change both navigation bar title With "Home Screen" and "List Screen"

i have one button in home Screen. when i tap on button it navigate to list screen.

my problem is i can't change the title in list screen.

App.js

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

import HomeScreen from './src/screens/HomeScreen';
import ListScreen from './src/screens/ListScreen';


const navigator = createStackNavigator({

  Home: HomeScreen,
  List: ListScreen
},{
      initialRouteName: 'Home',
      defaultNavigationOptions:{
        title: 'Home Screen'
      }
  }

);

export default createAppContainer(navigator);

HomeScreen.js

import React from 'react';
import { View, Text, StyleSheet, Button, TouchableOpacity, Stack} from 'react-native';

const HomeScreen = props => {

    return(


        <View style={styles.container}>
        <TouchableOpacity
          style={styles.button}
          onPress={() => props.navigation.navigate('List')}
        >
        <Text>START</Text>
        </TouchableOpacity>
      </View>

      
    );
};

ListScreen.js

import React from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';

const ListScreen = () => {



    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
         <Text>List Screen</Text>
        </View>
      );
};

const styles = StyleSheet.create({

});

export default ListScreen;

i am use expo-cli. please help me.

Upvotes: 0

Views: 1207

Answers (2)

Jignesh Mayani
Jignesh Mayani

Reputation: 7193

If we put defaultNavigationOptions in createStackNavigator then it might not be possible to update the screen header component so to update the header for screens separately then we have to specify individual navigationOptions.

we can create a stack navigator, try the below way to manage headers dynamically.

const HomeNavigator = createStackNavigator({
    Home: {
        screen: HomeScreen,
        navigationOptions: {
            headerShown: true,
            headerTitle: "Home"
        }
    }
})

we also can manage the header from screens as below another method:

const LoginScreen = props => {
    return <View />
}

LoginScreen.navigationOptions = navData => {
    return {
        headerTitle: "Login",
        headerTransparent: true,
        headerShown: false
    }
}

Upvotes: 1

Tommy Leong
Tommy Leong

Reputation: 3020

I assume you are using React Navigation v5, you may always refer to their code sample here.

If you are lazy to read their sample, their code snippet is as below

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home' }}
      />
    </Stack.Navigator>
  );
}

Below is a sample code from me, which you can use..

StackNavigator.js - (You can name whatever you want)

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

import ScreenA from '../Containers/ScreenA';
import ScreenB from '../Containers/ScreenB';

const Stack = createStackNavigator();

const AppFlow = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator name="Test App">
        <Stack.Screen
          name="First"
          component={ScreenA}
          options={{headerShown: true, title: 'Screen A Title'}}
        />
        <Stack.Screen
          name="Second"
          component={ScreenB}
          options={{headerShown: true, title: 'Screen B Title'}}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const MainStackNavigator = () => {
  return AppFlow();
};

export default MainStackNavigator;

First.JS - (You can name whatever you want) Then at this "First" screen, you may navigate to "Second" screen by the following code

 <TouchableOpacity
          style={styles.button}
          onPress={() => props.navigation.navigate('Second')}
        >
        <Text>START</Text>
        </TouchableOpacity>

Upvotes: 0

Related Questions