NavigatorIOS: Accessing onRightButtonPress from within child component

[nick]

I'm creating a TodoList example app using Flux. Right now I have three components: TodoListApp, TodoItems and AddItem. TodoListApp is simply a NavigatorIOS component which shows TodoItems by default and a method to push the AddItem page to the navigator stack when the user taps the '+' button.

My question is: is there a way for my AddItem component (child of NavigatorIOS) to handle the onRightButtonPress event? Right now I've had to put in a bunch of hacks to accommodate adding a todo item when the user taps the 'Save' button from the AddItem page.

[nick]

btw I'd love to contribute this example to the official repo once it's done :-)

[vjeux]

You are right, we need to have a todo app example otherwise we're not a real js lib :p

[nick]

My thoughts exactly. I'm trying to give it the exact same functionality as the iOS demo app you build in the first tutorial. Except the tutorial for this will be about 1/10th the length ;-)

[zertosh]

@nick I've got a similar issue - I need to be notified that a "back" happened #26. I'm currently hacking around it by having the NavigatorIOS children call a prop callback on componentWillUnmount.

[ericvicenti]

Currently the best way to do that is to create an EventEmitter in the owner of the NavigatorIOS, then you can pass it down to children using route.passProps. The child can mix in Subscribable.Mixin and then in componentDidMount, you can this.addListenerOn(this.props.events, 'myRightBtnEvent', this._handleRightBtnPress);

It is clear that this API needs improvement. We are actively working the routing API in Relay, and hopefully react-router, but we want NavigatorIOS to be usable independently. Maybe we should add an event emitter inside the navigator object, so child components can subscribe to various navigator activity: this.addListenerOn(this.props.navigator.events, 'rightButtonPress', this._handleRightBtnPress);

Feedback welcome!

[nick]

That last api looks good to me. In the meanwhile I'll try your suggestion. Can't wait to see what @ryanflorence and @mjackson do with support in react-router! Already using it in all my other projects.

[ReadingSteiner]

@ericvicenti
Why not use

this.props.event.addListener('myRightBtnEvent',this._handleRightBtnPress)` ?

directly in the componentDidMount?

What is Subscribable.Mixin's job here?

[ericvicenti]

Subscribable.Mixin is something we use internally to make sure nobody forgets to unsubscribe to an emitter from a component on unmount. The mixin will automatically remove subscriptions added with this.addListenerOn. We are currently phasing it out, though, because we will be transitioning to observables in an upcoming version of React.

For more info on the existing EventEmitter, see the github project here: https://github.com/facebook/emitter

[ReadingSteiner]

@ericvicenti
Thanks a lot for ur reply :)

[backslash112]

@nick
Checkout this demo: react-native_flux_demo

[tbolt]

Flux being the only solution for this isn't ideal.

[backslash112]

@Teebolt
I agree with you, because I met a new problem when I trying to use Flux:
I created a TodoItems app too, When I succeeded in pushing a notification to the child component, and the child component will save the new item to the db, after this, the child component will push another notification to the list component for reload the list, the problem is, there are two dispatches in this process and it will cause a error: Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.

[tbolt]

I was able to solve this using a simple event emitter. I can post more details if anyone needs.

[backslash112]

@Teebolt Please post more details about simple event emitter, thank you.