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
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
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;
this.setState({
width,
height,
});
}
...
<FLAnimatedImage style={style} source={source} onLoadEnd={this.onLoadEnd} />
...