How can i change Navigationbar title in React Native - reactjs

Question

i am new in react native. i am create new basic app with navigation bar.
i have two screen.
Home
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.

Answer 1

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
}
}

Answer 2

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>