🚀 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!