CODEWITHSUNDEEP
cssreact-nativeflexboxcss-positionreact-native-stylesheet
Olivia
Olivia

Reputation: 2171

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

Upvotes: 0

Views: 888

Answers (2)

Ahmed Gaber
Ahmed Gaber

Reputation: 3994

you can put x icon under main view container as last item with position : 'absolute'

your code may be something like this see this code in expo snack


<View style={{flex : 1}}>

        <View style={{backgroundColor : '#ddd', height : 100}}>
            <View style={{backgroundColor : '#bbb', flex : 1, margin : 20}}>
                <View style={{backgroundColor : '#999', flex : 1, margin : 20}}>
                    <View style={{backgroundColor : '#666', flex : 1, margin : 20}}>

                    </View>
                </View>
            </View>
        </View>

        //put icon x here at last item in main container
        <View style={{
            position : 'absolute',
            top : 10, right : 10, height : 30,
            width : 30,
            backgroundColor : '#f00',
        }}>
            <Text style={{color : '#fff', alignSelf : "center", fontSize : 20}}>x</Text>
        </View>

    </View>

and this the result enter image description here

Upvotes: 0

David Grosh
David Grosh

Reputation: 188

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

Upvotes: 1

Related Questions