malaa-tech / react-native-reanimated-accordion

A simple animated expandable section for react native apps using reanimated 💳

react-native-reanimated-accordion

A simple animated expandable section for react native apps using reanimated

🦄 Features

• ✅ Customizable
• ✅ Includes option to not render collapsed compnent. (For less rendring).
• ✅ Uses Reanimated v3

How we use it

Installation

npm install react-native-reanimated-animated-accordion

or using yarn

yarn add react-native-reanimated-animated-accordion

⚠️ Make sure you have react-native-reanimated installed in your project.

Usage

import 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>

Reduce Rendering

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>

License

MIT

---

Made with create-react-native-library