Home

Awesome

React Native WebImage

An image component for react-native with persistent disk and memory caching.

It is mostly a wrapper around native libraries which actually do the hard work. On Android it uses Glide, on iOS – SDWebImage.

:warning: The package is currently in alpha stage of development. If you find a bug or missing functionality, please feel free to report, but better fix or implement what you want and send a pull request to GitHub repository.

Installation

npm install --save react-native-web-image
react-native link
versionreact-native
0.0.5 - 0.0.6>=0.47.0
0.0.3 - 0.0.4>=0.40.0
<=0.0.2<0.40.0 (tested with 0.37.0)

Usage

import React, { Component } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import WebImage from 'react-native-web-image'

export default class App extends Component {
  render() {
    const imageUri = 'https://placeholdit.imgix.net/~text?txtsize=33&txt=200x150&w=200&h=150'
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Sample image</Text>
        <View style={styles.imgContainer}>
          <WebImage style={styles.img} source={{uri:imageUri}}/>
        </View>
      </View>
    )
  }
}

const white = '#FFFFFF'
const blue = 'rgb(0,0,255)'
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: white,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  img: {
    flex: 1,
  },
  imgContainer: {
    flexDirection: 'row',
    flex: 1,
    borderWidth: 1,
    borderColor: blue,
  }
})

API

WebImage element

<WebImage source={source}/>
AttributeTypeDescription
sourceObjectDescribes image source (mimics original Image element)
source.uriString(Required) URL of the image
resizeModeEnum{'cover','contain','stretch','center'}Determine resize mode for image. Default: 'contain'
onErrorFunctionWill be called on error

Resize modes

onError(event)

Author

Vladimir Timofeev

Contributors

License