Skip to content
⛹️‍♀️⛹️‍♂️ Like animation LoadingIndicator with frame by frame view in React-Native
Branch: master
Clone or download
Latest commit 18acbf6 Jul 21, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
FrameLoading.js FIX BUG Jul 21, 2018
LICENSE Create LICENSE May 6, 2018
README.md
package.json
screenshot.gif added screenshot Jun 18, 2018

README.md

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

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>
    )
  }
}
You can’t perform that action at this time.