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

{
    "@hashiprobr/react-use-mount-and-update": "1.0.5",
    "react": "17.0.2",
    "react-native": "0.68.2"
}

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:

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
    const config = await createExpoWebpackConfigAsync({
        ...env,
        babel: {
            dangerouslyAddModulePathsToTranspile: [
                '@hashiprobr/react-native-aspect-image',
            ],
        },
    }, argv);
    return config;
};

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

import React from 'react';

import { Text } from 'react-native';

import AspectImage from '@hashiprobr/react-native-aspect-image';

export default function MyComponent() {
    return (
        <AspectImage
            style={{ flexGrow: 1 }}
            source={require('path/to/an/asset')}
            placeholder={<Text>loading</Text>}
        />
    );
}