React-native-yyimage NPM

react-native-yyimage

YYImage for React Native

This is react native port of YYImage library.

Hints you wanna know:

use Pods for YYImage dependency
lib returns the image size on onLoadEnd
port was written to match FLAnimatedImage implementation (it doesn't contain onFrameChange method )

Install

You have to install YYImage first via Pods

npm install react-native-yyimage --save

Link

In XCode, in the project navigator:

Right click Libraries
Add Files to your project's name
Go to node_modules/react-native-yyimage/RNYYImage
Add the .xcodeproj file

In XCode, in the project navigator, select your project.

Add the libRNYYImage.a from the deviceinfo project to your project's Build Phases ➜ Link Binary With Libraries

Usage

import YYImage from "react-native-yyimage";

...
  onLoadEnd = (e) => {
    if (!e.nativeEvent.size) return;
    const { width, height } = e.nativeEvent.size;
    this.setState({
      width,
      height,
    });
  }
...
  const style = {width: this.state.width, height: this.state.height};
  return <YYImage source={{uri:this.props.url}}
				style={style}
				resizeMode='contain'
				onLoadEnd={(event) => this.onLoadEnd(event)}/>;
...