My Journey with React Native and Expo

Ever wondered how to start building mobile apps without diving deep into native iOS or Android environments? That was me — until I discovered React Native with Expo.

Why I Chose React Native and Expo

As a developer who's spent most of my time in the web world, mobile always felt like a different beast. Native toolchains, emulators, SDKs — it all seemed overwhelming. But React Native offered a familiar environment with JavaScript and React. And when I stumbled upon Expo, it was a game-changer.

Expo simplified everything — no need for Xcode or Android Studio initially, and I could test apps instantly on my phone. I figured I'd document how I got started to help others who might be in the same boat.

Prerequisites

Here's what I had set up before diving in:

• Node.js (v18 or later)
• npm or yarn
• A smartphone with the Expo Go app installed

Step 1: Installing Expo CLI

To kick things off, I installed the Expo CLI globally using npm:

npm install -g expo-cli

Or with yarn:

yarn global add expo-cli

Step 2: Creating My First Expo App

I spun up my first project using the create-expo-app command:

npx create-expo-app MyFirstApp
cd MyFirstApp
npx expo start

Expo launched a local server and opened a QR code in the terminal. I scanned it with the Expo Go app on my phone — and just like that, I saw "Hello world" on my device.

Project Structure Overview

The initial project structure looked like this:

MyFirstApp/
├── App.js
├── assets/
├── node_modules/
├── package.json

• App.js: The entry point of the app
• assets/: Where images and fonts go
• package.json: Like any JavaScript project

Playing with Basic Components

Here's a quick example of what my App.js looked like when I started playing around:

{`import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World</Text>
      <Button title="Press me" onPress={() => alert('You pressed the button!')} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});`}

It felt like writing a React web app, but for mobile. View is like a div, Text is self-explanatory, and styles are done via StyleSheet.create() — super familiar.

Adding Theme Toggle with Context

I got curious and decided to implement a basic light/dark theme toggle using context.

Here's a stripped-down version of what I did:

{`import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [isDark, setIsDark] = useState(false);
  const toggleTheme = () => setIsDark(!isDark);

  return (
    <ThemeContext.Provider value={{ isDark, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export const useTheme = () => useContext(ThemeContext);`}

This made it easy to use a global toggle and wrap different components with theme-specific styles.

Testing on Real Devices

One of my favorite parts about using Expo is testing on actual hardware with the Expo Go app. Just scan the QR code and you're good to go — no need to fire up an emulator or install anything heavy.

Of course, once I wanted to dive into custom native modules, I could always "eject" from Expo — but for 80% of use cases, Expo was more than enough.

What's Next on My List?

After exploring the basics, here's what I'm planning to learn next:

• Navigation with React Navigation
• Accessing device features like Camera and Location using Expo APIs
• Animations and theming
• Deploying to app stores

Final Thoughts

Jumping into mobile development felt intimidating at first. But with Expo and React Native, I was up and running in minutes — all using technologies I already knew.

If you're a JavaScript/React developer like me, and you've been curious about building mobile apps, this is the perfect way to start.

---

Have questions or want to share your first Expo app?
Let me know in the comments — I'd love to hear about your journey too!

Happy Coding!