Awesome

react-native-flanimatedimage

FLAnimatedImage for React Native

This module is modified from https://github.com/browniefed/react-native-flanimatedimage with the following changes:

• use Carthage or CocoaPods for FLAnimatedImage dependency
• async image loading
• return the image size onLoadEnd

Install

You have to install FLAnimatedImage first via Carthage or If you're using CocoaPods, you can put the following in your Podfile:

pod 'FLAnimatedImage'

then

npm install react-native-flanimatedimage --save

If you are using react-native@0.40 or below

npm install react-native-flanimatedimage@0.0.3 --save

Link

In XCode, in the project navigator:

• Right click Libraries
• Add Files to [your project's name]
• Go to node_modules/react-native-flanimatedimage/RNFLAnimatedImage
• Add the .xcodeproj file

In XCode, in the project navigator, select your project.

• Add the libRNFLAnimatedImage.a from the deviceinfo project to your project's Build Phases ➜ Link Binary With Libraries

If your Catrhage/Pods folder is not under ios folder, please modify the Headers Search Paths in Build Settings - Search Paths - Header Search Paths

• Click .xcodeproj file you added before in the project navigator and go the Build Settings tab. Make sure All is toggled on (instead of Basic).
• Look for Header Search Paths and add the path where the FLAnimatedImage's header files are placed.

Usage

import FLAnimatedImage from 'react-native-flanimatedimage';

...
  onLoadEnd = (e) => {
    if (!e.nativeEvent.size) return;
    const { width, height } = e.nativeEvent.size;
    this.setState({
      width,
      height,
    });
  }
...
  <FLAnimatedImage style={style} source={source} onLoadEnd={this.onLoadEnd} />
...