Layout issues in Android ?

Checkout the issues in Android. zIndex doesn’t work properly. One layout renders over the other in Android. IOS looks fine.

Android

IOS

IOS layout is proper. The android layout is cut. Also, applying zIndex didn’t work. The source code is provided here

[marcesengel]

Something like that

class Root extends React.Component {
  state = {
    top: 0
  }

  onLayout = ({ nativeEvent: { layout: { y } } }) => this.setState({ top: y })

  render() {
    return (
      <View>
        <Controls onLayout={this.onLayout} />
        <ControlsFirstLineOverlay style={{
          position: 'absolute',
          top: this.state.top
        }} />
      </View>
    )
  }
}

In your Controls component, you’ll also have to pass on the onLayout to your wrapping View. Also you’ll have to give it a paddingTop in order to not make the ControlsFirstLineOverly overlap your other buttons.

[marcesengel]

It does, but it always position relative to it’s first parent container, as he’ll always be position: relative - that’s the point 😕