get size of flex component

Question

I have two components, one Parent and one Child. The latter should have flex-layout, so that it occupies 75% of the vertical space:

const Parent: FC<PropsWithChildren> = (props) => {
    return (<View style={ styles.container }><MyChild /></View>)
}
const Child: FC<PropsWithChildren> = (props) => {
    return (<View style={ styles.childSytle }/>)
}

const styles = StyleSheet.create({
        container: {
        flex: 1,
        flexdirection: 'column'
    },
    childStyle: { flex: 9 }
});

What I want to achieve now, is get the actual size of my Child-component from within Parent. Is it possible to get the size of a component, when it's flex?

I already tried a forwardref for my Child to get a reference to Child. However I have no idea how to get its size.

Answer 1

function Parent() {
 return (
  //...
  <View>
   onLayout={event=>{
    const { width, height } = event.nativeEvent.layout
   }}
   <Child/>
  </View>
  //...
 )

You can retrieve the actual component width and height by implementing onLayout prop on the wrapper component of your child component. Then you should save them as either state or ref variable according use case.