CODEWITHSUNDEEP
react-native
NullPointer
NullPointer

Reputation: 1329

Is it possible to place one <View> over another in react-native?

I want to place one <View> over another in react-native. Here is my code:

<View style={styles.container}>
  <View style={styles.vimgProduct}>
    <Image style={styles.imgProduct} source={{uri: "http://www.unclesamsjamms.com/unclesamcash7.jpg"}}/>
  </View>
  <View style={styles.vNewView}>
  </View>
</View>`

and here is my style:

container: {
        flex: 1,
        paddingTop: 65,
        backgroundColor: "#F5FCFF"
},
vimgProduct: {
        paddingTop: 20,
        justifyContent: 'center',
        alignItems: 'center'
},
vNewView: {
        height: 400,
        paddingVertical: 20,
        marginTop: -60,
        marginHorizontal: 40,
        borderWidth: 3,
        borderColor: "black",
        borderRadius: 15,
        flexDirection: "row",
        justifyContent: 'center',
        alignItems: 'center'
}

My problem now is, that the View with Image is over my "vNewView" but the border of "vNewView" is in foreground and overlaps my "vimgProduct".

I want that my vNewView is in background and my vimgProduct is in foreground. How can I achieve this? In HTML/CSS it works with zIndex I think.

Could you help me please here? Would be great!

best regards, Alban

Upvotes: 2

Views: 14177

Answers (2)

Joseph Magara
Joseph Magara

Reputation: 66

I'd here is an overlay container that you can use to overlay your views:

import React, { ReactElement } from 'react';
import { View, StyleSheet, ViewStyle, StyleProp } from 'react-native';

type OverlayContainerProps = {
  back?: ReactElement;
  front?: ReactElement;
  backViewStyle?: StyleProp<ViewStyle>;
  frontViewStyle?: StyleProp<ViewStyle>;
  containerStyle?: StyleProp<ViewStyle>;
};

export default function OverlayContainer({
  back,
  front,
  backViewStyle,
  frontViewStyle,
  containerStyle,
}: OverlayContainerProps): ReactElement {
  return (
    <View style={[styles.container, containerStyle]}>
      <View style={backViewStyle}>{back}</View>
      <View style={[styles.front, frontViewStyle]}>{front}</View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignContent: 'center',
    alignItems: 'center',
    justifyContent: 'center',
  },
  front: {
    position: 'absolute',
    zIndex: 1,
  },
});

Credit where it is due, I got my inspiration for this approach from seeing this bit of code: https://github.com/onmyway133/blog/issues/254

Upvotes: 2

Nader Dabit
Nader Dabit

Reputation: 53691

To achieve similar functionality to z-index in react native, you simply need to place your components in the order that they are intended to be layered. For example, if you have three components in a row, then the second will overlay the first, and the third will overlay the second, so on and so forth.

For what you are doing, maybe try placing the vNewView as the first item in the view and use position: 'absolute' .

Upvotes: 4

Related Questions