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

But in Android its shows like this. The parent view clipping its child views. In my case parent is ScrollView

So my question is, are they fixed this issue or not? OR is there any proplem in my code ? please help

expo link :: https://snack.expo.io/ryZwe-mHN

Answer 1

I was also facing this issue, I was able to solve by providing transparent background color to the parent view.