react-native-accordion-view
v1.1.9
Published
react-native-accordion-view
Downloads
35
Readme
react-native-accordion-view
Simple accordion view
Table of Contents
Install
$ 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
Usage
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>
Props
- title (string)
- titleStyle (TextStyle)
- rightIcon (boolean default: false)
- iconSize (number)
- headerStyle (ViewStyle)
- subContainerStyle (ViewStyle)
- style (ViewStyle)
- headerComponent (ReactNode)
- open (boolean)
- onPress (void)
- timingTransition (number default:400) opening speed
- containerRadius (number)