Dynamic title dynamic navigation not working?
I followed exactly the tutorial https://reactnavigation.org/docs/intro/ But the title is not showing. Here is the code and result
import Expo from 'expo';
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import {StackNavigator} from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
}
render() {
const {navigate} = this.props.navigation;
return (
<View style={styles.container}>
<Text>Open up main.js to start working on your app!</Text>
<Button onPress={()=>navigate('Chat',{user:'Lucy'})} title = 'Chat with Lucy'></Button>
</View>
);
}
}
class ChatScreen extends React.Component {
// Nav options can be defined as a function of the screen props:
static navigationOptions = ({ navigation }) => ({
title: `Chat with ${navigation.state.params.user}`,
});
render() {
// The screen current route is passed in to `props.navigation.state`:
const { params } = this.props.navigation.state;
return (
<View>
<Text>Chat with {params.user}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
const SimpleApp = StackNavigator({
Home: {screen: HomeScreen},
Chat: {screen: ChatScreen}
})
Expo.registerRootComponent(SimpleApp);
And here is the result of the screen when I click the button
Another problem is that if I only use
static navigationOptions = {
title: 'Chat with Lucy',
};
Then "Welcome" is still next to the "<" mark, which is different from the tutorial.
source to share
You are using docs for a version newer than the version you installed ( similar issue in githib ). This is about the difference between npm and github versions. The docs are for a github version that's newer, but you've installed react-navigation with npm.
The problem is that you cannot use it navigationOptions
as a function right now. When you do that, it won't be able to find navigationOptions
, so there won't be a title. Use instead:
static navigationOptions = {
title: (navigation) => (`Chat with ${navigation.state.params.user}`),
};
When a title exists, the previous page title will not be displayed to the left of the title.
Or update yours package.json
so you can use the reactive nav docs version:
"react-navigation": "git+https://github.com/react-community/react-navigation.git#7165efc",
source to share