CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-navigation-v5
Megha
Megha

Reputation: 41

How to add actions to react navigation header buttons, that interact with the class component's methods?

The application has a react navigation with a right header button, which on press should refresh the data on the screen. Using static navigationOptions() on the class component, I have added the header right button as below:

static navigationOptions = ({navigation}) => {
    return {
      headerRight: () => (
        <TouchableOpacity
          style={{
            width: 30,
            height: 30,
            paddingRight: 20,
          }}
          onPress={() => this.sortData}>
          <Image source={require('../../assets/sort-icon/sort.png')} />
        </TouchableOpacity>
      ),
    };
  };

But the action is not getting triggered. After some research, I understood the reason for the action not being triggered as, instance and instance methods cannot be accessed inside static. But as per my understanding, using static navigationOptions() is the way for customising the navigation header buttons inside class components.

As per the react navigation documentation, the header button interaction with its screen components is achieved through navigation.setOptions() inside the screen component. https://reactnavigation.org/docs/header-buttons/ But I am not understanding, how to use it inside a class component. As, I am new to React Native development, request to help me in resolving this issue.

Upvotes: 0

Views: 1890

Answers (1)

Vahid Alimohamadi
Vahid Alimohamadi

Reputation: 5858

You can handle it on Stack creation time like this example:

  return (
    <Stack.Navigator
      keyboardHandlingEnabled={true}
      screenOptions={({route, navigation}) => ({
        headerLeft: () => (
          <TouchableOpacity
            style={{
              paddingHorizontal: 15,
              height: '100%',
              justifyContent: 'center',
            }}
            onPress={() => navigation.toggleDrawer()}>
            <Icon size={26} light name="bars" />
          </TouchableOpacity>
        ),
        headerTitleAlign: 'center',
        headerTitleStyle: {
          ...styles.Text,
        },
        headerRight: () => (
          <TouchableOpacity
            style={{paddingRight: 10}}
            onPress={() =>
              AsyncStorage.removeItem('@myapp/workspace').then(() =>
                navigation.replace('WorkSpaces'),
              )
            }>
            <Icon light name="exchange" size={24} />
          </TouchableOpacity>
        ),
        title: netInfo.isConnected
          ? connected
            ? settings?.appName
            : 'connecting...'
          : 'Wait for Network connection...',
        animationEnabled: true,
      })}>
      <Stack.Screen name="CustomerTabs" component={CustomerTabs} />
    </Stack.Navigator>
  );

Upvotes: 2

Related Questions