Snack: https://snack.expo.io/@catalinmiron/react-native-events-carousel
In this tutorial we are going to create a stack carousel animation in React Native using FlatList, Animated API and FlingGestureHandler from react-native-gesture-handler package.
I'm also going to show you a technique that I call interconnected animations or reactive animations, where 2 different animations react to each other.
I'm going to teach you how to
- create a stack style carousel
- how to create a reactive animated value
- how to do infinite scrolling and fetch new data
- how to create a flicker type animation when changing the active slide
Inspiration: https://dribbble.com/shots/3731362-Event-cards-iOS-interaction GitHub: https://github.com/catalinmiron/react-native-advanced-stack-flatlist-carousel
- Expo: https://expo.io/
- React Native Gesture Handler: https://github.com/software-mansion/react-native-gesture-handler
You can find me on:
- Github: http://github.com/catalinmiron
- Twitter: http://twitter.com/mironcatalin
Wanna give me a coffe?
- Paypal: mironcatalin@gmail.com
In this video tutorial we'll learn how to create an accordion animation in React Native using Transition API from React Native Reanimated library (https://github.com/software-mansion/react-native-reanimated) and flexbox styling. We will re-create an awesome and colourful animation done by InterfaceMarket.
Inspiration: https://interfacemarket.com/ui-kits/boston-grocery-delivery-app-ui-kit GitHub: https://github.com/catalinmiron/react-native-accordion-menu Reanimated: https://github.com/software-mansion/react-native-reanimated