Updating state inside Static onRight() or onLeft() - undefined function error

[luisbenan]

Version

Tell us which versions you are using:
"react": "^16.2.0",
"react-native": "^0.51.0",
"react-native-beacons-manager": "^1.0.7",
"react-native-calendars": "^1.16.1",
"react-native-elements": "^0.18.5",
"react-native-router-flux": "^4.0.0-beta.27",

Expected behaviour

Update this.state.daySelected to today's value

Actual behaviour

Getting error of undefined function, either:

• [cannot read property "bind" of undefined ] when using
  this.goToday.bind(this)
• goToday is not a function when using this.goToday()

However, these functions work fine outside of the Static onRight() {}

What am I missing here?

What's the best way to update state when using Static onRight() or onLeft() ?

Thanks

[kylethebaker]

Since onRight is static you don't have access to this or any other internal component state. It is essentially just a regular function, external from the component.

This was a limitation for us as well. We weren't able to come up with a reasonable solution for changing the state, but maybe someone else can chime in with ideas.

[luisbenan]

Thanks. That makes total sense, I knew I was missing something/breaking some rules. Hopefully there's a work around. Anybody?

[Paul-Todd]

Lets see if this makes sense....

Inside the onRight function you will need to get the ref for the component view. This can be found in the Actions.refs.SCENE_NAME (see #2256).

so..

we bind the function to "this" in the constructor.

`constructor(props) {
super(props);
this.goToday = this.goToday.bind(this);
}'

We can then access it in the static

static onRight() { const c = Actions.refs.todayScene; c.goToday(); }

Remember if you are wrapping your class in connect (if you are using redux) you will need to add a withRef to the config settings of your connect call and use getWrappedInstance() to get the actual instance.

export default connect(mapStateToProps, mapDispatchToProps, null, { withRef: true })(Today);

Of course the easiest way is just to use Actions.refresh in the componentDidMount though this is an anti-pattern

componentDidMount() { Actions.refresh({ right: () => (<Text onPress={this.goToday} >{"Save"}</Text>) }); }

[wardjk87]

I was able to user Paul-Todd comment and (https://stackoverflow.com/questions/34004331/react-es6-how-to-access-child-component-functions-via-refs) to finally get my onRight method to call my component's method using redux without having to use static method on my class.

I didn't have mapDispatchToProps but only mapStateToProps, so I used the following export line:

export default connect(mapStateToProps, null, null, {withRef: true})(NewStatusPage);

I called the submitStatusPost() method on NewStatusPage component from my scene using the following:

onRight={()=> { Actions.refs.newStatus.getWrappedInstance().submitStatusPost(); }}

The getWrappedInstance method returned my current mapStateToProps values in my redux store for NewStatusPage. Also newStatus is the key to my scene using NewStatusPage as its component.

[maac4422]

Thanks @Paul-Todd you save my life

[timeturnback]

hi @wardjk87 . where do you put your ref ? . I have try
constructor(props) { super(props); this.subjectInfo = React.createRef();}

return ( <View style={styles.container} ref='subjectInfo'> )

it doesn't work

[kylethebaker]

@timeturnback If I'm understanding the solution correctly you don't create a ref yourself but rather use the one provided by the router. It should be Actions.refs[yourSceneName], where yourSceneName is the identifier for the scene that you set up in the router.