Styling a container overrides children's overflow

[ShaMan123]

Wrapping a <ViewOverflow> predecessor with <TouchableOpacity> or applying styles to it overrides the overflow.

First thing's first - Thanks for this module.

so...

• expected behavior: <ViewOverflow> predecessors will overflow properly, pressing will invoke opacity change on entire <View>
• actual behavior: <ViewOverflow> is being clipped, pressing invokes opacity change on entire <View>

Seems the case is a <ViewOverflow> predecessor which is an ancestor of the actual overflowed element. You can see in the images that styling the actual overflowed element doesn't produce the problem.

I'm new to RN, wanted to submit a PR but felt pretty clueless.

---

basic code:

class MenuIcon extends Component {
    render() {
        return (
            <View style={[styles.a]}>
                    <TouchableOpacity>
                        <Image
                            style={styles.menubarIcon}
                            source={this.props.icon}
                        />
                     </TouchableOpacity>
                     <IconIndicator {...this.props.indicator} />
             </View>
        );
    }
}

class BasicMenuBar extends Component {
    render() {
        return (
            <ViewOverflow {...this.props}>
                <MenuIcon icon={icons.notification} />
                <MenuIcon icon={icons.globe} indicator={{ value: 832155521, position: 'topLeft'}} />
                <MenuIcon icon={icons.home} />
                <MenuIcon icon={icons.insight} />
                <MenuIcon icon={icons.hamburgerMenu} />
            </ViewOverflow>
        );
    }
}

output:

---

Applying <TouchableOpacity> on <IconIndicator>:

class MenuIcon extends Component {
    render() {
        return (
            <View style={[styles.a]}>
                    <TouchableOpacity>
                        <Image
                            style={styles.menubarIcon}
                            source={this.props.icon}
                        />
                    
                        <IconIndicator {...this.props.indicator} />
/// changed          </TouchableOpacity>   
                </View>
        );
    }
}

output:

Styling:

Applying styles reproduces the problem. (I've test backgroundColor, opacity, border)
Looks like this is related. (It seems safe to guess that <TouchableOpacity> applies opacity)

class MenuIcon extends Component {
    render() {
        return (
            <View style={[styles.a, { backgroundColor: 'yellow' }]}>          /// changed
                    <TouchableOpacity>
                        <Image
                            style={styles.menubarIcon}
                            source={this.props.icon}
                        />
                    </TouchableOpacity>
                     <IconIndicator {...this.props.indicator} />

                </View>
        );
    }
}

output:

Applying style: { backgroundColor: 'yellow' }:

Applying style: { opacity: 0.8 }:

[ShaMan123]

#32 #31 might be related