react-native-fetching-indicator

0.2.0 • Public • Published

react-native-fetching-indicator npm version js-standard-style

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

Package Sidebar

Install

npm i react-native-fetching-indicator

Weekly Downloads

1

Version

0.2.0

License

MIT

Unpacked Size

361 kB

Total Files

5

Last publish

Collaborators

  • lucasfronza