React-native: [Android] position: absolute shouldn't be cut off within a container with border

[linmic]

Description

If you have an element position: absolute with negative offset within a container with a border, it's going to be cut off, it's like overflow: hidden of the container is suddenly enabled by the border. But if you remove the border of the container, it works well. This issue only happens on Android.

3198 is a similar issue, and was reported with lots of discussions. However, I believe they are not exactly the same.

Reproduction

I've made an example on rnplay to reproduce the issue.

Solution

TBD

Additional Information

• React Native version: 0.33 (rnplay), 0.39 (the version I currently use)
• Platform: Android
• Operating System: MacOS

[jakallergis]

Same here. This is really frustrating

[kylanhurt]

Yeah this is currently happening with me even when the containing view has no border nor border-radius. This is definitely an issue because, for example, I want to show a circular icon on the top + middle area of my modal window. You can see it getting cut off below:

[renso3x]

Any solution for this issue? I have also experience it on android development.

[olliekav]

I can't find any way around this, guess we are just stuck with different styling for Android.

[jinqiupeter]

Same issue here, view with absolute positioning and negative top works on iOS but got cut off on Android

[scriptfans]

• 1 for this, how to fix it?

[brunolemos]

Facing this as well :(

Works great on iOS:

[aforty]

This is an issue for me as well.

[brunolemos]

@grabbou @bvaughn know any android dev that could help us with this bug?

[yelkamel]

If some have a solution for that it's should be great.
My java android skill is not good enough to make a PR :(

[Maximell]

+1 also having this issue.

[felipap]

Has been a big problem here too. Anybody found a fix?

[chrispcode]

Also having this problem with Android, neither overflow: hidden, nor zIndex: 1000 seem to fix the problem!

[mtin79]

Same here. Needs a fix!
What are you doing to positioning elements in relationship to another one?
E.g. for tooltips etc.?

[designorant]

Workaround

Use an extra container and fake the overflow with it:
https://snack.expo.io/@designorant/overflow-visible-android-workaround

import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";

export default class App extends Component {
  render() {
    return (
      <View style={styles.mainContainer}>

        <View style={styles.componentContainer}>
          <View style={[styles.element, styles.element1]} />
          <Text style={styles.text}>overflow: "visible"</Text>
        </View>

        <View style={styles.extraComponentContainer}>
          <View style={[styles.element, styles.element2]} />
          <View style={styles.componentContainer}>
            <Text style={styles.text}>extra container workaround</Text>
          </View>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "space-around"
  },
  componentContainer: {
    backgroundColor: "#d3d3d3",
    borderWidth: 1,
    borderColor: "grey",
    width: 200,
    height: 200,
    position: "relative",
    overflow: "visible" // doesn't do anything
  },
  extraComponentContainer: {
    // fakes overflow but requires more markup
    backgroundColor: "#ffff00",
    paddingTop: 20,
    paddingLeft: 20,
    paddingBottom: 20,
    paddingRight: 20,
    position: "relative"
  },
  element: {
    backgroundColor: "#ff0000",
    width: 40,
    height: 40
  },
  element1: {
    position: "absolute",
    top: -20,
    left: -20
  },
  element2: {
    position: "absolute",
    top: 0,
    left: 0,
    zIndex: 100,
    elevation: 100
  },
  text: {
    textAlign: "right",
    backgroundColor: "transparent"
  }
});

[mtin79]

@designorant Thanks Michal for your advice!
One question remains: Wouldn't the "extraComponentContainer" prevent clicks/actions/events to elements/components below it?

I know in css there is "pointer-events". When its set to "none" (e.g. pointer-events: none; ) The elements lets all events pass through to other elements below it.
Anything like that in react-native?

[brunolemos]

Yes, react native has the pointerEvents prop.

[stefanedberg]

I have this problem too in rn 0.51.0.

[kyoyadmoon]

after some testing, it also happened when container has these styles

• backgroundColor
• borderColor
• zIndex

[MorganIsBatman]

Thank you @brunolemos !! I had so much stupid layouts to try and get this to work. A full page 'container' View with pointerEvents='none' was all I needed!

[jpudysz]

@brunolemos thanks! We did manage to fix out issue with poitnerEvents="box-none" and position absolute

[rashtay]

      <View style={ styles.container }>
        <TouchableOpacity style={ styles.menuButton } onPress={ this.toggleMenu }>
          <Ionicons name="ios-menu" size={ 32 } color="#fff" />
        </TouchableOpacity>

        <Text style={ styles.headerTitle }>VERUS</Text>

        <View style={ styles.menu } pointerEvents="box-none">
          <Fade visible={ this.state.menuVisible }>
            { menuItems.map( this.renderMenuitem ) }
          </Fade>
        </View>
      </View>

import EStyleSheet from 'react-native-extended-stylesheet';

const styles = EStyleSheet.create( {
  $headerHeight: 50,

  container: {
    flexDirection: 'row',
    alignItems: 'center',
    // backgroundColor: '#0050aa',
    paddingHorizontal: 10,
    height: '$headerHeight',
    position: 'relative',
  },

  menuButton: {
    marginTop: 3,
  },

  headerTitle: {
    marginLeft: 10,
    color: '#fff',
    fontSize: 16,
    fontWeight: '700',
  },

  menu: {
    position: 'absolute',
    top: '$headerHeight',
    left: 10,
  },

  menuItem: {
    padding: 10,
    backgroundColor: '#0050aa',
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },

  menuItemName: {
    color: '#fff',
    fontWeight: '700',
  },
} );

export default styles;

I am still facing this issue. If I do not add backgroundColor to the container, then it works perfectly fine. It only happens on Android.

[ifours]

To overcome this issue you can render a absolute positioned view with your background color on Android. Following code will work on android :)

      <View style={{ flex: 1, backgroundColor: 'red' }}>
        <View style={{ height: 200, backgroundColor: 'green' }} />
        <View style={{ height: 200 }}>
          <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'yellow' }} />
          <View style={{ height: 50, width: 50, backgroundColor: 'aqua', position: 'absolute', top: -20 }} />
        </View>
      </View>

[jinxac]

I was working on an order summary page in which I need to show all orders made by user. Facing similar issue on android. Tried workaround @designorant suggested and it works fine.
Here is the sample code if it helps anyone :)
https://snack.expo.io/@harkiratsaluja/timeline

[rashtay]

Did anyone find a fix? This issue still exists. I am trying to create a hamburger menu (vertical dropdown) and the container with menu items gets clipped inside the header rendered by react-navigation. This only happens on Android.

[sibelius]

check if this helps https://medium.com/@sibelius/solving-view-overflow-in-android-reactnative-f961752a75cd

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[gianpaj]

the issue hasn't yet been fixed. @stale don't close the issue

[jianjiade]

I am still facing this issue.

[scottwio]

Still an issue 😭

[viewglassdesign]

And still an issue.

[Nagibaba]

I added a faker container: <View style={{position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, borderRadius: 4, backgroundColor: 'rgba(255,255,255, .15)', zIndex: 1 }} />. Don't use borderRadius, backgroundColor, zIndex in real container, but only in fake container.

<View style={s.realContainer } > <View style={{position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, borderRadius: 4, backgroundColor: 'rgba(255,255,255, .15)' }} /> <Image /> </View>

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[jsamr]

Still an issue for me.

[DenisDov]

@Nagibaba Thanks for this. I create snack with this approach https://snack.expo.io/@denisdov/android-overflow-fix

[vitorsilvalima]

Still an issue

[ysyfff]

still an issue

[dm-gh]

still an issue

[lucaswhitman]

Still an issue...

[pinchez254]

very simple pass a style prop of zIndex:1 to the view that is absolute to make it rise on top of the others

[Donhv]

@pinchez254 not work for me

[pinchez254]

try creating an extra container outside the one in absolute position and
give it a Zindex of -1

On Mon, Apr 15, 2019 at 2:17 PM LeeHoo [e-mail] wrote:

@pinchez254 https://github.com/pinchez254 not work for me

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/12534#issuecomment-483210401,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AlWEKm333hGU6ZKKJKajMIgoZJZcgyXqks5vhF-9gaJpZM4MJgAJ
.

[lylest]

THIS HAS WORKED FOR ME 100%

import React from 'react';
import { StyleSheet, View, Text, ScrollView, Image, SafeAreaView, StatusBar, TextInput, Dimensions} from 'react-native';

const WIDTH = Dimensions.get('window').width;
const HEIGHT = Dimensions.get('window').height;
export default class App extends React.Component {

render() {
  return (
    <ScrollView horizontal={false} showsVerticalScrollIndicator={false}>


        <View style={styles.container}>
        <View style={styles.recent}>
         <Text>Recent</Text>
        </View>

        </View>





    </ScrollView>
  );
}

}

const styles = StyleSheet.create({

container:{
   flex:1,
   width:WIDTH,
   height:HEIGHT,
   overflow:'visible',
   position:'relative',
},

recent:{
  width:'100%',
  height:30,
  position:'absolute',
  top:100,
  left:40,
  backgroundColor:'#eee',


},

});

[abhishekofficial]

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

export default class Practise extends Component{
render(){
let pic = {
uri: 'http://www.sclance.com/images/user/User_1176706.png'
};
return(

                <View style={{backgroundColor: '#fff', height: 100, width: 280, position: 'absolute', top: 160,}}>

                </View>
            </View>
            </ScrollView>
        );
}

}

[abhishekofficial]

This is the issue that i am facing plz check the code and screenshot too

[abhishekofficial]

problem is only when, wwhen we are using srolllview

[gazedash]

Still an issue

[xwchris]

anyone comes to save us~

[amorel]

For me the problem occurred with "Angular Material" on Tabs component, I put
"overflow: visible !important;" on all containers and I finally found it!

If I add these classes, it works!

.mat-tab-body-wrapper {
overflow: visible !important;
}

.mat-tab-body.mat-tab-body-active {
overflow: visible !important;
}

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[saadq]

I don't think this should be closed yet :|

[davimattos]

I fix it setting a elevation together the position.

elevation : 10, position: "absolute"

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[thinklinux]

I don't think this should be closed yet. Tho there is a workaround with the elevation property. Unless it is not a workaround but the correct way of doing it which is not documented good enough.

[davidecarpini]

I resolved using react-native Modal as wrapper:
https://reactnative.dev/docs/modal

[fabriziobertoglio1987]

can not find the reproducible example.

[fabriziobertoglio1987]

Here reproducible example

https://snack.expo.io/@fabrizio.bertoglio/overflow-visible-android-workaround

I quote Is it a bad practice to use negative margins in Android?

[ravirajn22]

I quote Is it a bad practice to use negative margins in Android?

Actually what android does should not matter because react-native does not use any android layout system, they use flexbox implemented using yoga.