Use with Reanimated

[Hendrixer]

Let me start by saying, awesome project! I'm currently trying to implement it in my app. However, I'm using react-pager-view which is based on Reanimated. All your examples how how to accomplish the animations with Animated from react-native.

I'm just curious if you know how one might achieve the animations on scroll using Reanimated instead. Thanks

[kolking]

Hey Scott! Thank you very much. Would you mind to share a code example so I can better understand what are you trying to achieve? Also could you tell what's the purpose of using react-native-pager-view in your case, because swiping left/right through pages can be easily made using <ScrollView horizontal={true} pagingEnabled={true}> without a third-party library.

[Hendrixer]

No that's a good point. For me, it's a vertical scroll with paging enabled. I wasn't aware of the scroll view having the paging option. I might reactors to use the scroll view instead of the pager component. Thank you.

[gogaz]

+1
This is definitely not blocking, at least not in my situation, but reanimated is generally more efficient than react native's Animated.
I don't use any specific library forcing me to use react-native-reanimated but I use it everywhere else in my App for animations and this would be the only place I use something different.

A few reasons why react-native-reanimated is better:

• Reanimated animations run on the UI thread by default, while Animated requires using useNativeDriver: true to achieve this.
• Reanimated can achieve frame rates higher than 60 FPS, while Animated is limited to 60 FPS.
• Reanimated uses a more efficient communication method between JavaScript and native code, reducing overhead.
• It offers more style options and works well with gesture handling libraries.
• Reanimated allows synchronous access to current animation values, which is not possible with Animated. (In our case, this means it would be easier to display textual scroll indicator like Picture 7 out of 12 in addition to the page indicator)

[kolking]

@gogaz those are fair points, but the page indicator component does not obligate you to use only the RN's Animated, you can use react-native-reanimated in your project for heavy animations and just pass the Animated value to the current prop of the component. Using reanimated inside the page indicator component is unreasonable because there are no heavy animations and everything done on the UI thread with useNativeDriver: true.