How to use stylesheet in react native

Safeareaview

Safeareaview is use for basically ios devices to ensure safe view when Ios have notches

• It basically gives automatic padding to the container of safe view

• safeview only works for ios device

Stylesheet

• Import Stylesheet from react-native

• In this stylesheet define css for the component

• All the css properties same as written in web development

• In Mobile apps the main axis turns into cross axis and the cross axis turns into main axis as comapre to web

• becuse of above alignItems will work horiziontal (from left to right) and justifyContent (from top to bottom) will work vertical

•   import React, { JSX } from "react";
  
    import {
        SafeAreaView,
        View,
        Text,
        StyleSheet,
        useColorScheme
    } from "react-native";
  
    const AppPro = (): JSX.Element => {
        const isDarkMode = useColorScheme() === 'light';
  
       return(
        <SafeAreaView style={appProStyles?.safeContainer}>
            <View style={appProStyles?.container}>
                <Text style={isDarkMode ? appProStyles?.whiteText : appProStyles?.blackText}>Hello World!</Text>
                <Text style={appProStyles?.text}>Hello World!</Text>
            </View>
        </SafeAreaView>
       )
    }
  
    const appProStyles = StyleSheet.create({
        safeContainer: {
            flex: 1
        },
        container: {
            flex: 1,
            alignItems: 'center',
            backgroundColor: 'pink',
            justifyContent: 'center'
        },
        text: {
            fontSize: 50,
            fontWeight: 500
        },
        whiteText: {
            color: '#FFFFFF'
        },
        blackText: {
            color: '#000000'
        }
    })
  
    export default AppPro;