React native overflow visible not working in android even after updated to RN 0.58.4

Question

According to this RN release , now on we can use overflow:'visible' in android . But still React Native Android clipping its Children view. consider the below code

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, ScrollView,FlatList } from 'react-native';


type Props = {};
export default class App extends Component<Props> {
  objectValues = {
    one: 'one',
    two: 'one',
    three: 'one',
    four: 'one',
    five: 'one',
    six: 'one',
    seven: 'one',
    eight: 'one',
    nine: 'one',
    ten: 'one',
    eleven: 'one'
  }
  listData=[1,2,3,4,5,6,7]
  renderBody(item, index) {
    return (
      <View style={styles.innerContainer}>
        <Text>{item}</Text>
        <View style={styles.overflowStyle} />
      </View>
    )
  }
  _renderList() {

        return (
          <FlatList
            bounces={false}
            style={[{ overflow: "visible" },{ zIndex:1},{ marginLeft:50 }, { marginRight: 50 },{ backgroundColor:'black'}]}
            numColumns={3}
            data={this.listData}
            keyExtractor={(item, index) => index}
            renderItem={({ item, index }) => this.renderBody(item, index)}
          />
        );
      }
  render() {
    return (
      <View style={styles.container}>
        <ScrollView style={styles.scrollStyle}>
          <View>
            {Object.keys(this.objectValues)
              .map((key, index) => {
                console.log(key)
                return this._renderList()
              })}
          </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',

  },

  innerContainer: {
    marginRight: 10,
    overflow:'visible',
    marginTop:10,
    height: 100,
    flex:1,
    backgroundColor: 'green',
    zIndex:1
  },
  overflowStyle: {
    height: 20,
    width: 30,
    backgroundColor: 'red',
    position: 'absolute',
    left: -20,
    top: 50,
    zIndex:10

  },
  scrollStyle:{
    overflow:'visible',
    zIndex:1,
    backgroundColor:'white'
  }
});

the code runs in iOS like this

但是在Android中，它的显示就像这样。父视图裁剪其子视图。就我而言，父母是ScrollView

所以我的问题是，他们是否解决了这个问题？还是我的代码中有什么问题？请帮忙

博览会链接:: https://snack.expo.io/ryZwe-mHN

Answer 1

我也面临这个问题，我可以通过为父视图提供透明背景颜色来解决。