Nutella Pancake Machine

    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"

    Install

    npm i react-native-simple-transition

    DownloadsWeekly Downloads

    2

    Version

    0.0.10

    License

    MIT

    Unpacked Size

    11.8 kB

    Total Files

    9

    Last publish

    Collaborators

    • the-lartians