Aspect-Ratio Primitive
Presents content within a chosen aspect ratio.
Installation
Install the component via your command line.
npx expo install @rn-primitives/aspect-ratioCopy/paste the following code to ~/components/primitives/aspect-ratio.tsx
import * as React from 'react';import { View, type ViewStyle } from 'react-native';import * as Slot from '~/components/primitives/slot';import type { SlottableViewProps } from '~/components/primitives/types';
interface AspectRatioRootProps { ratio?: number; style?: ViewStyle;}
export type { AspectRatioRootProps };
const Root = React.forwardRef< React.ElementRef<typeof View>, Omit<SlottableViewProps, 'style'> & AspectRatioRootProps>(({ asChild, ratio = 1, style, ...props }, ref) => { const Component = asChild ? Slot.View : View; return <Component ref={ref} style={[style, { aspectRatio: ratio }]} {...props} />;});
Root.displayName = 'RootAspectRatio';
export { Root };Usage
import * as AspectRatio from '@rn-primitives/aspect-ratio';
function Example() { return ( <AspectRatio.Root ratio={16 / 9} /> );}Props
Root
Extends View props
| Prop | Type | Note |
|---|---|---|
| ratio | number | Defaults to 1 (optional) |