React-native: Touchable* not working in position:absolute View

[jp928]

Description

Touchable* would not be touchable in the sample code.

Reproduction Steps

Any position relative view covers the screen, the absolute view would not render above it no matter how many zIndex was set.

Sample Code

<View style={{flex: 1}}>
   <View style={{position: 'absolute', top: 80, zIndex: 50, backgroundColor: 'green',height: 60, width: 60, zIndex: 3}}>
      <TouchableOpacity><Text>Hello World4</Text></TouchableOpacity>
    </View>
    <ScrollView style={{flex: 1}}>
    </ScrollView>
</View>

Additional Information

• React Native version: 0.45.1
• Platform: Android
• Development Operating System: macOS
• Build tools: Android Studio 2.x ,Android 6.0

[duhseekoh]

Put the absolute view after the scrollview.

[vnglst]

Does anybody know why putting the absolute View after the Scrollview actually works? It seems so arbitrary. 😢

[Haraldson]

@vnglst Arbitrary maybe, but this is the way it’s been on the web for ages, so it’s nothing new. An element that comes after another in the DOM has higher implicit z-index.