import * as React from 'react' ; import { StyleSheet , View } from 'react-native' ; export default function AspectView ( { Component = View , ... 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 ( < Component { ... props } style = { style } onLayout = { ( { nativeEvent : { layout } } ) => setLayout ( layout ) } />); }