react-native-loading-gif

react-native-loading-gif

Support for custom pop-up effects and GIF.

Install

npm install react-native-loading-gif --save

Use

import Load from "react-native-loading-gif";

<Load ref="Load"></Load>

Document

The loader has many uses way and API:

prop	default	type	description
opacity	0.6	number	Background transparency
bgColor	#000000	string	background color
isShow	false	boolean	Whether to display immediately
Image	0	number	GIF number,a total of six,0~5
showBtn	false	boolean	Whether to display the close button
BtnStyle	none	object(style)	close button style
bgAnimate	default	boolean	"default" or "opacity"
fadeWay	up	string	pop-up position

API:

1. OpenLoad():Open LoadBox.
2. CloseLoad():Close LoadBox.
3. setTimeClose():Display the set time, and then automatically hide,default value is 2000.

Like this:

render(){
  return (
    <View>
      <YourComponent />
      <Load ref="Load"></Load>
    <View>
  )
}
componentDidMount(){
  this.refs.Load.setTimeClose();//default 2000
  // his.refs.Load.setTimeClose(3000);
}

Or this:

render(){
  return (
    <View>
      <TouchableOpacity onPress={()=>{this._onPress()}}>
        <Text>click</Text>
      </TouchableOpacity>
      <Load showBtn={true} ref="Load"></Load>
    <View>
  )
}
_onPress(){
  this.refs.Load.OpenLoad();
}

GIF and WebP support on Android

By default, GIF and WebP are not supported on Android. You will need to add some optional modules in android/app/build.gradle, depending on the needs of your app.

dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  compile 'com.facebook.fresco:animated-base-support:0.11.0'

  // For animated GIF support
  compile 'com.facebook.fresco:animated-gif:0.11.0'

  // For WebP support, including animated WebP
  compile 'com.facebook.fresco:animated-webp:0.11.0'
  compile 'com.facebook.fresco:webpsupport:0.11.0'

  // For WebP support, without animations
  compile 'com.facebook.fresco:webpsupport:0.11.0'
}

Also, if you use GIF with ProGuard, you will need to add this rule in proguard-rules.pro :

-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl {
  public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier);
}

Example

1. step 1

git clone https://github.com/zhouyuexie/react-native-navigator-animation.git

1. step 2

cd ./react-native-navigator-animation/example

1. step 3

npm install

1. step 4

react-native run-ios or react-native run-android