Skip to content

Gapur/react-native-accordion

Folders and files

NameName
Last commit message
Last commit date

Latest commit

c9c12dd · Feb 24, 2023

History

40 Commits
Dec 22, 2021
Jun 19, 2022
Sep 29, 2020
Sep 24, 2020
Sep 24, 2020
Sep 26, 2020
Sep 27, 2020
Feb 24, 2023
Sep 29, 2020
Sep 27, 2020
Aug 3, 2022
Sep 27, 2020
Dec 22, 2021

Repository files navigation

react-native-accordion

Animated accordion component for React Native with React 17 and React Native 0.64.3 Support

Example app

image

Installation

npm install --save @gapur/react-native-accordion

Usage

import Accordion from "@gapur/react-native-accordion";

<Accordion headerTitle="Title">
  <View>
    <Image source={imageUrl} />
    <Text>{description}</Text>
  </View>
</Accordion>

You can also show arrow button on the bottom and override accordion header content:

<Accordion
  showButton
  style={styles.accordion}
  renderHeader={() => renderAccordionHeader()}>
  <View>
    <Image source={imageUrl} />
    <View style={styles.headerValue}>
      <Text style={styles.headerLabelText}>{title}</Text>
      <Text style={styles.headerValueText}>{description}</Text>
    </View>
  </View>
</Accordion>

Properties

Prop Description Default
headerStyle Optional styling for the header title container {}
headerTitle Header title text
headerTitleStyle Header title text style
showButton Show accordion bottom button false
buttonStyle Accordion bottom button style {}
renderHeader Render own accordion header () => {}
style Optional styling for the container
renderButtonContent Render own accordion bottom button (showContent) => {}

Running example app

git clone git@github.com:Gapur/react-native-accordion.git
cd react-native-accordion/example
yarn
npm run ios

Contributors

License

MIT