CODEWITHSUNDEEP
react-nativereact-navigation
SatelBill
SatelBill

Reputation: 731

How to pass parameter to the header of the next screen in react navigation v4 (React Native)?

I am using react navigation v4. There are 2 screens total. I want to pass the parameters of the first screen(Gallery screen) to the second screen(GalleryDetail screen) And I'd like to show it to the header of the second screen. How to show it? That is my code.

AppNavigation.js

const AppStack = createStackNavigator({
  Gallery: {
      screen: GalleryScreen,
      navigationOptions: ({ navigation }) => ({
          headerLeft: () => <NavigationDrawerStructure navigationProps={navigation} />,
          headerTitle: 'my gallery',
          headerTitleAlign: "center",
          headerTitleStyle: { color: 'white', fontSize: 26, marginTop: 20 },
          headerRight: () => <ProfileImage imageURL={galleryURL} />,
          headerBackground: () => <HeaderBackground />,
      }),
  },
  GalleryDetail: {
      screen: GalleryDetailScreen,
      navigationOptions: ({ navigation }) => ({
          headerLeft: () => <NavigationDrawerStructure navigationProps={navigation} />,
          headerTitle: () => (
              <View style={{ flexDirection: 'column' }}>
                  <TextComponent large>{parameter1 of Gallery screen}</TextComponent>  //==> I want to pass here
                  <TextComponent white>{parameter2 of Gallery screen}</TextComponent>  // here
              </View>
          ),
          headerTitleAlign: 'center',
          // headerRight: () => <View style={{width: 40, height: 40, borderRadius: 20, backgroundColor: 'red',marginRight: 15}}></View>,
          headerRight: () => <ProfileImage imageURL={require('../assets/images/icon/purchase.png')} />,
          headerBackground: () => <HeaderBackground />,
      }),
    },
}, {
    initialRouteName: 'Gallery'
});

Gallery screen

_onPressPhoto = item => {
  this.props.navigation.navigate('GalleryDetail', { imgInfo: item });
};

<TouchableOpacity onPress={() => this._onPressPhoto(this.state.header_state)} activeOpacity={0.7}>
  <Text>Send parameter1 to the header of the second screen</Text>
</TouchableOpacity>

GalleryDetail screen

Nothing special. (Please check the AppNavigation.js)

Upvotes: 0

Views: 982

Answers (1)

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16364

You can access the params from the navigation and use them

 navigationOptions: ({ navigation }) => ({
          headerLeft: () => <NavigationDrawerStructure navigationProps={navigation} />,
          headerTitle: () => (
              <View style={{ flexDirection: 'column' }}>
                  <TextComponent large>{navigation.state.params.imgInfo}</TextComponent>  //==> I want to pass here
                  <TextComponent white>{parameter2 of Gallery screen}</TextComponent>  // here
              </View>
          ),
          headerTitleAlign: 'center',
          // headerRight: () => <View style={{width: 40, height: 40, borderRadius: 20, backgroundColor: 'red',marginRight: 15}}></View>,
          headerRight: () => <ProfileImage imageURL={require('../assets/images/icon/purchase.png')} />,
          headerBackground: () => <HeaderBackground />,
      }),

You can refer the docs here https://reactnavigation.org/docs/4.x/stack-navigator#routeconfigs

Upvotes: 1

Related Questions