Simple accordion view
$ npm install react-native-accordion-view
or
$ yarn add react-native-accordion-view
Now we need to install react-native-reanimated.
If you are using Expo, to ensure that you get the compatible versions of the libraries, run:
expo install react-native-reanimated react-native-gesture-handler react-native-redash
If you are not using Expo, run the following:
yarn add react-native-reanimated react-native-gesture-handler react-native-redash
import AccordionView from 'react-native-accordion-view'
export default function App() {
const [open, setOpen] = useState(false)
return (
<View style={styles.container}>
//you can turn the button on or off if you want
<Button title="Open" onPress={() => setOpen(!open)}></Button>
<AccordionView
open={open}
onPress={() => setOpen(!open)}
title="Hello Everyone !"
rightIcon={true}
>
<Text>Lorem Ipsum</Text>
<Text>Lorem Ipsum</Text>
<Text>Lorem Ipsum</Text>
<Text>Lorem Ipsum</Text>
<Text>Lorem Ipsum</Text>
<Text>Lorem Ipsum</Text>
</AccordionView>
</View>
);
}
<AccordionView
open={open}
onPress={() => setOpen2(!open)}
headerComponent={<HeaderComponent />}
style={{ margin: 15 }}
headerStyle={{
backgroundColor: "#4d5dbe",
borderTopLeftRadius: 12,
borderTopRightRadius: 12,
}}
subContainerStyle={{
backgroundColor: "#5e6dc4",
borderBottomRightRadius: 12,
borderBottomLeftRadius: 12,
}}
>
//.....
</AccordionView>