A simple and fully customizable cross-platform React Native component that implements a spinner UI.
NodeJS >= v8.11.1
react-native-cli >= 2.0.1
react-native >= 0.57.4
npm >= 5.6.0
npm:
npm install react-native-modal-spinner
import React, { Component } from "react";
import { View, Button } from "react-native";
import Spinner from "react-native-modal-spinner";
class SpinnerComponent extends Component {
state = {
visible: false
};
showSpinner = () => {
this.setState({ visible: true }, () => {
setTimeout(() => {
this.setState({ visible: false });
}, 3000);
});
};
render() {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#FFF"
}}
>
<Button title="Show spinner" onPress={this.showSpinner} />
<Spinner
color="red"
size="small"
backgroundColor="#FFF"
visible={this.state.visible}
onClose={() => this.setState({ visible: false })}
/>
</View>
);
}
}
Property | Type | Default | Description |
---|---|---|---|
visible | Boolean | false | Boolean to show/hide the spinner |
size | String (enum) small, large | "small" | Size of the spinner |
backgroundColor | String | - | Color of the spinner background |
onClose | Function | - | Callback that is called when the user taps the back button |
color | String | default is gray on iOS and dark cyan on Android | Color of the spinner |
MIT © Ajay