I am using React Native's FlatList component with pagination. I want to execute a callback with the destination page as a parameter whenever the user releases on scroll.
onScroll fires pre-maturely and switches pages before the users releases the screen.
onScrollDragEnd doesn't correctly give you the destination page unless you drag your finger at least half way across the screen (eg doesn't work if you do a quick swipe).
onMomentScrollEnd doesn't get fired until the display stops moving, which may not get fired if the user is constantly swiping.
Is there some sort of middle ground to achieve this functionality?
Related
I have a screen with WebView (react-native-webview) which has scrollable content. If user continues scrolling after reaching the end of WebView, I want to take user to a different screen with a swipe up animation. With WebView's onScroll function property, I am able to determine if the user has reached end of content or not. But I am not able to take user to a different screen with an animation effect.
Since WebView acts different for android and ios platform (you can continue scrolling even after reaching end of content on ios), I had to use PanGestureHandler to identify if the user is performing swipe up action after reaching end of web content. But when I manually try to navigate user to a different screen, I am unable to create swipe up effect similar to one in GIF below.
I am using react-navigation v5 in my app.
I have already tried using react-native-swiper. It does not work well in Android because it internally uses Scrollable and WebView stop scrolling inside a Scrollable component.
I am using custom HTML content here, so replacing WebView is not really a choice. Is there a way to utilize Stack Navigator to create such an effect?
Thank you.
I'm getting the oddest behavior on code that I didn't write (inherited from a colleague). I have never seen this before.
In React Native, when I click on one component's box, sometimes it jumps to the top of the component (it's wrapped by a Scrollview). Other times the view stays put, as it's supposed to. What could be causing this?
I have used text input in creating a search bar on the 'HomeScreen'. Whenever I click on the search bar, it takes me to the 'SearchScreen' where text input is focussed.
In both screens, I have placeholder "Search" in the text input. The problem I am facing is that the placeholder flickers whenever screens are changed. This happens all the time if/when text input is re-rendered.
I want the placeholder to remain static there for smooth transition between screens. Please let me know if you have any idea on how to erect it or if you have any suggested workaround.
Take a look at this library Fluid Transitions. This library helps to create smooth transitions between screens and shared components. Thus, you can go from screen A to screen B maintaining you search bar input intact or at least keep it with a smooth transition.
Another idea is... Do you really need to move to another screen when focusing the search bar? Is it possible if you just create an SearchList component that "shows/hides" a FlatList (for example), when the user focus the search bar, it will change to another screen when the user clicks on a specific result.
I am using react-native-router-flux and here's some observation, previously I was using .replace() for switching scenes, this time I used .push(), customizing it to not show any animation and now search does not flicker when popping the search screen, however, it does flicker on pushing search screen onto the stack, seems like the re-render is causing flickering (as pop does not trigger a render but push does).
It's best to avoid using the placeholder as for now until the problem is sorted in react-native itself.
We built a React Native tablet kiosk app which displays multiple pages of input fields to a user at a front desk. The user has to fill out all the forms and can send them at the end.
Users can just walk away from the kiosk at any time, which would result in their last screen being the "welcome screen" for the next user. To avoid that, the app resets after some time if there was no user interaction (any touch event on the screen).
Right now, we use a countdown and reset it on each input field, button and background touch there is. This results in passing the reset callback to a lot of components. It works, but it is just a lot of redundancy and can lead to errors easily.
Is there any way, we can add an overlay to the very top of the view, which can catch all touch events and call the reset callback, but also pass the touch event to the views below? So when a user clicks on a button, the overlay calls the its callback but also the button is clicked (same for input fields, etc).
We also tried the Gesture Responder System, but could not get the touch event to pass through - it was always consumed by the component with the Gesture Responder System.
You can try adding a pointerEvents attribute to your View.
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.