CODEWITHSUNDEEP
react-nativeexporeact-native-navigation
A Lower
A Lower

Reputation: 61

Access state values from parent using react native navigation

I'm using createStackNavigator like this:

navigationOptions: ({ navigation }) => {
    return {
        title: 'Account Details',
        headerLeft : <Back nav={ navigation } goto={'Profile'}/>,
        headerRight: <Icon
            name='check'
            color='#fff'
            onPress={() => **SOME FUNCTION** }
        />
    }
}

This header loads in the 'Account Details' form, where they can edit their username etc. I want to use the 'check' Icon in the header to save the information entered.

Is there a way I can tell it to use a function that exists inside my 'Account Details' component, so I can access the state values from in there? Or somehow pass them back to the parent?

Thanks in advance.

Upvotes: 0

Views: 242

Answers (1)

tuan.tran
tuan.tran

Reputation: 1881

Pass that function to state of navigation and use it normally

class YourComponent extends Component {
  componentDidMount(){
    this.props.navigation.setParams({
      yourFuntion: this._yourfunction,
    })
  }
  
  yourfunction = () => {
    // handle thing with state here
  }
}

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

navigationOptions: ({ navigation }) => {
    const yourFuntion = navigation.getParam("yourFuntion", ()=>{});
    return {
        ...
        headerRight: <Icon
            name='check'
            color='#fff'
            onPress={() => yourFuntion() }
        />
        ...
    }
}

Upvotes: 1

Related Questions