Aspect ratio controls the size of the undefined dimension of a node or child component. You can refer
for more details.
import { AspectRatio } from "native-base";
const Example = () => {
return <AspectRatio height={200} ratio={{
base: 4 / 3,
md: 16 / 9
}}>
<Box bg="red.400" />
</AspectRatio>;
};
const Example = () => {
return <AspectRatio ratio={{
base: 3 / 4,
md: 9 / 10
}} height={{
base: 200,
md: 400
}}>
<Image resizeMode="cover" source={{
uri: "https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
}} alt="Picture of a Flower" />
</AspectRatio>;
};
AspectRatio implements
,
,
,
,
,
,
,
,
,