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

Question

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:

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

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!

Answer 1

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