I have a snack here where I want to take the scroll Y value and pass it to an animated view inside a sibling component and have that view animate as I scroll, for this example I just want to animate the height. Smaller when scrolling down, larger when scrolling up (doesn't matter). The snack currently passes it as state which I know is incorrect but I'm not sure how else I would achieve this.
How I can animate the component the correct way?
Turns out I'm overthinking it. Just use the useSharedValue hook and pass the scroll value in there then use it as a prop on the sibling component...
Here is the updated snack if anyone was wondering
Related
I'm trying to find a react-native equivalent to Window.scroll() method.
I did my research and considered giving a ref to the ScrollView and using scrollTo() method, just like described here, but my parent ScrollView is composed of sibling components and passing refs among them seems like an overkill.
Is there a simpler method, without relying on refs and scrollTo() methods, in React Native so that when the button is pressed, the screen scrolls down by a certain amount, let's say 100 pixels, nothing more nothing less, just simple as that? Did my research but couldn't find any...any suggestions?
I try to render a dropdown-picker (react-native-dropdownpicker) in a sectionlist but it's impossable to scroll the content of the dropdown. It only shows the first results.
I tried many things with zIndex, view with flex: 1 as parent but im unable to find the solution.
Is it possible to render in a sectionlist or should i be looking for another solution?
sectionlist with dropdown-picker
I think this is what you want.
List Modes
You have 3 options when choosing the list mode.
DEFAULT
FLATLIST
SCROLLVIEW
MODAL
listMode="FLATLIST"
Notes
The FlatList component shouldn't be nested inside ScrollView or you'll come across the VirtualizedLists should never be nested inside plain ScrollViews warning.
If this happens to you and you only have a few items, consider using the SCROLLVIEW mode. Otherwise, you have to use the MODAL mode.
Take a look at this snack:
https://snack.expo.dev/#devsaeedhabibi/dropdown-picker
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
As shown above, I want to create this two-part screen where I can click onto both the A component and B component on the first view provided here. When a user scrolls B component, it may take up the entire screen and move over the A component. (A component does not move with the FlatList).
I'm new to react native and was wondering how I could create such behavior? I tried using absolute positioning and ListHeaderComponent inside the FlatList but didn't really get anywhere. Let me know if anyone has an idea.
Thanks!
I would try something like the following screen structure:
View
Image
ScrollView w/ trans background that goes to the top of screen
FlatList with top padding to push it below the image
Items in list
/FlatList
/ScrollView
/View
You could also see if react-native-parallax-scroll-view works for you as it looks somewhat similar to what you describe
https://github.com/jaysoo/react-native-parallax-scroll-view
That's said there's a long ScrollView with lots of contents, and there's another component at the bottom of the page. I'm trying to lazy-rendering the bottom component when user scroll down enough. Is there any library has implemented this?
(I'm aware of ListView's onEndReached, but not quite sure if that helpful for this case.)
Appreciate if anyone could guide me a direction.
I create a simple lib for this:
https://github.com/chunghe/react-native-defer-renderer
basically you could get scroll position from the onScroll event of the ScrollView (e.nativeEvent.contentOffset), pass the scroll position to the child component. Then in the child component, you could get the distance from top from onLayout event (e.nativeEvent.layout.y).
That's pretty much all the tricks.
Put it at the end of the ScrollView?
ScrollViews do this by default:
removeClippedSubviews bool
Experimental: When true, offscreen child views (whose overflow value is hidden) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is true.
https://facebook.github.io/react-native/docs/scrollview.html#removeclippedsubviews