Learn React Native Step by Step: A Practical Mobile Development Path

npx create-expo-app@latest study-sessions
cd study-sessions
npx expo start

import { SafeAreaView, StyleSheet, Text, View } from 'react-native';

export default function HomeScreen() {
  return (
    <SafeAreaView style={styles.screen}>
      <View style={styles.card}>
        <Text style={styles.title}>Study Sessions</Text>
        <Text>Plan one focused session at a time.</Text>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, padding: 20, backgroundColor: '#f6f8fc' },
  card: { padding: 18, borderRadius: 18, backgroundColor: '#fff' },
  title: { fontSize: 24, fontWeight: '800', marginBottom: 8 },
});

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: 12,
  },
  item: { flex: 1 },
});

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

export default function AddSessionForm({ onAdd }) {
  const [subject, setSubject] = useState('');

  function submit() {
    const clean = subject.trim();
    if (!clean) return;
    onAdd({ id: String(Date.now()), subject: clean, done: false });
    setSubject('');
  }

  return (
    <View style={styles.row}>
      <TextInput value={subject} onChangeText={setSubject} placeholder="Subject" style={styles.input} />
      <Pressable onPress={submit} style={styles.button}><Text style={styles.buttonText}>Add</Text></Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: 'row', gap: 8 },
  input: { flex: 1, borderWidth: 1, borderColor: '#dbe2ea', borderRadius: 12, padding: 12 },
  button: { backgroundColor: '#1268F3', borderRadius: 12, paddingHorizontal: 18, justifyContent: 'center' },
  buttonText: { color: '#fff', fontWeight: '800' },
});

import { FlatList, Pressable, Text, View } from 'react-native';

export default function SessionList({ sessions, onToggle }) {
  return (
    <FlatList
      data={sessions}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <Pressable onPress={() => onToggle(item.id)}>
          <View style={{ paddingVertical: 14 }}>
            <Text style={{ textDecorationLine: item.done ? 'line-through' : 'none' }}>
              {item.subject}
            </Text>
          </View>
        </Pressable>
      )}
      ListEmptyComponent={<Text>No sessions yet.</Text>}
    />
  );
}

const [sessions, setSessions] = useState([]);

function addSession(session) {
  setSessions((current) => [session, ...current]);
}

function toggleSession(id) {
  setSessions((current) => current.map((item) =>
    item.id === id ? { ...item, done: !item.done } : item
  ));
}

npx expo install @react-native-async-storage/async-storage

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

const KEY = 'study.sessions.v1';

async function loadSessions() {
  const raw = await AsyncStorage.getItem(KEY);
  return raw ? JSON.parse(raw) : [];
}

async function saveSessions(sessions) {
  await AsyncStorage.setItem(KEY, JSON.stringify(sessions));
}

import { router } from 'expo-router';

<Pressable onPress={() => router.push(`/session/${item.id}`)}>
  <Text>{item.subject}</Text>
</Pressable>

const [status, setStatus] = useState('idle');
const [quote, setQuote] = useState(null);

async function loadQuote() {
  try {
    setStatus('loading');
    const response = await fetch('https://example.com/api/quote');
    if (!response.ok) throw new Error('Request failed');
    setQuote(await response.json());
    setStatus('ready');
  } catch {
    setStatus('error');
  }
}