Wondering what’s next for npm?Check out our public roadmap! »

    transitionview

    1.1.5 • Public • Published

    TransitionView

    TransitionView is a drop-in replacement for the React Native 'View' component. It serves the same purpose, except to animate it into the UI. It utilizes the Animatable library for animations and adds an index prop to control the sequence at which things load.

    Installation

    npm i transitionview
    

    Usage

    Include the components

    import { TransitionView } from "transitionview";
    

    Render Component

    By default, TransitioView receives the following props as well as all the default props of a regular React Native View component.

    <TransitionView
      index={0}
      animation="fadeIn"
      duration={500}
      delay={index ? (index * 500) / 5 : 0}
      useNativeDriver
    >
      (...components to be rendered to UI)
    </TransitionView>
    

    The above chunk of code is the same as the one below.

    <TransitionView>
      (...components to be rendered to UI)
    </TransitionView>
    

    To add sequence to components loading to the UI, use the 'delay' prop. So, the first component to load will be the default index={0}. Then, set the next component to load to index={1}, and the next to index={2}, and so on... If you are using '.map', set the index of the TransitionView to the index prop of the '.map' function and it will evenly increment your components as they load onto the UI.

    data.map((item, index) => {
      return (
        <TransitionView
          index={index}
        >
        <Text>
          {item.text}
        <Text>
      )
    })
    

    To change the amount of the delay, change the number of miliseconds index is multiplied by (default is 500).

    data.map((item, index) => {
      return (
        <TransitionView
          index={index}
          delay={index ? (index * 1500) / 5 : 0}
        >
          <Text>
            {item.text}
          <Text>
        </TransitionView>
      )
    })
    

    To change the animation, change the animation prop to the corresponding animation from react-native-animatable.

    data.map((item, index) => {
      return (
        <TransitionView
          index={index}
          delay={index ? (index * 1500) / 5 : 0}
          animation={"bounceInDown}
        >
          <Text>
            {item.text}
          <Text>
        </TransitionView>
      )
    })
    

    To change the duration of the animation, change the duration prop to the desired amount of miliseconds for the animation to last.

    data.map((item, index) => {
      return (
        <TransitionView
          index={index}
          delay={index ? (index * 1500) / 5 : 0}
          animation={"bounceInDown}
          duration={1500}
        >
          <Text>
            {item.text}
          <Text>
        </TransitionView>
      )
    })
    

    Misc. Notes

    The 'useNativeDriver' prop is set, so if you don't want to use native drivers for your animations you can set this prop to false (useNativeDriver={false}).

    Feel free to check out my work further at my portfolio & blog site - https://kevinmurphywebdev.com.

    Install

    npm i transitionview

    DownloadsWeekly Downloads

    4

    Version

    1.1.5

    License

    ISC

    Unpacked Size

    4.57 kB

    Total Files

    3

    Last publish

    Collaborators

    • avatar