@unpourtous/react-native-responsive-image

react-native-responsive-image

you can just set one of width or height, then another will responsive by image ratio.

Installation

$ npm install @unpourtous/react-native-responsive-image --save

Usage

screen shot:

source code:

import React from 'react'
import {
  ScrollView,
  View,
  Text,
  Image
} from 'react-native'
import ResponsiveImage from '@unpourtous/react-native-responsive-image'

export default class Demo extends React.Component {
  render () {
    return <ScrollView>
      <Text>image size: width 200, height 100</Text>
      <Text>box size: width 300, height 100</Text>
      <Text>Use ResponsiveImage: width=300*80%=240 => height=width/2=120</Text>
      <View style={{
        marginTop: 5,
        marginBottom: 20,
        width: 300,
        borderColor: 'lightgray',
        borderWidth: 10,
        justifyContent: 'center',
        alignItems: 'center'
      }}>
        <ResponsiveImage
          source={require('./test.png')}
          width={'80%'}
        />
      </View>
      <Text>Use Image: width=300*80%=240 => height=100</Text>
      <View style={{
        marginTop: 5,
        marginBottom: 20,
        width: 300,
        borderColor: 'lightgray',
        borderWidth: 10,
        justifyContent: 'center',
        alignItems: 'center'
      }}>
        <Image
          source={require('./test.png')}
          style={{
            width: '80%'
          }}
        />
      </View>
      <Text>Use ResponsiveImage: height=100*50%=50 => width=height*2=100</Text>
      <View style={{
        marginTop: 5,
        marginBottom: 20,
        width: 300,
        height: 100,
        borderColor: 'lightgray',
        borderWidth: 10,
        justifyContent: 'center',
        alignItems: 'center'
      }}>
        <ResponsiveImage
          source={require('./test.png')}
          height={'50%'}
        />
      </View>
      <Text>Use Image: height=100*50%=50 => width=200</Text>
      <View style={{
        marginTop: 5,
        marginBottom: 20,
        width: 300,
        height: 100,
        borderColor: 'lightgray',
        borderWidth: 10,
        justifyContent: 'center',
        alignItems: 'center'
      }}>
        <Image
          source={require('./test.png')}
          style={{
            height: '50%'
          }}
        />
      </View>
    </ScrollView>
  }
}

props

• height: set image's height, number or string
• width: set image's width, number or string
• style: for native View component
• other: to Image component, e.g. source