Skip to content

nihgwu/react-native-flanimatedimage

Repository files navigation

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} />
...