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 isFetching={this.state.isFetching} />
<FetchingIndicator isFetching={this.props.isFetching} /> // good option if you want to control this component with Redux
<FetchingIndicator isFetching={false} />
<FetchingIndicator isFetching /> // same as <FetchingIndicator isFetching={true} />
...
<FetchingIndicator isFetching message='Loading' color='blue' onBackdropPress={() => { ... }} />

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'

export default class Screen extends Component {
  render () {
    return (
      <View style={styles.mainContainer}>
        <ScrollView style={styles.container}>
          <View style={styles.section} >
            <Image source={Images.logo} />
            <Text style={styles.sectionText}>
              Fetching Indicator is Awesome!
            </Text>
          </View>
        </ScrollView>
        <FetchingIndicator isFetching />
      </View>
    )
  }
}