[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

[shettayyy]

      <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>

[salujaharkirat]

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

[shettayyy]

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.

[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]

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

[fabOnReact]

can not find the reproducible example.

[fabOnReact]

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.

[stale]

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.

[pinchez254]

Using StyleSheet from react-native and adding elevation key to the style props fixes the issue ..
const styles = StyleSheet.create({ elevatedBox :{ flex: 1, height: 100, width: 280, position: 'absolute', top: 160 elevation: 5 // <----- add this })

[raijal]

Try This Hope This works. Just play around the and Styles.

Your content goes here );

const styles = StyleSheet.create({
profileContainer: {
width: "100%",
flex: 1,
backgroundColor: "#092442",
alignItems: "center",
},
profile: {
position: "absolute",
zIndex: 1,
},
userProfileImg: {
height: 80,
width: 80,
borderRadius: 40,
},
profileContent: {
backgroundColor: "#fff",
flex: 1,
marginTop: "5%",
width: "100%",
borderRadius: 8,
},
});

[iway1]

@fabriziobertoglio1987 does this count as negative margins? it's absolute positioning, not margin?

And I can concur, negative margins will break your layouts across android devices in React Native, I've seen it happen in prod =)

[fabOnReact]

@fabriziobertoglio1987 does this count as negative margins? it's absolute positioning, not margin?

And I can concur, negative margins will break your layouts across android devices in React Native, I've seen it happen in prod =)

@iway1 as explained by @sibelius, It is caused by ViewGroup#setClipChildren

Read more at https://medium.com/entria/solving-view-overflow-in-android-reactnative-f961752a75cd

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[SimpleCreations]

Still an issue

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[SimpleCreations]

Still an issue

[fabOnReact]

#12534 (comment)

[fabOnReact]

This issue does NOT reproduce on the react-native main branch.

I quote the readme from https://github.com/entria/react-native-view-overflow (the package was published to fix this issue).

This library will be useful for React Native versions below v0.57. For v0.57 and beyond, React Native supports Android overflow natively from this commit.

CLICK TO OPEN TESTS RESULTS - BEFORE

Test case from issuecomment-347648303.

CLICK TO OPEN TESTS RESULTS - AFTER

cc @cortinico @lunaleaps

[Ha0ran2001]

When I use react-native-linear-gradient element as father container, set negative top value doesn't work but use View as relative element works fine.
change

<LinearGradient
                colors={['#F8E2C4', '#F3BB6C']}
                start={{x: 0, y: 0}}
                end={{x: 1, y: -1}}
                style={{
                  borderRadius: 20,
                  position: 'relative',
                  paddingVertical: 3.2 * vw,
                  paddingHorizontal: 5.33 * vw,
                }}
              >
                <Text
                  style={{
                    fontSize: 4 * vw,
                    lineHeight: 4 * vw,
                    fontWeight: '500',
                  }}
                >
                  {rightCardButtonText}
                </Text>
                {rightCardSubTitle && (
                  <LinearGradient
                    colors={['#F1933C', '#F13C3C']}
                    start={{x: -0.31, y: 0}}
                    end={{x: 0.95, y: 1}}
                    style={{
                      position: 'absolute',
                      top: '-28%',
                      right: 0,
                      borderTopLeftRadius: 16,
                      borderTopRightRadius: 20,
                      borderBottomRightRadius: 20,
                      borderBottomLeftRadius: 1,
                      paddingVertical: 0.53 * vw,
                      paddingHorizontal: 1.6 * vw,
                    }}
                  >
                    <Text
                      style={{
                        fontWeight: 'bold',
                        fontSize: 10,
                        fontFamily: 'ZHVipFont',
                      }}
                    >
                      {rightCardSubTitle}
                    </Text>
                  </LinearGradient>
                )}
              </LinearGradient>

to

<View
                style={{
                  borderRadius: 20,
                  position: 'relative',
                  paddingVertical: 3.2 * vw,
                  paddingHorizontal: 5.33 * vw,
                }}
              >
                <Text
                  style={{
                    fontSize: 4 * vw,
                    lineHeight: 4 * vw,
                    fontWeight: '500',
                  }}
                >
                  {rightCardButtonText}
                </Text>
                {rightCardSubTitle && (
                  <LinearGradient
                    colors={['#F1933C', '#F13C3C']}
                    start={{x: -0.31, y: 0}}
                    end={{x: 0.95, y: 1}}
                    style={{
                      position: 'absolute',
                      top: '-28%',
                      right: 0,
                      borderTopLeftRadius: 16,
                      borderTopRightRadius: 20,
                      borderBottomRightRadius: 20,
                      borderBottomLeftRadius: 1,
                      paddingVertical: 0.53 * vw,
                      paddingHorizontal: 1.6 * vw,
                    }}
                  >
                    <Text
                      style={{
                        fontWeight: 'bold',
                        fontSize: 10,
                        fontFamily: 'ZHVipFont',
                      }}
                    >
                      {rightCardSubTitle}
                    </Text>
                  </LinearGradient>
                )}
              </View>

it works.