react-native-simple-transition

react-native-simple-transition

A minimalist and easy to use transition component for React Native.

Usage

Install the library

yarn add react-native-simple-transition

Create a transition component and add the content as a child. New components will transition with an animation every time the content key changes.

import { WithPushTransition } from 'react-native-simple-transition';

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

Currently the only transition component is WithPushTransition. More are planned to be added soon.

WithPushTransition

Optional properties

• contentKey: alternative to updating the child's key property
• duration: transition duration in milliseconds
• style: the style given to the transition component
• easing: an easing function for the transition
• direction: the direction of the transition; can be "left", "right", "up" or "down"