Aspect Ratio
Universal solution to the missing aspect ratio prop
Because the
aspectRatio style prop isn't available in react-native-web's StyleSheet API, we need to improvise a bit. Here is a View which accepts an aspectRatio style prop and calculates the ratio for you!import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
function AspectView(props) {
const [layout, setLayout] = React.useState(null);
const { aspectRatio = 1, ...inputStyle } =
StyleSheet.flatten(props.style) || {};
const style = [inputStyle, { aspectRatio }];
if (layout) {
const { width = 0, height = 0 } = layout;
if (width === 0) {
style.push({ width: height * aspectRatio, height });
} else {
style.push({ width, height: width * aspectRatio });
}
}
return (
<View
{...props}
style={style}
onLayout={({ nativeEvent: { layout } }) => setLayout(layout)}
/>
);
}
// ...
return <AspectView style={{ width: 48, aspectRatio: 0.75 }} />;
Last modified 3yr ago