🚀 Day 1: My React Native Journey Begins!

Today I officially started my React Native adventure. In this post, I’m not just logging progress—I’ll walk you through what I set up and how the code works, so you can follow along step-by-step.

✅ What I Did Today

• Created a new Expo + TypeScript app:

npx create-expo-app my-first-app --template blank (TypeScript) 

• Initialized a GitHub repo for version control.
• Built a simple HomeScreen to display a welcome message.
• Committed and pushed all code.
• Captured a screenshot of the app running on Android.

🧱 Code Breakdown — My HomeScreen

import React from "react"; import { View, Text, StyleSheet } from "react-native"; export default function HomeScreen() { return ( <View style={styles.container}> <Text style={styles.title}>👋 Welcome to My First React Native App</Text>  <Text style={styles.subtitle}>Day 1 – Getting Started 🚀</Text>  </View>  ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center", alignItems: "center", padding: 20, backgroundColor: "#f8f8ff", }, title: { fontSize: 24, fontWeight: "bold", marginBottom: 12, }, subtitle: { fontSize: 16, color: "#666", }, }); 

🧠 What This Code Does

• StyleSheet.create keeps styles clean and performant.
• container uses Flexbox to center content.
• backgroundColor, fontSize, and margin make the UI visually appealing and readable.

📍 Connecting the Screen in App.tsx

import React from "react"; import { SafeAreaView } from "react-native"; import HomeScreen from "./src/screens/HomeScreen"; export default function App() { return ( <SafeAreaView style={{ flex: 1 }}> <HomeScreen /> </SafeAreaView>  ); } 

🧠 What This Code Does

• We wrap the app in SafeAreaView to handle notches and status bars.
• Flex styling ensures the screen fills the device display.

🧩 Putting It All Together

1. HomeScreen uses React Native components like View, Text.
2. StyleSheet defines reusable styles.
3. App.tsx renders the screen within a safe layout.

Once saved, simply run:

npx expo start 

You’ll see your welcome screen

🔗 Repo

Check out today’s code here:

👉 GitHub - My First React Native App

🖼 Screenshot

🔭 Day 2 Preview

Next up: adding React Navigation—we’ll create a second screen and navigate between them using a stack navigator. Be ready for multi-screen flow!

Follow me if you want to join me on this full React Native journey. I’ll be posting daily progress and projects!