react-native-fetching-indicator
Fetching indicator component for React Native
Installation
npm install react-native-fetching-indicator --save
Usage
import FetchingIndicator from 'react-native-fetching-indicator'...<FetchingIndicator = /><FetchingIndicator = /> // good option if you want to control this component with Redux<FetchingIndicator = /><FetchingIndicator /> // same as <FetchingIndicator isFetching={true} />...<FetchingIndicator ='Loading' ='blue' = />
PRO TIP 1: Put this component as the last element of a screen
PRO TIP 2: Put this component as the last element of your higher view hierarchy, control isFetching
with Redux and use FetchingIndicator
only once
Props
Prop | Type | Default | Note |
---|---|---|---|
isFetching |
boolean |
false |
Hide or show fetching indicator |
color |
color |
undefined |
ActivityIndicator color |
message |
string |
null |
Message to show below ActivityIndicator |
messageStyle |
style |
{} |
Message style |
backdropColor |
color |
'rgba(0, 0, 0, 0.50)' |
Backdrop background color |
backdropActiveOpacity |
number |
0.8 |
The opacity when backdrop is pressed |
onBackdropPress |
function |
() => null |
Called when backdrop is pressed |
Demo
Example
import FetchingIndicator from 'react-native-fetching-indicator' { return <View => <ScrollView => <View = > <Image = /> <Text => Fetching Indicator is Awesome! </Text> </View> </ScrollView> <FetchingIndicator /> </View> }