catalinmiron / react-native-advanced-stack-flatlist-carousel

React Native Advanced Stack FlatList Carousel

Run on your device

Snack: https://snack.expo.io/@catalinmiron/react-native-events-carousel

Youtube tutorial

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: [email protected]

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