/react-native-fade-toogle

Simple fade in out for React Native

Primary LanguageJavaScriptMIT LicenseMIT

react-native-fade-toogle

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

npm version npm downloads npm licence

Demo

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.