Rn-auto-scale-image NPM

rn-auto-scale-image

This component is based on React Native's Image but can scale its width or height automatically to keep the image's aspect ratio. It is useful when we don't know the aspect ratio in advance but want to display the entire image and limit it only by width or height.

The loading and fallback components are also available to be displayed depending on the loading state.

Installation

Using Yarn

yarn add rn-auto-scale-image

Using NPM

npm install rn-auto-scale-image

Usage

Just specify width or height and the component will automatically calculate its other dimension.

import AutoScaleImage from 'rn-auto-scale-image';

// ...

<AutoScaleImage
    source={{
        uri: 'https://reactnative.dev/img/logo-og.png',
    }}
    width={Dimensions.get('screen').width}
    loadingComponent={<ActivityIndicator />}
/>

!IMPORTANT
If both width and height props are specified, the image will use these values as its dimensions (auto scale is disabled).
Don't specify width or height attributes in style props to avoid bugs.

Props

`width?: number`

The component's width that is used to calculate its height.

`height?: number`

The component's height that is used to calculate its width.

`isBackground?: boolean`

Set to true to use the component as an ImageBackground.

`loadingComponent?: ReactElement | undefined`

The component that will be displayed on load start.

`fallbackComponent?: ReactElement | undefined`

The component that will be displayed on load error.

NOTE: loadingComponent and fallbackComponent is only displayed after the scaled size is calculated. It's wrapped and centered inside a View with the size equals the scaled size.