React Native Tutorial for Beginners: Complete All-in-One Guide

Key Points:

• Install Visual Studio Code as your code editor
• Install Git for version control (which also provides Git Bash terminal)
• Install Node.js (LTS version recommended)
• Install the Expo Go app on your mobile device for testing
• Optional: Install React Native Tools and Expo Tools extensions for VS Code

# Check installed versions
node -v
git --version
npm -v

# Create a new Expo project
npx create-expo-app@latest lesson1
cd lesson1
npx expo start
    

My Take:

The Expo framework dramatically simplifies React Native development for beginners. Instead of dealing with complex native build configurations, Expo lets you focus on writing JavaScript while providing tools that make testing on physical devices incredibly easy.

Key Points:

• Create a new project using npx create-expo-app myapp
• Add images to the assets directory for your application
• Build a home screen with an image background
• Create buttons and navigation links
• Customize app icons and splash screen

import { StyleSheet, View, Text, ImageBackground, Pressable } from 'react-native';
import { Link } from 'expo-router';

export default function App() {
  return (
    <View style={styles.container}>
      <ImageBackground 
        source={icedCoffeeImg} 
        resizeMode="cover" 
        style={styles.image}
      >
        <Text style={styles.title}>Coffee Shop</Text>
        
        <Link asChild href="/contact">
          <Pressable style={styles.button}>
            <Text style={styles.buttonText}>Contact Us</Text>
          </Pressable>
        </Link>
      </ImageBackground>
    </View>
  );
}
    

My Take:

React Native’s component-based structure will feel familiar if you’ve worked with React before, but there are important differences. Instead of HTML elements, you use native components like View (similar to div) and Text. Remember that styling works differently too, with StyleSheet objects instead of CSS files.

Key Points:

• Expo Router uses file-based routing (similar to Next.js)
• The _layout.jsx file configures navigation for the entire app
• Use Stack navigator for screen transitions
• Create tab-based navigation with the tabs directory
• Use parentheses around folder names to create route groups

// app/_layout.jsx
import { Stack } from 'expo-router';
import { SafeAreaProvider } from 'react-native-safe-area-context';

export default function RootLayout() {
  return (
    <SafeAreaProvider>
      <Stack screenOptions={{ headerShown: false }}>
        <Stack.Screen name="index" options={{ title: "Home" }} />
        <Stack.Screen 
          name="contact" 
          options={{ 
            headerShown: true, 
            title: "Contact Us" 
          }} 
        />
      </Stack>
    </SafeAreaProvider>
  );
}
    

My Take:

Expo Router makes navigation much more intuitive compared to traditional React Navigation. The file-based approach means you don’t have to maintain a separate navigation configuration – just add a new file and it becomes a route. This significantly reduces boilerplate code and keeps your project structure clean.

Key Points:

• Use FlatList for efficient rendering of scrollable lists
• FlatList only renders items currently visible on screen (better performance)
• Create custom item separators, headers, and footers
• Implement platform-specific container views (SafeAreaView vs ScrollView)
• Apply consistent styling across list items

import { FlatList, SafeAreaView, Platform, ScrollView } from 'react-native';

// Choose container based on platform
const Container = Platform.OS === 'web' ? ScrollView : SafeAreaView;

export default function MenuScreen() {
  return (
    <Container style={styles.container}>
      <FlatList
        data={menuItems}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.row}>
            <View style={styles.menuTextRow}>
              <Text style={styles.menuItemTitle}>{item.title}</Text>
              <Text style={styles.menuItemText}>{item.description}</Text>
            </View>
            <Image 
              source={menuImages[item.id - 1]} 
              style={styles.menuImage} 
            />
          </View>
        )}
        ItemSeparatorComponent={SeparatorComponent}
        showsVerticalScrollIndicator={false}
        contentContainerStyle={styles.contentContainer}
        ListEmptyComponent="No items available"
      />
    </Container>
  );
}
    

My Take:

The FlatList component is significantly more efficient than mapping through an array of items. When dealing with larger datasets, this performance difference becomes crucial. I also recommend setting a reasonable initialNumToRender value based on your screen size to optimize initial load time even further.

Key Points:

• Set up the project structure for a to-do application
• Implement state management with useState for the to-do list
• Create functions for adding, toggling, and removing to-dos
• Build a user interface with text input and pressable buttons
• Style the application with StyleSheet for a clean UI

import { useState } from 'react';
import { 
  StyleSheet, View, Text, TextInput, 
  Pressable, FlatList, SafeAreaView 
} from 'react-native';

export default function TodoApp() {
  const [todos, setTodos] = useState(data.sort((b, a) => b.id - a.id));
  const [text, setText] = useState('');
  
  const addTodo = () => {
    if (text.trim()) {
      const newId = todos.length > 0 ? todos[0].id + 1 : 1;
      setTodos([{ id: newId, title: text, completed: false }, ...todos]);
      setText('');
    }
  };
  
  const toggleTodo = (id) => {
    setTodos(todos.map(todo => todo.id === id 
      ? { ...todo, completed: !todo.completed } 
      : todo
    ));
  };
  
  const removeTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };
  
  // Render component UI...
}
    

My Take:

This CRUD pattern is fundamental across all types of applications. Once you understand how to implement these operations in React Native, you can adapt the pattern to more complex data models and APIs. I recommend focusing on getting the core functionality working before adding styling and other enhancements.

Key Points:

• Add custom Google Fonts with Expo Google Fonts
• Implement theme context for light/dark mode
• Create toggle functionality with Sun/Moon icons
• Use AsyncStorage to persist data between app sessions
• Add animations with React Native Reanimated

// Theme Context
import { createContext, useState } from 'react';
import { Appearance } from 'react-native';

export const ThemeContext = createContext({});

export const ThemeProvider = ({ children }) => {
  const [colorScheme, setColorScheme] = useState(
    Appearance.getColorScheme()
  );
  
  const theme = colorScheme === 'dark' ? colors.dark : colors.light;
  
  return (
    <ThemeContext.Provider value={{ colorScheme, setColorScheme, theme }}>
      {children}
    </ThemeContext.Provider>
  );
};

// Using AsyncStorage
import AsyncStorage from '@react-native-async-storage/async-storage';

// Load todos
useEffect(() => {
  const fetchData = async () => {
    try {
      const jsonValue = await AsyncStorage.getItem('todoApp');
      const storageTodos = jsonValue !== null 
        ? JSON.parse(jsonValue) 
        : null;
      
      if (storageTodos && storageTodos.length) {
        setTodos(storageTodos.sort((a, b) => b.id - a.id));
      } else {
        setTodos(data.sort((a, b) => b.id - a.id));
      }
    } catch (error) {
      console.error(error);
    }
  };
  
  fetchData();
}, []);

// Save todos when they change
useEffect(() => {
  const storeData = async () => {
    try {
      const jsonValue = JSON.stringify(todos);
      await AsyncStorage.setItem('todoApp', jsonValue);
    } catch (error) {
      console.error(error);
    }
  };
  
  storeData();
}, [todos]);
    

My Take:

AsyncStorage is perfect for simple persistence needs, but for more complex data, consider using a proper database like SQLite or Realm. The theme context pattern demonstrated here is also extremely valuable – it creates a clean way to manage application-wide state that can affect multiple components.

Key Points:

• Create dynamic routes with parameter placeholders (e.g., [id].jsx)
• Use useLocalSearchParams to access route parameters
• Implement navigation between screens with useRouter
• Build an edit screen for individual to-do items
• Update items and save changes back to storage

// app/todos/[id].jsx
import { useLocalSearchParams, useRouter } from 'expo-router';
import { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function EditScreen() {
  const { id } = useLocalSearchParams();
  const [todo, setTodo] = useState({});
  const router = useRouter();
  
  // Fetch the specific todo
  useEffect(() => {
    const fetchTodo = async (id) => {
      try {
        const jsonValue = await AsyncStorage.getItem('todoApp');
        const storageTodos = jsonValue !== null 
          ? JSON.parse(jsonValue) 
          : null;
          
        if (storageTodos && storageTodos.length) {
          const myTodo = storageTodos.find(
            todo => todo.id.toString() === id
          );
          setTodo(myTodo);
        }
      } catch (error) {
        console.error(error);
      }
    };
    
    fetchTodo(id);
  }, [id]);
  
  // Handle saving the edited todo
  const handleSave = async () => {
    try {
      // Save logic here
      router.push('/');
    } catch (error) {
      console.error(error);
    }
  };
  
  // Component UI...
}

// Navigate to dynamic route from list
const handlePress = (id) => {
  router.push(`/todos/${id}`);
};
    

My Take:

Dynamic routing is what transforms a simple app into a fully functional application. The pattern shown here with Expo Router is much cleaner than traditional navigation systems in React Native. By placing your route parameters in the filename, you create an implicit API that’s easy to understand and maintain.

Key Points:

• Understand the difference between Expo Go and development builds
• Set up Expo Application Services (EAS) for cloud builds
• Configure your project with eas.json
• Create and install a development build on your device
• Run your app with development client features

# Install EAS CLI globally
npm install -g eas-cli

# Log in to your Expo account
eas login

# Initialize EAS in your project
eas init

# Configure your build
eas build:configure

# Check dependencies
npx expo install --check

# Create a development build for Android
eas build --profile development --platform android

# Start the development server
npx expo start --tunnel
    

My Take:

While Expo Go is fantastic for rapid development, creating a development build is a crucial step toward production. It breaks you out of the sandbox limitations and lets you test native modules that aren’t available in Expo Go. The EAS cloud build service removes the need to set up local build environments, which is a huge time-saver for developers who don’t want to manage Android Studio or Xcode configurations.