├── .expo-shared └── assets.json ├── .gitignore ├── App.js ├── README.md ├── app.json ├── assets ├── favicon.png ├── icon.png └── splash.png ├── babel.config.js ├── data.js ├── package.json ├── pic.png ├── react-native-accordion-menu.gif └── yarn.lock /.expo-shared/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, 3 | "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true 4 | } 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/**/* 2 | .expo/* 3 | npm-debug.* 4 | *.jks 5 | *.p8 6 | *.p12 7 | *.key 8 | *.mobileprovision 9 | *.orig.* 10 | web-build/ 11 | 12 | # macOS 13 | .DS_Store 14 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import { StatusBar } from 'expo-status-bar'; 2 | import React from 'react'; 3 | import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'; 4 | import data from './data'; 5 | import { Transition, Transitioning } from 'react-native-reanimated'; 6 | 7 | const transition = ( 8 | 9 | 10 | 11 | 12 | 13 | ); 14 | 15 | export default function App() { 16 | const [currentIndex, setCurrentIndex] = React.useState(null); 17 | const ref = React.useRef(); 18 | 19 | return ( 20 | 25 | 53 | ); 54 | } 55 | 56 | const styles = StyleSheet.create({ 57 | container: { 58 | flex: 1, 59 | backgroundColor: '#fff', 60 | justifyContent: 'center', 61 | }, 62 | cardContainer: { 63 | flexGrow: 1, 64 | }, 65 | card: { 66 | flexGrow: 1, 67 | alignItems: 'center', 68 | justifyContent: 'center', 69 | }, 70 | heading: { 71 | fontSize: 38, 72 | fontWeight: '900', 73 | textTransform: 'uppercase', 74 | letterSpacing: -2, 75 | }, 76 | body: { 77 | fontSize: 20, 78 | lineHeight: 20 * 1.5, 79 | textAlign: 'center', 80 | }, 81 | subCategoriesList: { 82 | marginTop: 20, 83 | }, 84 | }); 85 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Native Accordion Menu 2 | 3 | # Run on your device 4 | 5 | Snack: https://snack.expo.io/@catalinmiron/react-native-accordion-menu 6 | 7 | ### Youtube tutorial 8 | 9 | [![React Native Accordion Menu Youtube tutorial](pic.png)](https://youtu.be/WyWfKUo4FtE) 10 | [![React Native Accordion Menu Youtube tutorial](react-native-accordion-menu.gif)](https://youtu.be/WyWfKUo4FtE) 11 | 12 | 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. 13 | We will re-create an awesome and colourful animation done by InterfaceMarket. 14 | 15 | - Inspiration: https://interfacemarket.com/ui-kits/boston-grocery-delivery-app-ui-kit 16 | - GitHub: https://github.com/catalinmiron/react-native-accordion-menu 17 | - Reanimated: https://github.com/software-mansion/react-native-reanimated 18 | - Expo: https://expo.io/ 19 | 20 | You can find me on: 21 | 22 | - Github: http://github.com/catalinmiron 23 | - Twitter: http://twitter.com/mironcatalin 24 | 25 | Wanna give me a coffe? 26 | 27 | - Paypal: mironcatalin@gmail.com 28 | 29 | 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. 30 | We will re-create an awesome and colourful animation done by InterfaceMarket. 31 | 32 | Inspiration: https://interfacemarket.com/ui-kits/boston-grocery-delivery-app-ui-kit 33 | GitHub: https://github.com/catalinmiron/react-native-accordion-menu 34 | Reanimated: https://github.com/software-mansion/react-native-reanimated 35 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "react-native-accordion-menu", 4 | "slug": "react-native-accordion-menu", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "splash": { 9 | "image": "./assets/splash.png", 10 | "resizeMode": "contain", 11 | "backgroundColor": "#ffffff" 12 | }, 13 | "updates": { 14 | "fallbackToCacheTimeout": 0 15 | }, 16 | "assetBundlePatterns": [ 17 | "**/*" 18 | ], 19 | "ios": { 20 | "supportsTablet": true 21 | }, 22 | "web": { 23 | "favicon": "./assets/favicon.png" 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catalinmiron/react-native-accordion-menu/bc654068f26f09eebfff49db9fd6e5ae9ac02e5a/assets/favicon.png -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catalinmiron/react-native-accordion-menu/bc654068f26f09eebfff49db9fd6e5ae9ac02e5a/assets/icon.png -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catalinmiron/react-native-accordion-menu/bc654068f26f09eebfff49db9fd6e5ae9ac02e5a/assets/splash.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /data.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | bg: '#A8DDE9', 4 | color: '#3F5B98', 5 | category: 'Healthcare', 6 | subCategories: ['Skincare', 'Personal care', 'Health', 'Eye care'], 7 | }, 8 | { 9 | bg: '#086E4B', 10 | color: '#FCBE4A', 11 | category: 'Food & Drink', 12 | subCategories: [ 13 | 'Fruits & Vegetables', 14 | 'Frozen Food', 15 | 'Bakery', 16 | 'Snacks & Desserts', 17 | 'Beverages', 18 | 'Alcoholic beverages', 19 | 'Noodles & Pasta', 20 | 'Rice & Cooking oil', 21 | ], 22 | }, 23 | { 24 | bg: '#FECBCA', 25 | color: '#FD5963', 26 | category: 'Beauty', 27 | subCategories: ['Skincare', 'Makeup', 'Nail care', 'Perfume'], 28 | }, 29 | { 30 | bg: '#193B8C', 31 | color: '#FECBCD', 32 | category: 'Baby & Kids', 33 | subCategories: [ 34 | 'Toys', 35 | 'Trolleys', 36 | 'LEGO®', 37 | 'Electronics', 38 | 'Puzzles', 39 | 'Costumes', 40 | 'Food', 41 | 'Hygiene & Care', 42 | "Child's room", 43 | 'Feeding accessories', 44 | ], 45 | }, 46 | { 47 | bg: '#FDBD50', 48 | color: '#F5F5EB', 49 | category: 'Homeware', 50 | subCategories: [ 51 | 'Air purifiers', 52 | 'Stoves, hoods & ovens', 53 | 'Refrigerators', 54 | 'Coffee & Tea', 55 | 'Air conditioning', 56 | 'Grilling', 57 | 'Vacuum cleaners', 58 | ], 59 | }, 60 | ]; 61 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "scripts": { 4 | "start": "expo start", 5 | "android": "expo start --android", 6 | "ios": "expo start --ios", 7 | "web": "expo start --web", 8 | "eject": "expo eject" 9 | }, 10 | "dependencies": { 11 | "expo": "~38.0.8", 12 | "expo-status-bar": "^1.0.2", 13 | "react": "~16.11.0", 14 | "react-dom": "~16.11.0", 15 | "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz", 16 | "react-native-reanimated": "~1.9.0", 17 | "react-native-web": "~0.11.7" 18 | }, 19 | "devDependencies": { 20 | "@babel/core": "^7.8.6", 21 | "babel-preset-expo": "~8.1.0" 22 | }, 23 | "private": true 24 | } 25 | -------------------------------------------------------------------------------- /pic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catalinmiron/react-native-accordion-menu/bc654068f26f09eebfff49db9fd6e5ae9ac02e5a/pic.png -------------------------------------------------------------------------------- /react-native-accordion-menu.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/catalinmiron/react-native-accordion-menu/bc654068f26f09eebfff49db9fd6e5ae9ac02e5a/react-native-accordion-menu.gif --------------------------------------------------------------------------------