Search code examples
cssreact-nativeflexboxcss-positionreact-native-stylesheet

React Native - Bring bottom image to top layer

I have a custom design that looks like this:

enter image description here

And I want to have the "X" mark layered on top of the three stripes. When I do position absolute it works but only works for the that it is contained in /it get's cut off. How can I layer the "X" on top of all of the 's below?

    <View style={styles.lightGrey}>
      <View style={styles.red}>
        <View style={styles.yellow}>
          <View style={styles.teal}>
            {!preview && (
              <TouchableOpacity
                onPress={async () => {
                  setIsLoadingDISLiked(true);
                  await onDisliked();
                  setIsLoadingDISLiked(false);
                }}
              >
                <MaterialCommunityIcons
                  name="close-thick"
                  size={34}
                  color="black"
                  style={{
                    marginLeft: Constant.width * 0.65,
                    marginTop: Constant.height * 0.01,
                    position: "absolute",
                  }}
                />
              </TouchableOpacity>
            )}
          </View>

styling

  red: {
    height: Constant.height * 0.08,
    width: Constant.width,
    backgroundColor: Colors.Brick,
  },
  yellow: {
    height: Constant.height * 0.08,
    width: Constant.width * 0.75,
    backgroundColor: Colors.LightMustardYellow,
  },
  teal: {
    height: Constant.height * 0.08,
    width: Constant.width * 0.7,
    backgroundColor: Colors.Teal,
  },
  lightGrey: {
    backgroundColor: Colors.LightLightGrey,
    paddingBottom: 100,
  },
Solution

  • you can use z-index ('zIndex' in react-native) to choose which element goes on what layer you want. css guide: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index