Question 33963 in React native Question posted in
The official React Native documentation can be found here.

Can you have a parent allow one absolutely positioned child to overflow and one to not overflow in React Native?

I have a parent element with 2 absolutely positioned children inside. I want one of the children’s overflow to be visible and the other’s overflow to be hidden. Like so:

What I want

Adding overflow: 'hidden to the parent hides the overflow of both the coin image and the ‘most popular’ sash but I want the coin image overflow to be visible.

container: {
    width: 155,
    height: 145,
    backgroundColor: Colours.white,
    borderRadius: 10,
    borderColor: Colours.borderTwo,
    borderWidth: 1,
    alignItems: 'center',
    justifyContent: 'flex-end',
    margin: 10,
    marginBottom: 25,
    paddingBottom: 10,
    overflow: 'hidden',
  },
  mostPopularSash: {
    position: 'absolute',
    top: 2,
    right: -30,
    backgroundColor: Colours.yellow,
    width: 100,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
    transform: [{rotate: '40deg'}],
  },
  imageContainer: {
    position: 'absolute',
    top: -22,
    width: 52,
    height: 52,
    borderRadius: 100,
    backgroundColor: Colours.white,
    borderColor: Colours.pageColour,
    borderWidth: 1,
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#171717',
    shadowOffset: {width: 0, height: 3},
    shadowOpacity: 0.2,
    shadowRadius: 2,
    elevation: 5,
  },
  image: {
    width: 40,
    height: 40,
  },

What happens with above css

I’ve tried adding zIndex: 2 to the image container and then zIndex: 1 to the parents parent but it didn’t work..

Can’t find much online to solve this problem as most queries related to ‘overflow’ are requesting the opposite effect.

Any help would be much appreciated!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Manage to get the desired effect by wrapping the container that uses overflow: 'hidden' inside an outer container and then moving the imageContainer out of the container and into the outer container giving it zIndex: 1 and keeping it absolutely positioned as well as giving it alignSelf: 'center'

    Like so:

    outerContainer: {
    width: '45%',
    margin: 10,
  },
  container: {
    height: 145,
    width: '100%',
    backgroundColor: Colours.white,
    borderRadius: 10,
    borderColor: Colours.borderTwo,
    borderWidth: 1,
    alignItems: 'center',
    justifyContent: 'flex-end',
    marginBottom: 25,
    paddingBottom: 10,
    overflow: 'hidden',
  },
  mostPopularSash: {
    position: 'absolute',
    top: 2,
    right: -30,
    backgroundColor: Colours.yellow,
    width: 100,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
    transform: [{rotate: '40deg'}],
  },
  imageContainer: {
    zIndex: 1,
    position: 'absolute',
    top: -22,
    alignSelf: 'center',
    width: 52,
    height: 52,
    borderRadius: 100,
    backgroundColor: Colours.white,
    borderColor: Colours.pageColour,
    borderWidth: 1,
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#171717',
    shadowOffset: {width: 0, height: 3},
    shadowOpacity: 0.2,
    shadowRadius: 2,
    elevation: 5,
  },
  image: {
    width: 40,
    height: 40,
  },

    <View style={styles.outerContainer}>
  <View style={styles.imageContainer}>
    <Image source={image} style={styles.image} />
  </View>
  <View style={styles.container}>
    {mostPopular && (
       <View style={styles.mostPopularSash}>
         <Text style={styles.mostPopularText}>Most</Text>
         <Text style={styles.mostPopularText}>Popular</Text>
       </View>
     )}
     <View style={styles.contentContainer}>
       <View style={styles.textContainer}>
         <Text style={styles.amountText}>£{amount}</Text>
         <Text style={styles.bonusGemsText}>+{gemsBonus} NGems Bonus</Text>
       </View>
       <Button
         text="Deposit"
         backgroundColor={Colours.primary}
         fontWeight="400"
         fontColour={Colours.white}
         fontSize={14}
         style={{marginBottom: 0, height: 35, marginTop: 10}}
         onPress={() => setModalVisible(true)}
       />
     </View>
  </View>
</View>

    Credit to this answer: https://stackoverflow.com/a/67140055/13740590


  2. 0

    In iOS you can play with the zIndex

    You can create a prop or a state that tells you which one is active.

    For instance,

    <View style={{zIndex:2}}>
{data.map(item => <CustomComp active={item.active} /> )}
</View>

    In customcomp, you can set the parent style such as

    style={{ props.active ? 3 : 1 }}

    Make sure you have assign the zIndex to the container view

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search