I try to animate a login view with fly-in animation when the view did mount, but it seems that KeyboardAvoidingView isn't work inside the animation view. I have tried several packages, none of them work. Can someone tell me how to avoid text input behind the keyboard in the animation view?
Related
I'm using a webview to show a html content, this html have links. I put a TouchableWithoutFeedback to open a link, I tried to emulated the button action of android so I put this button with position absolute. my problem is that when the button is above a link and I touch the button, react native open the link in the webview and the link in my button, I try to put TouchableWithoutFeedback inside a view to use onTouchStart and onTouchEnd with stopPropagation, but this doesn't work, Do you know a ways to stop propagation in these cases?
I tried with pointerEvents="none" in a view with the webview but this cancel all the links, as could be expected.
I tried to change pointerEvents to none in an onTouchStart and after change pointerEvents to auto in a onTouchEnd in a view with my TouchableWithoutFeedback, but it doesn't work.
Thanks for your help!
I tried to do with ScrollView and transform and scrollTo but i couldnt figure it out and i dont want to create with react-navigation
i want to create a fixed bar at the top and two animated buttons in it and when button touched go second screen and play button animation and when screen swiped play button animation also
like this and screen has to be slideable too
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 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'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.