5. React Native App: Dynamic Hello World with Color Scheme Detection

I recommend going through the previous blogs of this Series: maroofs.hashnode.dev/series/react-native-de..

Styling into Components :

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

function AppPro() : React.JSX.Element{
    const isDarkMode = useColorScheme() === 'dark'
    return(
        <View style={styles.container}>
            <Text style={[isDarkMode ? styles.whiteText : styles.BlackText]}>
            Hello
            </Text>
        </View>
    )
}

const styles = StyleSheet.create(
    {
        container : { 
            flex:1,
            alignItems:'center',
            justifyContent:'center'
        },
        whiteText:{
            color:'#FFFFFF',
        },
        BlackText:{
            color:'#000000',
        }
    }
)
export default AppPro

1. StyleSheet Component :

   • Just like in Web, we use Stylying to style the content and Website. Similarly in the World of React-Native, there is a component StyleSheet which helps in giving style to other components.

1. useColorScheme Component :

   • This component is used for setting up colour modes inside an Element.

   • For Example, changing View from Dark Mode to Light Mode etc.

2. function AppPro() : React.JSX.Element{}

   • React.JSX.Element this interface when combined with the AppPro() Component makes sure that the method should always return a JSX element.

   • For Exp, if we try to return something like this : return ("hello world") it's invalid because this string is not a JSX Element. Else we should return return( <View></View> ) , since it's a proper JSX element.

   • This explicit definition helps in writing less buggy code.

1. useColorScheme()==='dark'

   • useColorScheme() checks for the default colour scheme set inside the Device where the app is running.

   • Then its comparing it with 'dark' inorder to check if the scheme is dark.

2. <View style={styles.container}>

   • Here we are using the style from styles.container , where styles is an Object

   • const styles - The data type of the styles object is a plain JavaScript object. It is not a specific built-in data type but rather an object literal that holds multiple key-value pairs representing different styles.

   • The styles object contains multiple key-value pairs, where each key represents a style name, and the corresponding value represents the style properties associated with that name.

3. <Text style={[isDarkMode ? styles.whiteText : styles.BlackText]}>

   • Here for Text component we have used a condition, if isDarkMode is True then we select styles.whiteText or else styles.BlackTest .

4. Property alignItems :

   • Work on Main Axis and Secondary Axis.

   • alignItems of Web is different from react-native.

   • It shifts Components from Left to Right.

   • alignItems: stretch|center|flex-start|flex-end|baseline;

5. Property justifyContent :

   • Works in Top to button

   • justify-content: flex-start|flex-end|center|space-between| space-around|space-evenly;

[Although it's working only for Default Mode selected, We will see further how to do it in realtime.]