How to get parent size in child view in response mode?

Question

I cannot figure out how I can send the size of the parent view to the child component. In renderPager (), I want to calculate some parameters that depend on the size of the parent view. I know that we can do this through onLayout (). the problem is that onLayout will be called only after creating all the children (I see it in the console log). How can i do this?

 onPageLayout = (event) => {
    const { width, height } = event.nativeEvent.layout;
    console.log("ON LAYOUT");
  }; 

render() {
    return (
      <View
        style={styles.root}
        onLayout={this.onPageLayout}
      >
        {this.renderPager()}
      </View>
    );
  }

renderPager = () => {
   // how can get root view size here
    return (
      <IndicatorViewPager
        ref={(ref) => (this.viewPager = ref)}
        scrollEnabled={!this.state.isDragging}
        onPageScroll={this.onPageScroll}
        style={styles.pageRoot}
      >
        {this.renderPages()}
      </IndicatorViewPager>
    );
  };

Thank you

Answer 1

, . , onLayout , , , . :

onPageLayout = (event) => {
    const { width, height } = event.nativeEvent.layout;
    console.log("ON LAYOUT");
    this.setState({width, height})
  }; 

render() {
    return (
      <View
        style={styles.root}
        onLayout={this.onPageLayout}
      >
        {this.renderPager(this.state.width, this.state.height)}
      </View>
    );
  }

renderPager = (width, height) => {
   // Do something if width or height are null
   // how can get root view size here
    return (
      <IndicatorViewPager
        ref={(ref) => (this.viewPager = ref)}
        scrollEnabled={!this.state.isDragging}
        onPageScroll={this.onPageScroll}
        style={styles.pageRoot}
      >
        {this.renderPages()}
      </IndicatorViewPager>
    );
  };

measure , , .