Introduction

After diving into React Native, I’m thrilled to share my first app: HelloWorld! This simple application serves as an introduction to the fundamentals of React Native development. In this post, I’ll break down the app’s code and explain key concepts that every beginner should know.

Project Setup

To get started, I created a new Expo project using the following command:

npx create-expo-app@latest --template blank

This command sets up a new project with a basic template, allowing me to focus on building my app.

The App Code

Here’s the complete code for the HelloWorld app:

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { useColorScheme } from "react-native";

export default function App() {
  const isDarkMode = useColorScheme() === "dark"; 
  return (
    <View style={styles.container}>
      <Text style={isDarkMode ? styles.whiteText : styles.blackText}>
        Hello World!
      </Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  whiteText: {
    color: "#fff",
  },
  blackText: {
    color: "#000",
  },
});

Code Explanation

1. Imports

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { useColorScheme } from "react-native";

StatusBar: Manages the status bar in your app, allowing customization.
StyleSheet, Text, View: Essential components from React Native used for styling and layout.
useColorScheme: A hook that detects the current color scheme (light or dark) of the device.

2. App Component

export default function App() {
  const isDarkMode = useColorScheme() === "dark"; // Detects the color scheme
  return (
    <View style={styles.container}>
      <Text style={isDarkMode ? styles.whiteText : styles.blackText}>
        Hello World!
      </Text>
      <StatusBar style="auto" />
    </View>
  );
}

The App component is the main function that renders the application.
const isDarkMode = useColorScheme() === "dark";: This line checks if the device is in dark mode.
The View component acts as a container for other components, and its style is set to styles.container.
The Text component displays "Hello World!" and adjusts its color based on the detected color scheme.
StatusBar: Automatically adjusts the status bar appearance based on the app's theme.

3. Styles

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  whiteText: {
    color: "#fff",
  },
  blackText: {
    color: "#000",
  },
});

StyleSheet.create: A method used to create styles for the app.
container: Uses flex: 1 to fill the available space, and center its child components both horizontally and vertically.
whiteText and blackText: Define text colors for light and dark modes, respectively.

Running the App

To see your app in action, navigate to your project directory and run:

npm start

After running this command, a QR code will be displayed in your terminal. You have a few options to open your app:

Physical Device: Scan the QR code using the Expo Go app on your Android or iOS device.
Android Emulator: Press a in the terminal to open the app on an Android emulator.
iOS Simulator: Press i in the terminal to open the app on an iOS simulator (macOS only).

Follow the instructions to open your app on the desired device or emulator.

Conclusion

Building my first app with React Native was an exciting experience! The HelloWorld app taught me about component structure, styling, and responsiveness to device settings. I look forward to expanding this app with more features and exploring the vast capabilities of React Native.

Feel free to share your thoughts or ask any questions in the comments below!

Building My First React Native App: HelloWorld

Table of contents