React Native Skeleton: From Zero to 'Hello World' Without Losing Your Sanity

#reactnative #typescript #mobile

So you want to build a mobile app? Welcome to the club! Today we're setting up the bare bones of a React Native project — think of it as the skeleton that'll eventually grow into our Purchase Tracker beast. Don't worry, this skeleton is friendly and won't haunt your dreams (unlike some dependency conflicts I've seen).

Why React Native? Because Life's Too Short for Two Codebases 🤷‍♂️

Let's be real: nobody wants to build the same app twice. React Native lets you write once and deploy everywhere — iOS, Android, and even web if you're feeling fancy. It's like having a universal remote for mobile development, except it actually works.

Plus, if you already know React, you're halfway there. If you don't... well, you're about to learn! 🚀

What We're Installing (The Shopping List) 🛒

Here's what we need to get our skeleton walking:

The Essential Trinity

# The holy trinity of mobile development
npx create-expo-app mobile --template blank-typescript
cd mobile
npm install @react-navigation/native @react-navigation/bottom-tabs

The Supporting Cast

# Because navigation without screens is just... confusing
npm install react-native-screens react-native-safe-area-context

# Icons, because nobody likes text-only buttons
npm install @react-native-vector-icons/ionicons

# Camera stuff (for when we actually want to scan receipts)
npm install expo-image-picker

The Hello World That Actually Says Hello 👋

Forget the boring "Hello World" — let's make something that has personality:

// App.tsx - The main character of our story
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

export default function App() {
  const [greetingCount, setGreetingCount] = React.useState(0);

  const greetings = [
    "Hello, World! 👋",
    "Sup, Universe! 🌍",
    "Hey there, Developer! 👨‍💻",
    "Greetings, Human! 🤖",
    "What's up, Code Warrior! ⚔️"
  ];

  const handlePress = () => {
    setGreetingCount((count) => (count + 1) % greetings.length);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Purchase Tracker</Text>
      <Text style={styles.subtitle}>MVP in Progress... 🚧</Text>

      <TouchableOpacity style={styles.button} onPress={handlePress}>
        <Text style={styles.greeting}>
          {greetings[greetingCount]}
        </Text>
      </TouchableOpacity>

      <Text style={styles.hint}>
        Tap the greeting to cycle through messages!
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#2196F3',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    marginBottom: 40,
  },
  button: {
    backgroundColor: '#2196F3',
    paddingHorizontal: 30,
    paddingVertical: 15,
    borderRadius: 25,
    marginBottom: 20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
  greeting: {
    color: '#fff',
    fontSize: 18,
    fontWeight: '600',
  },
  hint: {
    fontSize: 14,
    color: '#999',
    textAlign: 'center',
  },
});

Project Structure: Organized Chaos 📁

Here's how to keep your code from becoming a digital dumpster fire:

mobile/
├── src/                    # Where the magic happens
│   ├── components/         # Reusable UI bits
│   ├── screens/           # Full-screen components
│   ├── navigation/        # How users get around
│   ├── services/          # API calls and data stuff
│   ├── types/            # TypeScript definitions
│   └── utils/            # Helper functions
├── assets/               # Images, fonts, etc.
├── App.tsx              # The main boss
└── package.json         # Dependency party list

TypeScript: Because You Like Your Bugs Found Early ✅

We're using TypeScript because catching bugs at compile time > finding them in production at 3 AM. Trust me on this one.

Create a simple type file to get started:

// src/types/index.ts
export interface AppProps {
  title: string;
  subtitle?: string;
}

export interface User {
  id: string;
  name: string;
  email: string;
}

// More types will live here as we grow

Running Your Masterpiece 🏃‍♂️

# Start the development server
npm start

# Open on Android (if you have an emulator)
npm run android

# Open on iOS (if you're on macOS)
npm run ios

# Open in web browser (because why not?)
npm run web