onLayout

Learn layout events with onLayout.

The onLayout event

onLayout fires when a component is laid out on the screen. It gives position, size and layout info; these are often used for custom drawing or measured layouts.

Example: <View onLayout={'{(event) => setWidth(event.nativeEvent.layout.width)}'}>. Here layout.width gives the View's width. You can store that in state and use it for further calculations.

onLayout fires only when layout changes; not on every render. That makes it ideal for catching rotation or window resize events.

Reading the layout object

The event from onLayout has a nativeEvent.layout field with four values: x, y, width, height.

x and y are the position of the component relative to its parent. width and height are the measured sizes. These can be stored in state and used later.

Example: a chart width can be taken from an inner View's onLayout and used in drawing math. This is a common pattern for responsive charts.

Exercise Store the width in state

Write an App component. Define width with useState(0). Give the <View> an onLayout handler that calls setWidth with event.nativeEvent.layout.width. Put <Text>{`{width}`}</Text> inside. Export the App function.

Show example solution

function App() {
  const [width, setWidth] = useState(0);
  return (
    <View onLayout={(event) => setWidth(event.nativeEvent.layout.width)}>
      <Text>{width}</Text>
    </View>
  );
}
export default App;

Test yourself

When does onLayout fire?
- When layout changes
- On every render
- Only when a button is pressed
- Only on first mount
Show answer

Only when a button is pressed — onLayout fires whenever layout changes.

Add onLayout

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

function App() {
  return (
    <View ____={(event) => console.log(event.nativeEvent.layout.width)}>
      <Text>Measure</Text>
    </View>
  );
}

Show answer

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

function App() {
  return (
    <View onLayout={(event) => console.log(event.nativeEvent.layout.width)}>
      <Text>Measure</Text>
    </View>
  );
}

Match the onLayout parts

onLayout

Listens to the layout event
nativeEvent.layout

Layout data
width

Horizontal size
height

Vertical size

Next lesson: Form events

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies