Modify your React Native App !

Now that you have successfully run the app, let's modify it.

  • Open App.tsx in your text editor of choice and edit some lines.(I recommend Using VS Code.)

  • Press the R key twice or select Reload from the Dev Menu (Ctrl + M) to see your changes!

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

function AppPro(): JSX.Element {
    const isDarkMode = useColorScheme() === 'dark';
    return (
        <SafeAreaView>
            <View style={styles.container}>
                <Text style={isDarkMode ? styles.WhiteText : styles.BlackText}>Hello World!!</Text>
            </View>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        display: 'flex',
        alignItems: 'center'
    },
    WhiteText: {
        color: '#FFFFFF'
    },
    BlackText: {
        color: '#000000'
    }
});

Write this in app.tsx and See The results !!

0
Subscribe to my newsletter

Read articles from 6D-Shrinidhi Rao directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

6D-Shrinidhi Rao
6D-Shrinidhi Rao