Nebulous Puffy Marshmallows

    react-native-fade-in-out
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.6 • Public • Published

    Build Status Coverage Status NPM Version

    react-native-fade-in-out

    A React Native component that uses a boolean prop to fade children in and out

    FadeInOut Example

    Installation

    Install with yarn or npm:

    $ yarn add react-native-fade-in-out
    
    $ npm i react-native-fade-in-out
    

    Example usage

    Example snack

    import React, { useState } from "react";
    import {Button, Text, StyleSheet, View} from 'react-native';
    import FadeInOut from 'react-native-fade-in-out';
    
    const App = () => {
      const [visible, setVisible] = useState(true);
    
      const toggleVisible = () => {
        setVisible(!visible);
      }
    
      return (
        <View style={styles.container}>
          <FadeInOut visible={visible}>
            <Text>Default duration</Text>
          </FadeInOut>
          <FadeInOut visible={visible} duration={1000}>
            <Text>Duration = 100</Text>
          </FadeInOut>
          <FadeInOut visible={visible} rotate={true}>
            <Text>Rotate</Text>
          </FadeInOut>
          <FadeInOut visible={visible} scale={true}>
            <Text>Scale</Text>
          </FadeInOut>
          <Button onPress={toggleVisible} title="Start Fade" />
        </View>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'space-evenly',
      },
    });
    
    export default App;

    For an example that uses the optional props, see the FadeInOutExample project in this repository.

    $ cd FadeInOutExample
    $ yarn start
    

    Props

    visible

    Determines whether the child fades in or out. The child will fade in when true and out when false.

    Type Required
    Function Yes

    duration

    Sets the duration of animation in milliseconds. The default duration is 300 ms.

    Type Required
    Number No

    rotate

    Adds a 360° rotation to the fade, clockwise on fade in and counterclockwise on fade out.

    Type Required
    Boolean No

    scale

    Adds scaling from %0 to %100 on fade in and %100 to %0 on fade out.

    Type Required
    Boolean No

    style

    Type Required
    View styles No

    useNativeDriver

    Sets useNativeDriver for the animation. The default value is true. See React Native blog post for more details.

    Type Required
    Boolean No

    Typescript

    This package contains built-in TypeScript declarations.

    License

    MIT © Courtney Pattison

    Install

    npm i react-native-fade-in-out

    DownloadsWeekly Downloads

    559

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    7.92 kB

    Total Files

    5

    Last publish

    Collaborators

    • courtneypattison