react-native-fade-toogle

Simple fade in out for React Native, with callback and easing options

Install

Install the package:

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

Usage

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 | Yes |

License

MIT.