React-native-flex-image NPM

react-native-flex-image

A flexible-width component for React Native using aspectRatio

Installation

Note: Only for React Native version >= 0.40.0

$ yarn add react-native-flex-image

-- or --

$ npm install react-native-flex-image --save

Usage

Use <FlexImage> to display an image sized to the full-width of its parent while maintaining the correct ratio, without explicitly defining the width and height. FlexImage supports local images (asset) and remote images (uri).

Also supports loading indicator for remote images.

Demo

Expo demo: https://exp.host/@kfox/react-native-flex-image

Simple Example

import FlexImage from 'react-native-flex-image';

function App() {
  return (
    <View style={{flex: 1}}>
      <FlexImage
        source={{
          uri: 'image source uri',
        }}
      />
    </View>
  );
}

Local Image

import FlexImage from 'react-native-flex-image';

function App() {
  return (
    <View style={{flex: 1}}>
      <FlexImage source={require('./assets/react-logo.png')} />
    </View>
  );
}

With onPress Event

import FlexImage from 'react-native-flex-image';

function App() {
  return (
    <View style={{flex: 1}}>
      <FlexImage
        source={{
          uri: 'https://example.com/path/to/my/image',
        }}
        onPress={() => {
          let {imageClickCount} = this.state;
          this.setState({
            imageClickCount: imageClickCount + 1,
          });
        }}
      />
    </View>
  );
}

Custom Loading Component

import FlexImage from 'react-native-flex-image';

function App() {
  return (
    <View style={{flex: 1}}>
      <FlexImage
        source={{
          uri: 'image source uri',
        }}
        loadingComponent={<ActivityIndicator size="large" color="red" />}
      />
    </View>
  );
}

Progressive Loading Component

import FlexImage from 'react-native-flex-image';

function App() {
  return (
    <View style={{flex: 1}}>
      <FlexImage
        source={{
          uri: 'image source uri',
        }}
        thumbnail={{uri: 'thumbnail image source uri'}}
        loadingMethod="progressive"
      />
    </View>
  );
}

Properties

Note: Other properties will be passed down to underlying image component.

Prop	Type	Description	Default
`source`	required	source of the image	None
`onPress`	optional	onPress event when user clicking the image	`null`
`style`	optional	custom style for the image container	`null`
`loadingComponent`	optional	custom loading indicator when render the image	`<ActivityIndicator animating={true} size="large" />`
`thumbnail`	optional	source of the thumbnail	None
`loadingMethod`	optional	enum for select loading method, using `indicator` or `progressive`	`indicator`
`errorComponent`	optional	custom error component when fail displaying the image	`null`