react-native-curtains

Lightweight helper lib for mounting + unmounting of child elements in an animated 'curtain' style.

Demo

With 'bounce' animation:

With 'linear' animation:

Horizontal version:

Live Demos

(1) Expo snack showing the classical usage.

(2) Expo snack showing the horizontal usage.

Highlights

• lightweight
• no actual dependency
• you decide if you want to use @react-spring/native or react-native-reanimated for the animations

Installation

This library works with both, @react-spring/native and react-native-reanimated. You need to install one of them and set the lib prop accordingly (details below).

Installing react-native-curtains itself:

If you use expo, use:

1expo install react-native-curtains

Otherwise, for npm use:

1npm i react-native-curtains --save

And for yarn use:

1yarn add react-native-curtains

Usage

Use import { ReactNativeCurtains } from "react-native-curtains" to access the main component.

The following example shows a three column usage, where the column with the key "column2" gets removed and therefore unmounted including animation.

1<ReactNativeCurtains lib={"reanimated"}>
2  <View key={"column1"}>
3    <Text>column1</Text>
4  </View>
5  <View key={"column2"}>
6    <Text>column2</Text>
7  </View>
8  <View key={"column3"}>
9    <Text>column3</Text>
10  </View>
11</ReactNativeCurtains>

1<ReactNativeCurtains lib={"reanimated"}>
2  <View key={"column1"}>
3    <Text>column1</Text>
4  </View>
5  <View key={"column3"}>
6    <Text>column3</Text>
7  </View>
8</ReactNativeCurtains>

Note the keys on the immediate children of <ReactNativeCurtains /> - only if those are available, the library can appropriately animate the mounting and unmounting of any given child.

Mounting additional children of course also works the same way.

This example would use react-native-reanimatedREADME.md as the underlying animation library, due to how the lib prop is set to "reanimated" - for details see section "props" below.

Props

Choosing the animation library

There are Pros and Cons for either library, I will quickly try to summarize what my thoughts are: In general one might want to re-use a library if it is already part of a app. If you have already setup react-native-reanimated, there is no need to add an additional dependency, and vice versa. At least, almost... react-native-reanimated behaves more smoothly, especially when using slower animation durations and quickly mounting/unmounting multiple children within a short time frame. With the @react-spring/native this might lead to visual glitches. So it depends on your use case. Also, it does only allow to animate in a "linear" way, while reanimated allows multiple easing functions. One upside for spring is the easier way to set it up initially (just install it and you should be good to go, reanimated on the other hand would take some additional setup steps, see their docs for details).

Misc

Youtube playlist for react-native-curtains videos