Morioh
Login
Mhret Aatifa

Mhret Aatifa

3 years ago

Simple Transition Component For React Native

react-native-simple-transition

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

animated example

Usage

Install the library

yarn add react-native-simple-transition

Create a transition component and add the content as a child. New components will be animated every time the key changes.

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

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>
  )
}

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"

Download Details:

Author: TheLartians

Source Code: https://github.com/TheLartians/react-native-simple-transition

#react-native #react #mobile-apps

Simple Transition Component For React Native
3.15 GEEK