React Native Call Screen Function from Header

Question

I have update password function inside ScreenPassword , but I want to update password by tapping Save button on screen header.

NavSettings.js

const routeConfigs = {
    Password: {
        screen: ScreenPassword,
        navigationOptions: {
            headerTitle: 'Password',
            headerTintColor: '#000',
            headerRight: (
                <View style={styles.headerRight}>
                    <Button
                        style={styles.buttonHeader}
                        color='#000'
                        title="Save"
                        onPress={???????????} />
                </View>
            )
        }
    }
}

export default createStackNavigator(routeConfigs);

ScreenPassword

export default class ScreenPassword extends Component {
    updatePassword = () => {

    }
    render() {
        return (
            <ScrollView style={styles.container}>
                <View style={styles.boxForm}>
                    <TextInput
                        style={styles.textInput}
                        placeholder="Old Password"
                        secureTextEntry='true'
                    />
                    <TextInput
                        style={styles.textInput}
                        placeholder="New Password"
                        secureTextEntry='true'
                    />
                    <TextInput
                        style={styles.textInput}
                        placeholder="Confirm Password"
                        secureTextEntry='true'
                    />
                </View>
            </ScrollView>
        )
    }
}

Answer 1

You can make use of params and the static method navigationOptions:

class ScreenPassword extends React.Component {

  static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: 'Password',
      headerTintColor: '#000',
      headerRight: (
        <View style={styles.headerRight}>
          <Button
             style={styles.buttonHeader}
             color='#000'
             title="Save"
             onPress={navigation.getParam('updatePassword')}
           />
         </View>
       ),
    };
  };

  componentDidMount() {
    this.props.navigation.setParams({ updatePassword: this.updatePassword});
  }

  render() {
    ...
  }

  updatePassword = () => {
    ...
  }

}

Answer 2

Please tell me how to implement this work into the React Native v0.6 or later?

function Router() {
      return (
        <Stack.Navigator initialRouteName="Home" headerMode="float">
          <Stack.Screen
            name="Home"
            component={HomeTabs}
            options={{
              headerTitle: 'Go to year',
              headerTitleContainerStyle: {
                left: 0,
                right: 0,
              },
              headerRight: () => (
                <View>
                  <TextInput
                    style={styles['search-input']}
                    keyboardType="numeric"
                    maxLength={4}
                    onChangeText={(year) => methodToCall(year)}
                  />
                  <IconSearch style={styles['header-icon-search']} />
                </View>
              ),
            }}
          />
          <Stack.Screen name="Month" component={MonthScreen} />
        </Stack.Navigator>
      );
    }