Forcing onLayout on React Native view

Question

I have a React Native View containing a Text field, and I'm using the onLayout prop to do some positional calculations which rely on the data it provides.

<View onLayout={this.calculateDimensions}>
  <Text>{this.props.content}</Text>
</View>

This works well, but there is a scenario where the content prop updates to a different string with the same character size. This results in the layout not changing and onLayout not triggering.

These positional calculations must occur each time the content prop updates.

Note: I am aware there are numerous ways to make the component update. Updating is not the same as laying out and sadly does not trigger onLayout.

If all else fails, have you tried using `content` as `key` for `View`? An entirely new `View` component will be created every time `content` changes though, but it might be worth it depending on the use case. `` — Tholle, Aug 10 '18 at 12:06
@CAJE Have you managed to figure this out? I'm currently trying to get onLayout event fired on a specific moment using PanResponder. Let me know if you have any insights. Thanks! — Sebastijan Dumančić, Aug 30 '19 at 12:45
@SebastijanDumančić I'm afraid I don't have any insight beyond Tholle's hack. I had to resort to that. — cjhines, Sep 13 '19 at 09:44

score 15 · Accepted Answer · answered Apr 19 '20 at 06:45

15

You can have a unique key based on the content. whenever a key attribute of a component changes it is forcing a re-render.

answered Apr 19 '20 at 06:45

Tom Slutsky

684
6
11

1

This post must be accepted as an answer. Thank you Tom. – Velidan Jun 30 '21 at 14:02
My comment is a bit late but this is so helpful, thank you @Tom Slutsky – user2731717 Oct 19 '22 at 23:58

Jakub Kubista · Answer 2 · 2020-06-28T13:04:21.390

Method this.calculateDimensions needs to have some kind of indication, that it should be called again and fire re-render. I would recommend to use for its state or memo.

Let me show you an example with React Hooks. I'm setting for component onLayout, which using callback onComponentLayout. onComponentLayout has state componentHeight, which fire re-render whenever it's changed. So I'm able to change it dynamically if componentHeight is missing.

...
const onComponentLayout = useCallback(({nativeEvent: {layout}}) => {
   !componentHeight && setComponentHeight(layout.height);
}, [componentHeight, setComponentHeight]);
...

return (
...
    <Component
      onLayout={onComponentLayout}
    />
...
)

I think you misunderstood the question. – cjhines Apr 11 '23 at 06:58 — cjhines, Apr 11 '23 at 06:58

Forcing onLayout on React Native view

2 Answers2

Linked