[RN] z-index 가 동작하지 않는 문제

 

리액트 네이티브에서는 position: relative / display: flex 가 기본으로 적용된다.

z-index 또는 position 를 지정하지 않으면, 기본적으로 가장 마지막에 작성한 컴포넌트가 최상위 인덱스를 가지는 특징이 있다.

 

우선순위 변경을 위해 아래와 같이 코드를 작성했을 때, z-index 가 동작하지 않는 경우가 발생함.

import React from "react";
import { View, StyleSheet } from "react-native";

export default function App() {
  return (
		<>
	    <View style={styles.box1} />
	    <View style={styles.box2} />
		</>
  );
}

const styles = StyleSheet.create({
  box1: {
    z-index: 2;
  },
  box2: {
    z-index: 1;
  },
});

 

이럴 경우, 스타일을 직접 인라인으로 작성해주면 정상 동작함.

import React from "react";
import { View } from "react-native";

export default function App() {
  return (
		<>
	    <View style={{ zIndex: 2 }} />
	    <View style={{ zIndex: 1 }} />
		</>
  );
}

 

[참고/인용]

• https://docs.expo.dev/ui-programming/z-index/