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.

Install

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

Props

name	description
ratio	a number representing the width/height ratio

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