0

Consider 2 components:

  const A = ({ children }) => {
    return (
      <View
        style={{
          backgroundColor: "green",
          zIndex: 1,
          elevation: 1,
          width: 100,
          height: 100,
        }}
      >
        {children}
      </View>
    );
  };

  const B = () => {
    return (
      <View
        style={{
          bottom: 25,
          zIndex: 0,
          elevation: 0,
          backgroundColor: "blue",
          width: 100,
          height: 100,
        }}
      ></View>
    );
  };

When rendering these components with:

<A>
  <B />
</A>

The B component always renders over its parent component A. Is there a way to render the parent over its child? I understand in this MRE I could simply reverse A and B, but is there some way to set a component's zIndex/elevation to be relative to and less than its parent?

thedeg123
  • 408
  • 2
  • 5
  • 11
  • Not a great solution but applying absolute position with zindex on component B may get you what you want. Other than that, FlexBox may be another solution. – Aleksandar Zoric Jan 18 '22 at 18:23
  • @AleksandarZoric can you expand on what you mean by applying absolute position with zIndex? – thedeg123 Jan 18 '22 at 18:27
  • 1
    So on component A (not B, my mistake in previous comment), where you have all your style options, add the following: position: 'absolute' and zIndex: 1, as you already have. See ref: https://stackoverflow.com/questions/46209230/how-to-get-all-child-views-to-overlap-and-fill-their-parent-w-react-native-flex – Aleksandar Zoric Jan 18 '22 at 18:31

0 Answers0