Skip to content

TheLartians/react-native-simple-transition

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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"