react-native-fetching-indicator v0.2.0

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

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>
    )
  }
}