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
andheight
props are specified, the image will use these values as its dimensions (auto scale is disabled).- Don't specify
width
orheight
attributes instyle
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.
ImageBackground
props which extends from Image
props.
All other props are the same as Author
Copyright © 2023 Nguyen Hoang Lam