how to change header title in react native functional component?

user_9291101 0
Viewed 678

i am using react-navigation v4 and i want to change the title and the approach i am using is slow while rendering(title that is set in the stack navigator is rendered first and then new one is rendered),is there better way i can render only the new one

export default NewsList = ({ results, navigation}) => {
    return <View >
        <FlatList
            data={results}
            keyExtractor={result => result.id}
            renderItem={({ item }) => {
                return (
                    <TouchableOpacity 
                        onPress={() => navigation.navigate( 'news',title: item.title)}>
                        <NewsCard result={item} />
                    </TouchableOpacity>)
            }}
        />
    </View>
};

////////////////////////////////////////////////////////////////////

export default NewsScreen = ({ navigation}) => {
    NewsScreen.navigationOptions = {
       title: navigation.getParam("title");,
       };
 }

////////////////////////////////////////////////////////////////////

const NewsStack = createStackNavigator({
NewsList :NewsList,
News :NewsScreen 

},{
    initialRouteName:'NewsList',
    defaultNavigationOptions: {
        
        headerStyle: {
          backgroundColor: '#4BB5C3',
        },
      },
      navigationOptions: {
        tabBarLabel: 'NewsList',
      },
});

export default createAppContainer(NewsStack);
react-navigation react-native javascript
1 Answers

Ciao, try to set title before navigate into NewsList like this:

export default NewsList = ({ results, navigation}) => {
return <View >
    <FlatList
        data={results}
        keyExtractor={result => result.id}
        renderItem={({ item }) => {
            return (
                <TouchableOpacity 
                    onPress={() => {
                        navigation.setParams({ otherParam: item.title });
                        navigation.navigate('news');
                     }
                  }>
                    <NewsCard result={item} />
                </TouchableOpacity>)
        }}
    />
</View>
};

And I think you could remove navigationOptions in NewsScreen.

user_138970650
Related