# react-native-eximage

> A Third Party Image Module.

Latest version **0.1.6** (published 2015-10-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-eximage
pnpm add react-native-eximage
yarn add react-native-eximage
bun add react-native-eximage
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2015-10-08 |
| First published | 2015-07-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Guo Dong |
| Maintainers | gd920129 |
| Keywords | react-component, react-native, ios, image, loading |

## Links

- npm: https://www.npmjs.com/package/react-native-eximage
- Repository: https://github.com/guodong000/react-native-eximage
- Homepage: https://github.com/guodong000/react-native-eximage#readme
- Issues: https://github.com/guodong000/react-native-eximage/issues
- npm.io page: https://npm.io/package/react-native-eximage

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 0.1.6 (latest) — 2015-10-08
- 0.1.5 — 2015-09-09
- 0.1.4 — 2015-09-06
- 0.1.3 — 2015-08-25
- 0.1.2 — 2015-08-06
- 0.1.1 — 2015-08-06
- 0.1.0 — 2015-07-13

## README

react-native-eximage
=======
[![NPM](https://nodei.co/npm/react-native-eximage.png)](https://nodei.co/npm/react-native-eximage/)

A image module for React Native.

depend on [SDWebImage](https://github.com/rs/SDWebImage)。

## Feature

* Loading progress indicator for network image
* Auto scale assets image
* More coming soon...

## Getting started

If your project use CocoaPod

1. Like above
2. Like above
3. Add `pod 'SDWebImage', '~> 3.7.2'` to project `Podfile`
4. `pod install`
5. `RCTExImage.xcodeproj > Build Phase > Link Bindary With Libraries > +` Add `ImageIO.framework`.
6. `RCTExImage.xcodeproj > Build Settings > Header Search Paths` Look for `Header Search Paths` and make sure it contains `$(SRCROOT)/../react-native/React` and `$(SRCROOT)/../../Pods/Headers/Public` - mark as `recursive`.

Else

1. Drag & Drop the `{projectDir}/node_modules/react-native-eximage/RCTExImage.xcodeproj` into your project
2. Add `libRCTExImage.a` to your project's `Build Phases > Link Binary With Libraries`
3. `cd {projectDir}/node_modules/react-native-eximage`
4. `git clone https://github.com/rs/SDWebImage.git`
5. Drag & Drop the `SDWebImage.xcodeproj` file under `RCTExImage.xcodeproj`
6. Rebuild SDWebImage automagically if you ever decide to assimilate some changes in the future from git ... then goto `RCTExImage.xcodeproj > Build Phase > Target Dependencies > + > SDWebImage`.
7. `RCTExImage.xcodeproj > Build Phase > Link Bindary With Libraries > +` Add `libSDWebImage.a` and `ImageIO.framework`.
8. `RCTExImage.xcodeproj > Build Settings > Header Search Paths` Look for `Header Search Paths` and make sure it contains `$(SRCROOT)/../react-native/Rend `$(SRCROOT)/SDWebImage` - mark as `recursive`.


## Usage

```
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ScrollView,
} = React;

var Dimensions = require('Dimensions');
var SCREEN_WIDTH = Dimensions.get('window').width;

var ExImage = require('react-native-eximage');

var RCTExImageExample = React.createClass({

  getInitialState: function() {
    return {
      loadFailed: false,
    }
  },

  render: function() {
    var errorEle = null;
    if (this.state.loadFailed) {
      errorEle = (<Text>Reload</Text>);
    }
    return (
      <View style={styles.container}>
        <ScrollView>
          <ExImage
            source={{uri:'http://i.ytimg.com/vi/SQEbPn36m1c/maxresdefault.jpg'}}
            style={{width: SCREEN_WIDTH, height: SCREEN_WIDTH, alignItems:'center', justifyContent:'center'}}
            resizeMode='cover'
            onLoadStart={(event) => {
              this.setState({loadFailed: false});
              console.log('onLoadStart: ' + event);
            }}
            onLoadProgress={(event) => {
              console.log('onLoadProgress: ' + event);
            }}
            onLoadError={(event) => {
              this.setState({loadFailed: true})
              console.log('onLoadError: ' + event);
            }}
            onLoaded={(event) => {
              console.log('onLoaded: ' + event);
            }}
            >
            {errorEle}
          </ExImage>
          <ExImage source={{uri:'assets-library://asset/asset.JPG?id=A1844CD1-28A1-43EB-8894-B769BFABFF12&ext=JPG'}} style={{width: SCREEN_WIDTH, height: SCREEN_WIDTH}} />
        </ScrollView>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: '#FFFFFF',
  }
});

AppRegistry.registerComponent('RCTExImageExample', () => RCTExImageExample);
```

## Thanks

**thumbnail generate**: http://www.mindsea.com/2012/12/downscaling-huge-alassets-without-fear-of-sigkill/

**Olivier Poitrey (the author of SDWebImage)**: https://github.com/rs

## License

[MIT License](http://opensource.org/licenses/mit-license.html).

---
_Source: https://npm.io/package/react-native-eximage · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._