CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-navigation
Frank Andrew
Frank Andrew

Reputation: 917

How to show header title in React Native using React Navigation

I am newbie using React Native, I have a problem to show/display header title using React Navigation, I try to look for but fail all.

This is my complete script:

Loginscreen.js

class LoginScreen  extends Component {
  static navigationOptions = {
    title: 'Login',
  };
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Login Screen</Text>
        <Button title="Login To" onPress={() => this.props.navigation.navigate('Tabs')} />
        <Button title="Go To Register" onPress={() => this.props.navigation.navigate('Register')} />
      </View>
    );
  }
}

RegisterScreen.js

class RegisterScreen  extends Component {
  static navigationOptions = {
    title: 'Register',
  };
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Register Screen</Text>
        <Button title="Go to Login" onPress={() => this.props.navigation.navigate('Login')} />
      </View>
    );
  }
}

HomeScreen.js

class HomeScreen  extends Component {
  static navigationOptions = {
    title: 'Home',
  };
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button title="Go to Login" onPress={() => this.props.navigation.navigate('Login')} />
      </View>
    );
  }
}

ProfileScreen.js

class ProfileScreen  extends Component {
  static navigationOptions = {
    title: 'Profile',
  };
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Profile Screen</Text>
        <Button title="Go to Login" onPress={() => this.props.navigation.navigate('Login')} />
      </View>
    );
  }
}

App.js enter image description here

and I get Result like this : enter image description here

Please anyone help me to show/display header title (circle red), header title in component LoginScreen and Register are fine, but in component HomeScreen and ProfileScreen are lost. Please help me to show/display it.

Thanks.

Upvotes: 3

Views: 7030

Answers (2)

Steve Moretz
Steve Moretz

Reputation: 3168

You must reload the application if you have not, because navigationOptions are static therefore they load only once when app launches and they don't update.

Upvotes: 0

Ravi
Ravi

Reputation: 35589

Define headerMode: 'screen', inside your stacknavigator.

i.e. your rootStack

const rootStack = createStackNavigator(
{ 

},{
    headerMode: 'screen'
})

Upvotes: 0

Related Questions