Collapsible component in React Native at 60 FPS

Using react-native-fast-collapsible and Reanimated V3

Photo by Ion Fet on Unsplash

There are currently many libraries available for Collapsible components, but they are either no longer supported or do not implement the latest innovations in the React Native architecture. Hence the need for a library that works with the new architecture based on the React Native Reanimated API V3 and allow to have always native performance.

Therefore, I have created a react-native-fast-collapsible library using the Reanimated V3 API allowing you to use the collapsible component in a simple way and create your own solutions based on the headless API.

Collapsible component

This is a simple component that enables an animated action to hide and show content.

<Collapsible isVisible={isVisible}>
  <Text>Lorem ipsum....</Text>
</Collapsible>

A simple Collapsible component.

useCollapsible

Headless hook to create your own collapsible components. By accessing Shareable value from Reanimated, we can create independently dependent animations, e.g. arrow rotation.

const { animatedStyles, onLayout, height, maxHeight } = useCollapsible({
  isVisible,
  easing: Easing.bounce,
  duration: 1000,
});

//...

<Animated.View style={animatedStyles}>
   <View onLayout={onLayout}>
       <Text>
       Lorem ipsum...
       </Text>
   </View>
</Animated.View>

Example of useCollapsible hook.

You can find out more about the library from the README on the library repository.

GitHub - lukaszkurantdev/react-native-fast-collapsible: Pure Javascript library for React Native…

Also take an interest in my other articles:

Using biometrics in React Native

Real-time pose detection in React Native using MLKit

Dynamically change iOS app icons in React Native