npm

react-native-loading-button

1.0.2 • Public • Published

react-native-loading-button

React native button with activity indicator

Before Loading When loading

Install

npm install react-native-loading-button --save

Example

import LoadingButton from 'react-native-loading-button';
 
export default class example extends Component {
 
    constructor(props){
        super(props);
        this.state = {
            isLoading: false
        };
    }
 
    onPressHandler(){
        this.setState({isLoading: true});
        setTimeout(()=>{
            this.setState({isLoading: false});
        }, 1000);
    }
 
 
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <LoadingButton
                    onPress={this.onPressHandler.bind(this)}
                    isLoading={this.state.isLoading}
                />
            </View>
        );
    }
}

Props

Name Detail & Type Default
onPress Button On press callback (function) alert('press')
isLoading Start or stop animation boolean false
activityIndicatorColor Activity Indicator Color (string) '#FFF'
activityIndicatorSize Activity Indicator Size (string) 'small'
viewStyle Main View style (object) 'small'
animationDelay How manny time will tack to animate (number) 200
whenAnimationViewWidth Main view size when animated 40
enableWidthAnimation Change width when animation true
childView Inner child Component Text Component (OK)

Readme

Keywords

none

Package Sidebar

Install

npm i react-native-loading-button

Weekly Downloads

1

Version

1.0.2

License

ISC

Last publish

Collaborators

  • xmanemran