šŸ”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

TheĀ react-native-fade-view providesĀ a cross fade effect for child components.

Animation React Native

Documentation

react-native-fade-view

npm license codeclimate

Cross fade effect for child components

example

Installation

npm install --save react-native-fade-view

Usage

import React, { Component } from 'react'; import { Image, Text } from 'react-native'; import FadeView from 'react-native-fade-view';  class Example extends Component {   render() {     let { active } = this.state;      return (       <FadeView active={active}>         <Text>loading...</Text>         <Image onLoad={() => this.setState({ active: true })} />       </FadeView>     );   } }

Properties

name description type default
animationDuration Fade animation duration Number 225
active Fade view state Boolean false
removeHiddenSubviews Remove invisible subviews Boolean true

Example

git clone https://github.com/n4kz/react-native-fade-view cd react-native-fade-view/example npm install react-native run-ios # or run-android

Copyright and License

BSD License

Copyright 2017-2018 Alexander Nazarov. All rights reserved.


You May Also Like