Comments (20)
@backslash112 Here is how I was able to have the "onRightButtonPress" trigger a function in the sub-component.
The only dependency I used is https://github.com/Olical/EventEmitter which can be added:
var EventEmitter = require('wolfy87-eventemitter');
In my main file (index.io.js) I created a new event emitter outside of the class:
var rightButtonHandler = new EventEmitter();
Then, inside the class I created a method to be called when the button is pressed:
handleSaveButton() { rightButtonHandler.emitEvent('saveButtonPressed'); }
And right below that I am passing the event emitter as a property to the sub-component:
passProps: { events: rightButtonHandler }
Now, switching to the sub-component class, add this or update your componentDidMount method:
componentDidMount() { this.props.events.addListener('saveButtonPressed', this.saveConcert.bind(this)); }
The above will be calling this saveConcert:
saveConcert() { /// This is now called when the navigatorIOS right button is pressed. }
Hope this helps!
from react-native.
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!
from react-native.
@ericvicenti
Why not use
this.props.event.addListener('myRightBtnEvent',this._handleRightBtnPress)` ?
directly in the componentDidMount
?
What is Subscribable.Mixin
's job here?
from react-native.
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
from react-native.
btw I'd love to contribute this example to the official repo once it's done :-)
from react-native.
You are right, we need to have a todo app example otherwise we're not a real js lib :p
from react-native.
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 ;-)
from react-native.
@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
.
from react-native.
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.
from react-native.
@ericvicenti
Thanks a lot for ur reply :)
from react-native.
@nick
Checkout this demo: react-native_flux_demo
from react-native.
Flux being the only solution for this isn't ideal.
from react-native.
@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.
from react-native.
I was able to solve this using a simple event emitter. I can post more details if anyone needs.
from react-native.
@teebolt Please post more details about simple event emitter, thank you.
from react-native.
@teebolt
Thank you very much, it works.
But if you want to start another dispatch
in a listener
that is triggered by emitChange()
of a Store
, you will get the same error like I said above: Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.
from react-native.
@ericvicenti I tried the approach you mentioned in one of the replies, thanks for the detailed explanation. Just wanted to check if the same holds true now or is there another way of solving it in a better way. If so could you please help me out with that.
Thanks.
from react-native.
These days I would just go with a redux-style control flow, but its not too easy to pass props down into the inside of NavigatorIOS scenes. But it can probably be done with a redux provider, and that would be a much cleaner solution
from react-native.
@ericvicenti Thanks for the prompt response. Will try out getting redux-style control flow.
from react-native.
@ericvicenti @chetankothari
Can you elaborate what you mean by redux-style control flow?
Notify the click event through redux state?
from react-native.
Related Issues (20)
- Execution failed for task ':app:buildCMakeDebug[arm64-v8a]'. Execution failed for task ':app:buildCMakeDebug[x86]' HOT 5
- ✖ Could not create an empty Git repository, see debug logs with --verbose HOT 2
- Pressable interaction issue with StackNavigator on iPhone Xs + new architecture HOT 3
- React-RCTFabric compile issue HOT 1
- How could I init a Fabric component with my customized init method, such as initWithDelegate: HOT 2
- Android View doesnt go to bottom screen edge HOT 2
- Scroll issue in horizontal flatlist in android (react native version 0.73.5) HOT 6
- Can RCTViewComponentView get access to RCTViewManager's bridge property? HOT 4
- on Android,After upgrading React Native from 0.64.2 to 0.72.5, constants returned via getContents in bridge classes cannot be used in JavaScript HOT 9
- Passing gap as a prop to View works even though not supported according to ViewProps / the docs HOT 1
- Animated Value listeners removed after bound elements unmounted
- FlatList scrollToIndex not able to scroll properly for indexes that is in stickyHeaderIndices HOT 4
- Sticky headers in SectionList cause unnecessary item re-rendering and visual glitches HOT 2
- AwesomeProject/ios/build/AwesomeProject.build/Debug-iphonesimulator/AwesomeProject.build/DerivedSources/AwesomeProject_vers.c module map file 'AwesomeProject/ios/build/Debug-iphonesimulator/YogaKit/YogaKit.modulemap' not found HOT 3
- React 73.6 and Xcode 15.3 Multiple commands produce 'React-Core-60309c9c-RCTI18nStrings' (project 'Pods') and 'React-Core-RCTI18nStrings' (project 'Pods') HOT 11
- [regression] React Native 0.74.0-rc.4: ERROR: [ContentDelivery.Uploader] Asset validation failed (90360) Missing Info.plist value. A value for the key 'MinimumOSVersion' in bundle Foo.app/Frameworks/hermes.framework is required HOT 2
- React Native 0.74.0-rc.4: `use_ccache` is broken: no ccache wrapper script `ccache-clang.sh` bundled in npm package HOT 2
- Android events don't get fired using mEventDispatcher.dispatchEvent with the New Architecture and bridgeless off HOT 4
- TypeError: Error.stack getter called with an invalid receiver, js engine: hermes
- Flatlist list items are aligning on top of list header when the minHeight of the header becomes greater than the height given.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native.