A simple animated expandable section for react native apps using reanimated
- ✅ Customizable
- ✅ Includes option to not render collapsed compnent. (For less rendring).
- ✅ Uses Reanimated v3
npm install react-native-reanimated-animated-accordionor using yarn
yarn add react-native-reanimated-animated-accordionimport Expandable from 'react-native-reanimated-animated-accordion'; <View style={{ width: '80%', borderRadius: 20, backgroundColor: 'white', shadowOffset: { height: -2, width: 0, }, elevation: 2, shadowRadius: 20, shadowOpacity: 0.07, }} > <TouchableOpacity style={{ padding: 20, }} onPress={() => { setExpanded(!expanded); }} > <Text>Toggle</Text> </TouchableOpacity> <View style={{ width: '100%' }}> <Expandable duration={speed} expanded={expanded} > <View style={{ width: '100%', padding: 20, paddingTop: 0 }}> <Text> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Necessitatibus ab placeat alias commodi voluptatibus possimus ducimus sit repellat praesentium fugit similique aut quam nemo libero, aperiam deleniti modi natus quia! </Text> <Text> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Necessitatibus ab placeat alias commodi voluptatibus possimus ducimus sit repellat praesentium fugit similique aut quam nemo libero, aperiam deleniti modi natus quia! </Text> <View style={{ marginTop: 20, width: '100%', alignItems: 'center' }} > <Image source={testImage} style={{ height: 100, width: 100, resizeMode: 'contain' }} /> </View> </View> </Expandable> </View> </View>If you would like to prevent collapsed components from being rendered, just add a renderWhenCollapsed={false}. this can help if you have heavy collapsed compoennts as it may reduce your boot time + ram.
<Expandable duration={speed} renderWhenCollapsed={false} expanded={expanded} > // </Expandable>MIT
Made with create-react-native-library