Access state values from parent using react native navigation

Question

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.

tuan.tran · Accepted Answer · 2018-08-20 03:02:53Z

1

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() }
        />
        ...
    }
}

answered Aug 20, 2018 at 3:02

tuan.tran

1,88119 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Access state values from parent using react native navigation

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related