https://github.com/n4kz/react-native-fade-view

Cross fade effect for child components
https://github.com/n4kz/react-native-fade-view

android ios react react-native

Last synced: 3 months ago
JSON representation

Cross fade effect for child components

• Host: GitHub
• URL: https://github.com/n4kz/react-native-fade-view
• Owner: n4kz
• License: other
• Created: 2017-05-09T10:25:53.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-20T08:48:10.000Z (almost 7 years ago)
• Last Synced: 2024-10-14T02:26:50.944Z (3 months ago)
• Topics: android, ios, react, react-native
• Language: JavaScript
• Size: 106 KB
• Stars: 47
• Watchers: 3
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license.txt

Awesome Lists containing this project

README

        
[npm-badge]: https://img.shields.io/npm/v/react-native-fade-view.svg?colorB=ff6d00

[npm-url]: https://npmjs.com/package/react-native-fade-view

[license-badge]: https://img.shields.io/npm/l/react-native-fade-view.svg?colorB=448aff

[license-url]: https://raw.githubusercontent.com/n4kz/react-native-fade-view/master/license.txt

[codeclimate-badge]: https://img.shields.io/codeclimate/maintainability/n4kz/react-native-fade-view.svg

[codeclimate-url]: https://codeclimate.com/github/n4kz/react-native-fade-view

[example-url]: https://cloud.githubusercontent.com/assets/2055622/25848352/ab91e994-34c2-11e7-93c3-55477456b846.gif

# react-native-fade-view

[![npm][npm-badge]][npm-url]

[![license][license-badge]][license-url]

[![codeclimate][codeclimate-badge]][codeclimate-url]

Cross fade effect for child components

![example][example-url]

## Installation

```bash

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

```

## Usage

```javascript

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 (

      

        loading...

         this.setState({ active: true })} />

      

    );

  }

}

```

## Properties

 name                 | description               | type    | default

:-------------------- |:------------------------- | -------:|:------------

 animationDuration    | Fade animation duration   |  Number | 225

 active               | Fade view state           | Boolean | false

 removeHiddenSubviews | Remove invisible subviews | Boolean | true

## Example

```bash

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.