I want to emit a tap event as if the user had tapped the app at a certain location on a view. I believe this will involve NativeEventEmitter but I don't see which NativeModules to configure the NativeEventEmitter with and what events would be produced.
Maybe have a look at panresponder: https://facebook.github.io/react-native/docs/panresponder
Here is an Example how to use: https://stackoverflow.com/a/38769295/1256697
Related
What I'm looking for?
I want to get notified when the user swipes/pans the pan to check other locations.
The only only event I could find is onPress but it is only fired when the user actually presses on the map, but if the user swipes the map to change view it doesn't get fired.
What I need it for
I want to know if the user swiped the map and the user's location is not the center of the map anymore. If yes, then show a button to center map around the user's location. Like I said, how do I know if the user swiped.
What am I using
Mapbox SDK for react-native (currently only testing on ios but I need it to work on ios and android in the future).
What I have tried so far
onRegionWillChange = { ( ) => this.myfunction() }
myfunction here only gets notified when the region loaded changes, not when the user is not centered anymore.
this._map.getCenter()
I user this to know if thee center of the map is the user's location. But I am looking again for the event that gets fired when the user swipes & then I would call this function to verify the swipe.
Any Help is very much apprechiated
I've no experience using the SDK for react-native, but using the JS version you can use on drag events. It might lead you to a way to do it using the react-native SDK.
There are three types.
drag
dragend
dragstart
This shows an example that listen for the drag event and writes out the current center of the map to console.
this._map.on("drag", (x) => {
console.log(this._map.getCenter());
});
I'm trying to add two AppState eventListeners to an app, but it seems like the seconde one is overriding the first.
Is there any way to use both eventListeners?
Yes, events can have multiple listeners. That is the whole point of the event architecture.
Always make sure your events are in a useEffect and the events are removed after unloading.
I would like to have a small menu that closes if the user interacts with any other component. For example if the user tries to scroll or interact with any of the content in a scrollview behind the menu (see the image below for reference).
I have two ideas for how this might be achieved:
A transparent layer behind the menu with an absolute position and dimensions matching the device. If this layer registers a touch event the menu can be dismissed. The problem with this is that from the users perspective the touch event was totally ignored. So for this to work well I would need to be able to still pass the touch event through the absolute layer to the content behind it.
Add callbacks to every component that could be interacted with to notify the menu that it should close. This option seems like it would be very messy and because of the large number of components in my use case it is not practical to implement and maintain.
Is there an other proper way to solve this problem? Can any of the issues I raised with the ideas above be resolved or mitigated?
Wrap your view with a TouchableWithoutFeedback component and provide it a onPress callback that hides the menu if it's open. Depending on how top-level the 'expand' icon is, you may want to track the menu's visibility in redux and dispatch an action onPress to track globally.
I am writing a chat with audio messages. And I want to do something like in Whatsapp or other messengers. When user holds the button - program is recording the voice, when he releases - it stops and sends the message.
My question is how can I use Touchableopacity or Button and listen release event.
You can start recording in onPressIn prop of TouchableOpacity and and stop it in onPressOut prop of TouchableOpacity
The TouchableOpacity component has a prop called onPressOutin which you can pass a function to execute when the user releases the button.
I would like to create a carousel that scrolls automatically until the user scrolls / touches the ScrollView itself.
The auto-scrolling itself works fine with using scrollView.scrollTo but how could I detect if the user is interacting with the ScrollView? I took a look at the onScroll event but this does not seem to distinct between a user generated event and an event that was generated by calling scrollTo.
Also I'd like to know if it is possible to get the current scroll position from the ScrollView directly instead of reading it everytime from the onScroll event.
I'm very thankful for any tips and suggestions.
By digging into ScrollView's source code you can notice a few undocumented callbacks that will help you achieve what you're after, namely onTouchStart and onTouchEnd. These two callbacks are triggered only when user interacts with the ScrollView and not when you scroll programmatically.
You will probably want to clear your auto-scroll interval on onTouchStart and restart it after a delay on onTouchEnd.
Regarding your next question, the answer is no. As far as I know, no getter is currently exposed to retrieve the current scroll position. Therefore, you need to rely on the event passed to onScroll, retrieve event.nativeEvent.contentOffset['x' or 'y'], and store it in your component's state.
Note that if you're doing some heavy animations that need to follow scroll position closely (e.g. animated header or parallax image), it would be a good idea to use the native driver for Animated.event. You can learn more about it on React Native's blog.