README
React-Native Busy Indicator
Install
npm install react-native-busy-activity-indicator --save
Usage
Place the indicator component as close to the root as possible, outside your other view components
const BusyIndicator = require('react-native-busy-activity-indicator');
const YourComponent = React.createClass({
render() {
return (
<View>
...
<BusyIndicator />
</View>
);
}
Show / Hide loader
Toggling the component can be done from any file, provided the component has already been placed and rendered.
const loaderHandler = require("react-native-busy-activity-indicator/LoaderHandler")
loaderHandler.showLoader("Loading") // Show indicator with message 'Loading'
loaderHandler.showLoader("Loading More") // Show indicator with message 'Loading More'
loaderHandler.hideLoader() // Hide the loader
Component Properties
Prop | Type | Description |
---|---|---|
color |
number |
color of the indicator. Default gray |
overlayWidth |
number |
overlay width |
overlayHeight |
number |
overlay height |
overlayColor |
string |
overlay color |
text |
string |
text. Default: Please wait... |
textColor |
string |
text color |
textFontSize |
number |
text font size |
textNumberOfLines |
number |
total number of lines does not exceed this number. Default: 1 |
Size |
small/large |
Size of the spinner. Default: small |
Demo
Note: The spinner moves much smoother than shown in recording!