https://github.com/nihgwu/react-native-flanimatedimage

FLAnimatedImage for React Native
https://github.com/nihgwu/react-native-flanimatedimage

flanimatedimage gif react-native

Last synced: about 1 month ago
JSON representation

FLAnimatedImage for React Native

• Host: GitHub
• URL: https://github.com/nihgwu/react-native-flanimatedimage
• Owner: nihgwu
• License: mit
• Created: 2016-09-13T14:57:18.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-11-19T08:59:49.000Z (about 7 years ago)
• Last Synced: 2024-10-27T09:18:01.412Z (about 2 months ago)
• Topics: flanimatedimage, gif, react-native
• Language: Objective-C
• Size: 43.9 KB
• Stars: 51
• Watchers: 5
• Forks: 23
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-flanimatedimage ★43 - FLAnimatedImage for React Native. (Components / UI)
• awesome-reactnative-ui - react-native-flanimatedimage
• awesome-react-native - react-native-flanimatedimage ★43 - FLAnimatedImage for React Native. (Components / UI)
• awesome-reactnative-ui - react-native-flanimatedimage
• awesome-react-native - react-native-flanimatedimage ★43 - FLAnimatedImage for React Native. (Components / UI)
• awesome-react-native-ui - react-native-flanimatedimage ★17 - FLAnimatedImage for React Native. (Components / UI)
• awesome-react-native - react-native-flanimatedimage ★43 - FLAnimatedImage for React Native. (Components / UI)

README

        
# 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](https://github.com/Flipboard/FLAnimatedImage) first** via _Carthage_ or If you're using CocoaPods, you can put the following in your Podfile:

```

pod 'FLAnimatedImage'

```

then

```shell

npm install react-native-flanimatedimage --save

```

If you are using [email protected] or below

```shell

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

```js

import FLAnimatedImage from 'react-native-flanimatedimage';

...

  onLoadEnd = (e) => {

    if (!e.nativeEvent.size) return;

    const { width, height } = e.nativeEvent.size;

    this.setState({

      width,

      height,

    });

  }

...

  

...

```