Elastic Scroll List Animation • React Native

Source code: / tutorial-or-for-97363251
Shorts Version: • Tutorial: Elastic Scro...
📚 Chapters
- (00:00) Initial Demo
- (00:12) Reanimated solution
- (02:10) Final Demo - reanimated
- (02:22) Usage of Reanimated with Moti
- (02:51) Moti Demo
- (03:06) Using built-in Animated API without external packages
- (03:47) Animated Demo
- (03:54) A Little Tip!!
➡️ Connect with me: bio.link/ashud
🌐 Other distributions:
Hindi version: • Rubber Banding List Sc...
Twitter/𝕏: / 1765806696637575344
#reactnative #reactjs #expo #623

[@massive.educator-shorts]

Update: The Moti solution can be more simplified, as we can change AnimatedStyle to DerivedValue and we can use it directly in MotiView's animate property.
See here for it's visual presentation: twitter.com/aashudubey_ad/status/1765073367496024517

[@erfelipe]

Your videos are very clear and to the point. Please continue.

[@gnom-om]

Thanks! Nice solution.

[@usmanmarkaz]

more plz

[@jervi_sir]

great, Btw how to approach a collapsible header when we are scrolling in a MaterialTopTabNavigator, especially when a use navigate in each tab,

[@massive.educator-shorts]

I think to use collapsible header with Top Tab bar, you might need to hack around some solution using scrolling value and animate the header height.
Or there's also an existing package for this, 'react-native-collapsible-tab-view' which is built on top of 'react-native-tab-view' package used by react-navigation under the hook, you can give it a try.
package: github.com/PedroBern/react-native-collapsible-tab-view

[@sofiyasami9278]

it is not working