Getting Started with StyleSheet

In this blog we will see the overview of StyleSheet

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

} from "react-native"


function AppPro(): JSX.Element {

    const isDarkMode = useColorScheme() === 'dark'

        return(
            <View style={styles.container}>
                <Text style={isDarkMode ? styles.whiteText : styles.darkText}>
                    Hello World 
                </Text>
            </View>
        )
}


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

export default AppPro;

• we create styles using the StyleSheet.create() method where we pass JS object

• Inside the object we use key value pairs , for writing different styles

• After that we pass the styles as props to the components (in our case AppPro)

useColorScheme () is a react hook which provides and subscribes to color scheme updates from the Appearance module.

const isDarkMode = useColorScheme() === 'dark'

• if useColorScheme() returns dark then isDarkMode store true else false

Important points to note

function AppPro(): JSX.Element {}

• Helps us to enable TS features —> in simpler meaning, now the method will only return a JSX

<View style={styles.container}>
// Your Code
</View>

• Every component has props like style , inside that we are giving our style as styles.container

<View style={styles.container}>

<Text style={isDarkMode ? styles.whiteText : styles.darkText}>
        Hello World 
</Text>

</View>

• we are checking if isDarkMode is true , text color will be white else black