react-native-simple-transition
TypeScript icon, indicating that this package has built-in type declarations

0.0.10 • Public • Published

Build npm version

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"

Package Sidebar

Install

npm i react-native-simple-transition

Weekly Downloads

1

Version

0.0.10

License

MIT

Unpacked Size

11.8 kB

Total Files

9

Last publish

Collaborators

  • the-lartians