How to use z-index in React Native?

Sometimes, we want to use z-index in React Native.

In this article, we’ll look at how to use z-index in React Native.

How to use z-index in React Native?

To use z-index in React Native, we can use the zIndex style.

For instance, we write:

import * as React from 'react';
import { Text, View } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View>
      <View
        style={{
          width: 100,
          height: 100,
          zIndex: 3,
          elevation: 3,
          backgroundColor: 'green',
          position: 'absolute',
        }}></View>
      <View
        style={{
          width: 100,
          height: 100,
          zIndex: 1,
          elevation: 3,
          backgroundColor: 'red',
          position: 'absolute',
          top: 5,
          left: 5,
        }}></View>
    </View>
  );
}

to add 2 Views that has different zIndex values.

The component with the higher zIndex value is laid over the component with the lower zIndex value.

So the green square goes on top of the red square.

Also, we need to set position to apply the zIndex value.

Conclusion

To use z-index in React Native, we can use the zIndex style.