onLayout

RN

Componentの描画後の幅や高さを取得する

例えば、親Componentの幅に基づいて子Componetのサイズを調整したい場合に便利

code:ts

import React, { useState } from 'react';

import { View, Text, LayoutChangeEvent } from 'react-native';

const MyComponent = () => {

const onLayout = (event: LayoutChangeEvent) => {

const { width } = event.nativeEvent.layout;

setWidth(width);

};

return (

<View onLayout={onLayout} style={{ flex: 1 }}>

<Text>Width: {width}</Text>

</View>

);

};