I am looking to implement a video autoplaying in the listview once user scrolls enough to make the video component visible on screen. However, I cannot find anything in the documentation that could help with implementing an action that would trigger once component is visible.
You can use onChangeVisibleRows
Related
Please can someone help me on how to make my react native app detect when a user swipes left or right? I already researched randomly but seem not to have a positive answer.
So any function or package that can help?
I am mapping through a list of objects and I want the user to view next object in array whenever he swipes ( just like on click ).
It works with onClick but I need it with swipes.
It depends on what you want to do, you can create a carousel using a horizontal Flatlist and use pagination to swipe elements. Please add more details
Try PanResponder from the docs here
React Navigation library supply me the blur event, that trigs when the focused screen is going to be unfocused. Great.
But what if I need to prevent the blur action itself by stopping the user to go away from this screen? The docs only mentions the 'beforeRemove' event, that is something else.
Is there a way to prevent a user to go away from a screen using the screen component logic?
Basically, blur event's callback function must navigate to this page
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.
Using the react native's official Modal component
Is there any way to prevent the behavior when the modal is open, if i press the menu button of the mobile (built-in one) the modal flickers and closes temporary exposing the background view. Please see the attached url of the GIF for clarification . I am also not sure whether its a default behavior in react native or not.
https://imgur.com/LeTtNj5
Thanks in advance
This isn't so much a solution as much as it's guidance. You haven't really given enough detail to help you out properly. Best if you can share the code or setup a reduced test case at https://snack.expo.io that we can fiddle with.
That said, I'm not totally sure. This is an interesting problem, and I'm curious if you'll find a possible solution and it may depend on your implementation details. For instance, is the modal part of the navigation stack (react-navigation?) or is it an imported component? Either way, I would begin by playing with componentWillUnmount. Does it get called? If so, perhaps you can insert some black magic there to minimize the effect, but you'd first need to isolate what specifically is going on before you can hope to solve it.
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.