# react-native-fade-toogle

> Simple fade in out toogle in your View

Latest version **0.2.0** (published 2017-03-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-fade-toogle
pnpm add react-native-fade-toogle
yarn add react-native-fade-toogle
bun add react-native-fade-toogle
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2017-03-15 |
| First published | 2015-11-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Francis Mak |
| Maintainers | franfran |
| Keywords | react-component, react-native, fade |

## Links

- npm: https://www.npmjs.com/package/react-native-fade-toogle
- Repository: https://github.com/franfran/react-native-fade-toogle
- Homepage: https://github.com/franfran/react-native-fade-toogle#readme
- Issues: https://github.com/franfran/react-native-fade-toogle/issues
- npm.io page: https://npm.io/package/react-native-fade-toogle

## Recent versions

- 0.2.0 (latest) — 2017-03-15
- 0.1.1 — 2016-04-23
- 0.1.0 — 2015-11-19

## README

# react-native-fade-toogle
Simple fade in out for React Native, with callback and easing options

[![npm version](http://img.shields.io/npm/v/react-native-fade-toogle.svg?style=flat-square)](https://npmjs.org/package/react-native-fade-toogle "View this project on npm")
[![npm downloads](http://img.shields.io/npm/dm/react-native-fade-toogle.svg?style=flat-square)](https://npmjs.org/package/react-native-fade-toogle "View this project on npm")
[![npm licence](http://img.shields.io/npm/l/react-native-fade-toogle.svg?style=flat-square)](https://npmjs.org/package/react-native-fade-toogle "View this project on npm")

![Demo](https://github.com/franfran/react-native-fade-toogle/wiki/images/screenshot.gif)

## Install

Install the package:

```bash
$ npm i react-native-fade-toogle --save
```

## Usage

```javascript

var FadeToogle = require('react-native-fade-toogle');
var {
    StyleSheet,
    Text,
    View,
    Easing,
} = React;

var fadedemo = React.createClass({
    _startButtonPressed(event) {
        var r = this.refs.fade;
        r.fadeToggle();
    },
    _fadeToogleCallback(){
        var r = this.refs.fade;
        console.log('fade: '+r.state.opacity);
    },
    render: function() {
        return (
            <View style={styles.container}>
                <FadeToogle ref="fade" component="View" easing={Easing.elastic(2)} callback={this._fadeToogleCallback}>
                    <Text>Hello</Text>
                </FadeToogle>
                <Button style={styles.button} onPress={this._startButtonPressed}>Fade</Button>
            </View>
        );
    }
});
```

## Props

Prop                  | Type     | Optional | Default                   | Description
--------------------- | -------- | -------- | ------------------------- | -----------
fromOpacity    | Number    | Yes      |                           | Init opacity value
toOpacity    | Number    | Yes      |                           | Fade to opacity value
duration    | Number    | Yes      |                           | Fade effect duration value
component    | Number    | No      |                           | Animatable components, View, Text, Image
easing    | Function    | No      |                    | The fade effect
callback    | Function    | Yes      |                    | Callback function after toggle
isDisabled | Boolean    | Yes      | false              | Enable or disable `callback` property function call
style      | [style](http://facebook.github.io/react-native/docs/view.html#style)    | Yes      |                 

## License

MIT.

---
_Source: https://npm.io/package/react-native-fade-toogle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._