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 Slot from '~/components/primitives/slot';import type { SlottableViewProps, ViewRef } from '~/components/primitives/types';import * as React from 'react';import { View, type ViewStyle } from 'react-native';
type RootProps = Omit<SlottableViewProps, 'style'> & { ratio?: number; style?: ViewStyle;};
type RootRef = ViewRef;
const Root = React.forwardRef<RootRef, RootProps>( ({ 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 };export type { RootProps, RootRef };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) |