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, { Bearing } from 'react-native-fadeview-wrapper';

const Example = () => {

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

    return (
      <FadeView 
          visible={visible} 
          bearingMoveDistance={20}
          leaveBearing={Bearing.Top} 
          entranceBearing={Bearing.Bottom}>
          {/** 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
bearingMoveDistance	50	number	NO	option distance when you pass the directional Bearing for entrance or leave
easing	Easing.inOut(Easing.linear)	EasingFunction	NO	Change the Easing function of the animation here
removeChildrenAfterDisapearance	false	boolean	NO	you can choose if you want the children view to be removed after disappearance
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