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.

---

All other props are the same as ImageBackground props which extends from Image props.

Author

Copyright © 2023 Nguyen Hoang Lam