FLAnimatedImage for React Native
Objective-C JavaScript
Switch branches/tags
Nothing to show
Clone or download
Latest commit 6c075f0 Nov 19, 2017
Permalink
Failed to load latest commit information.
RNFLAnimatedImage Revert "Fixed import RCTImageUtils.h" Nov 19, 2017
.gitignore init Sep 13, 2016
.npmignore init Sep 13, 2016
FLAnimatedImage.android.js use prop-types Sep 10, 2017
FLAnimatedImage.ios.js capacity Sep 10, 2017
LICENSE init Sep 13, 2016
README.md Update README.md Feb 12, 2017
index.js use prop-types Sep 10, 2017
package.json bump version Nov 19, 2017

README.md

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