react-native-accordion-view

Simple accordion view

Table of Contents

• Install
• Usage
• License

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)

License

MIT © Yasin Solak