FLAnimatedImage for React Native

Usage no npm install needed!

<script type="module">
  import reactNativeFlanimatedimage from '';



FLAnimatedImage for React Native

This module is modified from with the following changes:

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


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

pod 'FLAnimatedImage'


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


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.


import FLAnimatedImage from 'react-native-flanimatedimage';

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