Home

Awesome

react-native-frame-loading NPM version

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

<img src="https://raw.githubusercontent.com/heyman333/react-native-frame-loading/master/screenshot.gif" width="320" height="568">

Props

propsdefaulttypedescription
animatingfalseboolDetermines wheter the loading indicator shows or not
views[]arraySpecific views that will be shown frame by frame
duration450numberDetermines how long a frame lasts
modalProps{}objectoriginal Modal component props
loadingContainerStyleflex: 1, "center"objectstyle 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>
    )
  }
}