React-native: [Android]View positioned as absolute was clipped by parent view

[Otobelikethee]

Description

parts of child View which exceed border of parent View should be expected to be visible but not clipped. style parent View with overflow: visible cannot make it either. IOS is ok

Reproduction Steps

run sample code below

Sample Code

const { width, height } = Dimensions.get('window');

<View style={[{ backgroundColor: '#fff'}]}>
    <ScrollView
      decelerationRate={0.99}
      horizontal={true}
      alwaysBounceHorizontal={true}
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={{paddingLeft: 6, paddingRight: 32, justifyContent: 'center', alignItems: 'center' }}
    >
    {
      list.map((item, index) => {
        return (
          <View style={[{ height: 36, backgroundColor: '#fff', paddingHorizontal: 6, justifyContent: 'center'}]} >
            <Text>{item}</Text>
          </View>
        )
      })
    }
    </ScrollView>
    <View style={{ position: 'absolute', width: width, top: 36, height: 200, borderBottomWidth: 1, borderBottomColor: '#ccc' }}>
      <Text>apple</Text>
      <Text>banana</Text>
      <Text>tea</Text>
      <Text>tomato</Text>
      <Text>chicken</Text>
    </View>
</View>

Solution

Any solution is appreciated.

Additional Information

• React Native version: 0.45.1
• Platform: Android
• Development Operating System: macOS
• Build tools: Android Studio 2.3.3, Android SDK Tools 26.0.0

[Otobelikethee]

@hramos four days has gone, could you please give some help?

[hramos]

Opening an issue doesn't guarantee a fix, there's over a 1,000 open right now that have been open for longer, I'm afraid.

You may consider adding screenshots or a link to a Snack as this may make it easier for people to reproduce the issue. Whoever embarks on fixing it has to do this anyway, so it's respectful of their time to do this work ahead of time if you're interested in seeing it fixed.

[Otobelikethee]

@hramos Many thanks for your reply. I will complete this issue later.

[iljaiwjew]

The same bug with react-native 0.45.1/Android 6.0

[MatthieuLemoine]

overflow: visible doesn't work on Android see https://facebook.github.io/react-native/releases/0.26/docs/known-issues.html#the-overflow-style-property-defaults-to-hidden-and-cannot-be-changed-on-android.

If you really need this feature, you can try the Android Nodes implementation (still a work in progress) that brings support for overflow: visible : see https://github.com/facebook/react-native/tree/master/ReactAndroid/src/main/java/com/facebook/react/flat

[codedogfish]

@AaaChiuuu :D Any update of "Nodes" (the new mechanism for layout)? That seems will solve the 'overflow: visible' on Android. RoadMap show ETA: June.

[AaaChiuuu]

Nodes is on its way out. Having said that, we are in the very, very early stages of writing a (hopefully) simpler UI rendering layer.

[hramos]

@AaaChiuuu should we remove Nodes from the roadmap?

[AaaChiuuu]

Yes

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[SimplGy]

Root cause (or at least the issue with the most detail): https://github.com/facebook/react-native/issues/6802