Package Exports

@hashiprobr/react-native-aspect-view
@hashiprobr/react-native-aspect-view/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-view) 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-view

A React Native View that keeps a consistent aspect ratio in all platforms

React Native offers the aspectRatio layout prop to control the size of the undefined dimension of a component. However, React Native for Web implements this prop using the aspect-ratio CSS property, which is similar but not equivalent.

The AspectView React Component is a View that uses aspectRatio in Android and iOS but does not use aspect-ratio in the web. Instead, it uses onLayout to emulate the behavior.

Peer dependencies

{
    "react": "^17.0.1",
    "react-native": ">=0.64.3"
}

Install

With npm:

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

With yarn:

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

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-view',
            ],
        },
    }, argv);
    return config;
};

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

expo customize:web

Props

name	description
ratio	a number representing the width/height ratio (default `1`)

...View props

Example

Square view:

import { Text } from 'react-native';

import AspectView from '@hashiprobr/react-native-aspect-view';

export default function MyComponent() {
    return (
        <AspectView ratio={1}>
            <Text>hello world</Text>
        </AspectView>
    );
}

Width larger than height:

import { Text } from 'react-native';

import AspectView from '@hashiprobr/react-native-aspect-view';

export default function MyComponent() {
    return (
        <AspectView ratio={4/3}>
            <Text>hello world</Text>
        </AspectView>
    );
}

Height larger than width:

import { Text } from 'react-native';

import AspectView from '@hashiprobr/react-native-aspect-view';

export default function MyComponent() {
    return (
        <AspectView ratio={3/4}>
            <Text>hello world</Text>
        </AspectView>
    );
}