CODEWITHSUNDEEP
androidreact-native
Heiner
Heiner

Reputation: 133

React Native onLayout nativeEvent.layout.y always returns 0

I'm creating a grid of Views. I'm doing it using pure flex. i.e. no absolute positioning. Actual screenshot:

Actual screenshot

I need to know the positions of each View in the grid and for that I'm using the onLayout prop. The problem is that the y value on evt.nativeEvent.layout is always zero, the rest of the values (x, height, width) are fine. I'm testing only in Android, using Genymotion and a physical Sony Xperia device (both with Android 6.0.1).

Any ideas of why the y value is 0?

React Native version: react-native: 0.40.0, react-native-cli: 1.2.0

Thanks for your help.

Upvotes: 8

Views: 5078

Answers (2)

stereodenis
stereodenis

Reputation: 3745

My version

const handleTabLayout = useCallback(
  (e: LayoutChangeEvent, index: number) => {
    const { width, x: nativeX } = e.nativeEvent.layout
    const x =
      Platform.OS === 'android' ? tabsWidth.reduce((sum, el, i) => (i < index ? sum + el.width : sum), 0) : nativeX
    if (tabsWidth[index]?.width !== width) {
      const newTabsWidth = tabsWidth.map((tw, twIndex) => (twIndex === index ? { ...tw, width, x } : tw))
      setTabsWidth(newTabsWidth)
    }
  },
  [tabsWidth]
)

Upvotes: 0

Heiner
Heiner

Reputation: 133

Ok.. I was suspecting that so I ended up saving the row's Y position and then assigning it to the "cells". Thanks for your help @HaitaoLi

Upvotes: 1

Related Questions