react-native-flanimatedimage's Introduction

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 [email protected] or below

npm install [email protected] --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} />
...

Recommend Projects