Snack: https://snack.expo.io/@catalinmiron/react-native-movie-2.0-carousel
I decided to make another advanced FlatList #ReactNative animation video tutorial this time. This is an animated carousel/animated slider with lots of animations going on.
In this video tutorial we'll learn how to create:
- use the snapToInterval prop
- how to display a portion from the prev and next item
- how to align the active slide in the middle
- how to use MaskedView
Built using @expo, vanilla React Native Animated API and FlatList. This code works in plain React Native project as well since we are using only React Native APIs such as Animated and FlatList.
- Inspiration: https://dribbble.com/shots/8257559-Movie-2-0
- GitHub: https://github.com/catalinmiron/react-native-movie-2.0-carousel
- Expo: https://expo.io/
- TMDB: https://www.themoviedb.org/
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