Awesome

react-native-frame-loading

This package offers Loading indicator with frame by frame view or image

Install

yarn add react-native-frame-loading
# or 
npm install react-native-frame-loading --save

Screenshot

Props

props	default	type	description
animating	false	bool	Determines wheter the loading indicator shows or not
views	[]	array	Specific views that will be shown frame by frame
duration	450	number	Determines how long a frame lasts
modalProps	{}	object	original Modal component props
loadingContainerStyle	`flex: 1, "center"`	object	style object of floating view container

Usage

import FrameLoading from "react-native-frame-loading"
import Icon from "react-native-vector-icons/FontAwesome"

const VIEWS = [
  <View key={1}>
    <Icon name="arrow-up" size={50} />
  </View>,
  <View key={2}>
    <Icon name="arrow-right" size={50} />
  </View>
  ...
  
]

  render() {
    return (
      <View style={styles.container}>
        <Button onPress={this._fetchSomeData} title="show animation" />\
        <FrameLoading
          animating={this.state.loading}
          views={VIEWS}
          duration={250}
          modalProps={{ transparent: true }}
          loadingContainerStyle={{
            justifyContent: "center",
            alignItems: "center",
            flex: 1,
            backgroundColor: "rgba(49,49,49,0.4)"
          }}
        />
      </View>
    )
  }
}