React Native FadeView

FadeView is a handy component written in TypeScript in order to handle the fade animations more easier for every react native component.

Installing

For the latest stable version:

using npm:

npm install --save react-native-fadeview-wrapper

using yarn:

yarn add react-native-fadeview-wrapper

Usage

import React, { Component } from 'react';
import { FadeView } from 'react-native-fadeview-wrapper';

const Example = () => {

    const [isVisible, setIsVisible] = React.useState<boolean>(false)

    return (
      <FadeView visible={isVisible}>
        {/** any components can be used here in order to have the fade animation */}
      </FadeView>
    );
}

Documentation

here is the properties and the descriptions of it:

Props Name Default Type isRequired Description
visible it’s required boolean YES
shouldEnterWithAnimation false boolean NO if it’s true, then the first state of visible would be presented by animation
style undefined ViewStyle NO optinal style for the fadeview itself
children undefined `JSX.Element JSX.Element[]` NO
entranceBearing Bearing.Center Bearing NO entrance animation with can be determined by Bearing enum from the lib, values: Top, Bottom, Left, Right , Center
leaveBearing Bearing.Center Bearing NO leave animation with can be determined by Bearing enum from the lib, values: Top, Bottom, Left, Right , Center
fadeOutScale 1.1 number NO scale of fade out state of the animation
duration 200 number NO milliseconds of the fade animation
animationFinished undefined (visible: boolean) => void NO call back closure in order to do something after each animation is finished

GitHub

View Github