Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-native-aspect-ratio-image

Vincentelias51MIT2.0.0TypeScript support: included

A responsive image component that always takes up the full width of the parent container and sets height according to the aspect ratio

react-native, react-native fullwidth image, react-native full-width image, react-native image, full width, aspect ratio image, 100% image, ios, android

readme

react-native-aspect-ratio-image

A responsive image component that always takes up the full width of the parent container and sets height according to the aspect ratio

Installation

npm install react-native-aspect-ratio-image

Usage

import { AspectRatioImage } from 'react-native-aspect-ratio-image';

// Remote image
<AspectRatioImage source={{ uri: 'https://unsplash.it/400/400?image=1' }}/>

// Local image
<AspectRatioImage source={require('../assets/icon.png')} />

// You can use any props as you would on regular images:
<AspectRatioImage alt={"test-image"} source={require('../assets/icon.png')} />

Author

Made by Vincent Elias

License

MIT