I'm attempting to create a custom NavBar on a screen that renders a ScrollView. Inside the NavBar, there's a button, that when pressed, causes the NavBar to translate downwards, thereby giving the appearance that the NavBar is expanding (This is done using Animated.spring() with the useNativeDriver option). Everything is working great, except if the ScrollView is still scrolling at the time the button is tapped (ie: when "momentum" scroll is taking place). In this scenario, the onPress handler that kicks off the NavBar animation is invoked as expected, but calls to Animated.spring() do not cause any animation to take place. Is it possible to either have the NavBar "expansion" animation to occur during the scroll, or pause the scroll to allow animation to proceed?
Like it's explained in RN docs the animation type you using are stoped by gesture events like scrolling, better use Animated.event() with onScrollprops combined with an interpolation animation to animate you footer.
Related
I am trying to use either ScrollView or FlatList to build a swipable carousel. At one step in the swiper, I want to be able to disable scrolling to the next item until another step is completed, but still enable the user to scroll back to the previous screen. How can I disable swiping in a single direction (left/right) while still allowing swipe in the other direction? I have tried to use onMomentumScrollBegin and onScroll to detect direction and then disable scrolling via the scrollEnabled prop, but it is not immediate and causes glitchy behavior
In my app, I have horizontal FlatList which is used for swiping between several sub-pages of a screen. This works great.
However, on one of the pages, I have a Slider component. On iOS it works fine, but on Android, the parent ScrollView of the FlatList seems to "steal" the swipe gesture. I am only able to adjust the Slider by clicking very precisely on its thin line, but I cannot adjust it by sliding.
What I need is something like one of these
A view that wraps the Slider component and stops swipe gestures from being propagated to the parent ScrollView
A way to make the FlatList/ScrollView not consume swipes directly on elements that responds to horizontal swipes themself
Somehow adjust the area of which the Slider component will eat the touches around it (it's very small and hard to hit directly). I already tried adding a hitSlop prop, with no luck.
Any suggestions for a solution are very appreciated :)
Check example code and result here.
https://snack.expo.io/#esbenvb/mad-yogurt
I have a view, in which there is a redux form field linked to a text input.
First of all, is there a way to show that keypad on initial rendering without the sliding in animation?
Second, on finished editing, is there a way to still keep the keypad up there?
I have tried to set blurOnSubmit to false in TextInput, it seems to stop me from losing the focus by clicking outside.
Lastly, there is also a button on that page which will start a request with the input value, on resolved, a modal will slide up from the bottom to show a success screen. This modal is implemented using react-navigation. The modal is a relatively small rectangle shape with the rest part transparent. So users can see the original page even when the success modal is up. In this case, is there a way to always show the keypad in the original screen even when the modal is up?
First of all, is there a way to show that keypad on initial rendering without the sliding in animation?
No. React Native doesn't support a way to disable the slide animation.
Second, on finished editing, is there a way to still keep the keypad up there?
If the TextInput is being rendered inside a ScrollView, add keyboardShouldPersistTaps=handled. https://facebook.github.io/react-native/docs/scrollview#keyboardshouldpersisttaps. It will hold the focus.
I watched this presentation and there's a section on how to build an IOS Maps like UI. When dragging from the bottom to top, it drags to the top, and after it reaches the top, it continues scrolling up. Also, when scrolling down, when it reached the top content of the ScrollView, it continues to drag down.
It is suggested that it can be done using ScrollView by adding an empty transparent cell as the first element on the ScrollView. I have tried implementing the same which can be found in this snack. In my case, instead of Maps, I am using another ScrollView.
But the problem is that the first element (transparent element) does not allow to interact with the First ScrollView elements. I have tried with pointerEvents inside the first transparent view and even in its parent ScrollView. But this does not help. Has anyone tried implementing this kind of use case with react-native? All I found was this library, but I think it's not maintained properly.
you need to set the z-index of the transparent view to send it under/behind the interactive content, here is a good resource:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Edit: Actually I could not accomplish it, it seems like everything inside a scrollview will always be behind or in front of other elements, it seems like you can't have part of the scrollview behind something else and another part in front of something else.
I am trying to build a component to detect a pulldown on a scrollview. Pulldown being when you try to refresh facebook or twitter feeds.
So my approach was trying to use the onScroll method to detect the changes from scroll view.
onScroll={this.handleScroll}
handleScroll(event) {
console.log(event.nativeEvent.contentOffset.y);
}
However, what I found is when you are scrolling downward (like you are scrolling through a facebook or twitter feed), it will give you the value of the offset.
I then tried to emulate the 'pulldown' behavior where I would scroll in the opposite direction. The difficulty is when the scroll view reaches 0, I can't detect any decrease in scroll. Does that make sense? Basically how I can detect a pulldown when the scroll view is at 0.
You can use RefreshControl to achieve this