Numeric Production Mechanism

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

    2.1.1 • Public • Published

    react-native-fade

    A wrapper component to fade its children in and out based on a boolean.

    Fade example gif

    Installation

    # yarn
    yarn add react-native-fade
    
    # npm
    npm install react-native-fade --save

    Then, import with:

    import Fade from 'react-native-fade';

    Note: You may also need to install react-native-reanimated.

    Usage

    Example:

    import React, { useState } from 'react';
    import { StyleSheet, Text, View, Button } from 'react-native';
    import Fade from 'react-native-fade';
    
    export default function App() {
      const [visible, setVisible] = useState(false);
      return (
        <View>
          <Button
            onPress={() => setVisible(!visible)}
            title={visible ? 'Hide text' : 'Show text'}
          />
          <Fade visible={visible} direction="up">
            <Text>I fade in</Text>
          </Fade>
        </View>
      );
    }

    You can see a full example app inside the /example folder!

    Props

    Prop Required? Type Description
    visible false boolean Show the children of <Fade>.
    direction false string Can be "up" or "down". When the child component fades in there's an optional subtle translation that you can apply with "up" or "down".
    duration false number The amount of time in milliseconds the fade transition should take.
    style false React Native Style or Object Applies style a view around the faded child components

    Install

    npm i react-native-fade

    DownloadsWeekly Downloads

    192

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    20.9 kB

    Total Files

    14

    Last publish

    Collaborators

    • jonsamp