JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 162
  • Score
    100M100P100Q70938F
  • License ISC

A React Native Image that keeps the source aspect ratio

Package Exports

  • @hashiprobr/react-native-aspect-image
  • @hashiprobr/react-native-aspect-image/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@hashiprobr/react-native-aspect-image) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>}
        />
    );
}