react-native-aspect-image

A React Native Image that keeps the source aspect ratio

The AspectImage React Component is an Image that keeps the source aspect ratio if one of its dimensions is unset.

Please note that one of its dimensions must be set, either explicitly by width, height, or flexBasis, or implicitly by a positive flexGrow, an alignSelf: 'stretch' or an alignItens: 'stretch' in the parent, otherwise the image will be 0x0.

Peer dependencies

1{
2    "@hashiprobr/react-use-mount-and-update": "1.0.5",
3    "react": "17.0.2",
4    "react-native": "0.68.2"
5}

Install

With npm:

npm install @hashiprobr/react-native-aspect-image

With yarn:

yarn add @hashiprobr/react-native-aspect-image

If using Expo, add the module to webpack.config.js:

1const createExpoWebpackConfigAsync = require('@expo/webpack-config');
2
3module.exports = async function (env, argv) {
4    const config = await createExpoWebpackConfigAsync({
5        ...env,
6        babel: {
7            dangerouslyAddModulePathsToTranspile: [
8                '@hashiprobr/react-native-aspect-image',
9            ],
10        },
11    }, argv);
12    return config;
13};

If webpack.config.js does not exist, create it with:

expo customize:web

Props

name	description
placeholder	the component shown while the source aspect ratio is being calculated (default null)

...Image props

Example

1import React from 'react';
2
3import { Text } from 'react-native';
4
5import AspectImage from '@hashiprobr/react-native-aspect-image';
6
7export default function MyComponent() {
8    return (
9        <AspectImage
10            style={{ flexGrow: 1 }}
11            source={require('path/to/an/asset')}
12            placeholder={<Text>loading</Text>}
13        />
14    );
15}