Simple Transition Component For React Native

A lightweight React Native component that makes it easier to create smooth transitions on the app.

Install & Import:

# Yarn
$ yarn add react-native-simple-transition

# NPM
$ npm i react-native-simple-transition --save
import { WithPushTransition } from 'react-native-simple-transition';

Basic Usage:

const MyComponent = () => {
  const [count, setCount] = useState(0);
  return (
    <WithPushTransition style={{flex: 1}}>
      <Text key={count} onPress={() => setCount(count+1)}>
        This component will smoothly transition on key changes.
      </Text>
    </WithPushTransition>
  )
}

Default Props:

children: React.ReactNode & { key?: Key };
contentKey?: Key;
duration?: number;
style?: ViewStyle;
easing?: (v: number) => number;
direction?: "left" | "right" | "up" | "down";

Preview:

Simple Transition Component For React Native

Download Details:

Author: TheLartians

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/TheLartians/react-native-simple-transition

License: MIT

You Might Be Interested In:

Add Comment