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.

`activeOpacity?: number`

The opacity of the component when touch is active. This prop will be ignored if onPress prop is undefined.

`onPress?: () => void`

The callback that invoked when the component is pressed.

`onSize?: (size: { width: number; height: number }) => void`

The callback that invoked when the component size is calculated.