How to useExternal CSS in ReactJS

Q: How to useExternal CSS in ReactJS

In this approach, The app showcases a title (“Geeksforgeeks”), a paragraph describing the purpose (“Z Index Example”), and three styled cards. Each card has its own unique background color and text content. To control the stacking order of these cards, the z-Index property is applied, assigning the lowest value to the first card and increase it up to the highest value for the third card.

Approach 1: Using Inline Styling

The “z-index Property” heading is displayed on top of an image by utilizing its higher zIndex value (1), while the image is positioned bottom the heading with a lower zIndex value (-1).

Example: This example shows the use of the above-explained approach.

Javascript

import React from "react"; 
import { View, Text, Image,StyleSheet} from "react-native"; 
  
function App() { 
    return ( 
        <View style={styles.container}> 
            <Text style={styles.heading}> 
                The z-index Property 
            </Text> 
            <Image 
                source={{ 
                    uri:  
"https://media.w3wiki.org/wp-content/uploads/20230816223829/geeksgforgeeks-logo-1.png", 
                }} 
                style={styles.img} 
            /> 
        </View> 
    ); 
} 
  
const styles = StyleSheet.create({ 
    container: { 
        flex: 1, 
        justifyContent: "center", 
        alignItems: "center", 
        position: "absolute", 
        margin: 40, 
    }, 
    heading: { 
        zIndex: 1, // The heading will be shown on the top of the image 
        padding: 10, 
        borderRadius: 5, 
        fontSize: 20, 
        margin: 0, 
        color: "crimson", 
        fontWeight: "bold", 
    }, 
    img: { 
        position: "absolute", 
        left: 0, 
        top: 0, 
        // The image will be shown on the  
        // bottom of the heading 
        zIndex: -1,  
        width: 200, 
        height: 200, 
        borderRadius: 10, 
    }, 
}); 
  
export default App;

Output:

How to Use Z-Index In React Native ?

The CSS property called z-Index allows us to control the stacking order of elements on a web page. This concept works similarly in React Native, where the z-Index attribute enables the specification of element display order on the screen. By assigning a higher value to an element’s z-index, Elements with a higher z-index value appear on top of elements with lower values. In this article, we will see the working of the Z-index attribute in React Native.