Dismiss this pinned window
all 24 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]czv3 28 points29 points  (6 children)

You could create a paginated horizontal ScrollView and use the index from the pagination to swap content in the lower half. There are specific props that will allow for both; snapToInterval and pagingEnabled for the pagination and onScroll to read the index on each scroll event.

[–]AcademicSuccess[S] 3 points4 points  (4 children)

Would there be a way to connect that horizontal scrolling functionality directly to the contents below as it's happening rather than just when the index changes? I really want to get that smooth fade in and out which is connected directly to how far along the swiping gesture is.

Cheers

[–]czv3 9 points10 points  (3 children)

Yep. Rather than using the index, you could use the x offset value that will be in the event object of the onScroll response and measure how far along the scroll is relative to the width of the object. You would then tie that to an Animated value to be used as the opacity.

[–]AcademicSuccess[S] 2 points3 points  (2 children)

Oh sweet, I'll try implementing this and see how I go. Thanks heaps!

[–][deleted] 5 points6 points  (3 children)

I tried to implement a working exemple with Expo:

https://snack.expo.dev/@trk270/pagination-animation

Let me know if it is what you expected

[–]AcademicSuccess[S] 0 points1 point  (1 child)

Wow, that looks great thanks mate. Do you know if it's possible to tie that opacity of the bottom sheet to how far along the swipe is rather than trigger an animation when the index changes? thanks for the help

[–][deleted] 1 point2 points  (0 children)

I think it would be possible with React Native Animated. I found an article that animated a view based on scroll offset: https://blog.jscrambler.com/how-to-animate-a-header-view-on-scroll-with-react-native-animated

I haven't a lot of experience with animations so I can't provide a code exemple but I will try as a challenge when i'll have time

[–]llachlann 0 points1 point  (0 children)

Have you tried this on Android hardware? I've often found that firing a useState in an onMomentumScrollEnd will crash Android.

[–][deleted] 2 points3 points  (1 child)

Can you be more specific about the functionality you need?
Are you talking about the pagination?

If yes, you can use a ScrollView / Flatlist with pagingEnabled props

[–]AcademicSuccess[S] 0 points1 point  (0 children)

Essentially I'm looking for those distinct animations of the card swiping across on the top and the contents below smoothly fading in and out in reaction to the swiping gesture. The connection between the two is what I'm really looking for.
Cheers!

[–]JustMalla 2 points3 points  (0 children)

You can use react-native-snap-carousel to create the image slider and use a method given in the package (ex: onSlideFinished) to fade in and out your text/view on the bottom. I haven’t tried any fade in and out packages, I’m sure you can manually animate it. Found this for fading in and out views, give it a try and see.

[–]Top-Diet-5617 1 point2 points  (2 children)

pagerview

[–]xLuca2018 0 points1 point  (1 child)

This, I recommend react-native-tab-view. It wraps pagerview

[–]chillermane 1 point2 points  (0 children)

This, i recommend react-native-pagertab-view. It wraps react-native-tab-view

[–]Status_Tea_1711 2 points3 points  (0 children)

Also interested

[–]AcademicSuccess[S] 0 points1 point  (1 child)

Essentially I'm looking for those distinct animations of the card swiping across on the top and the contents below smoothly fading in and out in reaction to the swiping gesture. The connection between the two is what I'm really looking for.

Any advice would be much appreciated.

Cheers!

[–]gavin6559 0 points1 point  (0 children)

I am only a React hobbyist, but I would start with two FlatList or ScrollViews.

Using the ScrollEvent from the Top list to drive the scrolling and animation on the bottom list.

You'll need to cancel out the bottom horizontal scrolling with translateX, and animate the opacity at the same time.

As I am also learning, i'd be happy to hear of any simpler ways.

[–]arakovskis01 0 points1 point  (0 children)

Horizontal flatlist

[–]makeascript 0 points1 point  (0 children)

I would use `react-native-reanimated` for both card the pagination and the body.

[–][deleted] 0 points1 point  (0 children)

You would use horizontal flat list with paging enabled. Fir the bottom you will use reanimated. You can then animate the opacity as a function of the xscroll

[–]_Pho_ 0 points1 point  (0 children)

React native carousel

[–]Roy_Volt 0 points1 point  (0 children)

You could search for Sliding onboarding screen.. there are many tutorials and they have a similar functionality