react-native-flex-image

A flexible-width component for React Native using aspectRatio

Usage no npm install needed!

<script type="module">
  import reactNativeFlexImage from 'https://cdn.skypack.dev/react-native-flex-image';
</script>

README

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

License

MIT License. ©2017 - current, KodeFox, Inc.