Mini Project Part 1: Todo App — Setup & UI

Let's think about it this way for a moment

The Todo App's UI structure splits into four components: header (title), input row (TextInput + Add button), todo list (FlatList), and todo item (checkbox + text + delete button). Clearly separating each component's responsibility now makes it much easier to plug in the state logic in Part 2.

Let's connect it to a real scenario

Split the header, input row, and todo list into three sections using View, and use flexbox (flexDirection: row for the input row). At this stage just hardcode the state as a static array (placeholder data) — you'll wire up useState in Part 2. Use TouchableOpacity for the 'Add' button, the checkbox icon (☐/☑️), and the delete icon (🗑️).

Header, input row, todo list — split into three components
Lay out the input row with flexbox (flexDirection: row)
Get the UI structure working first with static placeholder data

Code Example

javascript

import { View, Text, TextInput, TouchableOpacity, FlatList, StyleSheet } from 'react-native';

const placeholderTodos = [
  { id: '1', text: 'React Native လေ့လာမယ်', done: false },
  { id: '2', text: 'Todo app ဆောက်မယ်', done: true },
];

export default function TodoApp() {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>My Todo App</Text>
      <View style={styles.inputRow}>
        <TextInput style={styles.input} placeholder="Add a todo..." />
        <TouchableOpacity style={styles.addButton}>
          <Text style={styles.addButtonText}>Add</Text>
        </TouchableOpacity>
      </View>
      <FlatList
        data={placeholderTodos}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={styles.todoItem}>
            <Text>{item.done ? '☑️' : '☐'} {item.text}</Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16 },
  header: { fontSize: 24, fontWeight: 'bold', marginBottom: 16 },
  inputRow: { flexDirection: 'row', marginBottom: 16 },
  input: { flex: 1, borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 10, marginRight: 8 },
  addButton: { backgroundColor: '#3b82f6', padding: 10, borderRadius: 8, justifyContent: 'center' },
  addButtonText: { color: 'white', fontWeight: '600' },
  todoItem: { padding: 12, borderBottomWidth: 1, borderColor: '#eee' },
});

You should see

You'll end up with a static UI screen containing a header, an input row, and two placeholder todo items.

5-Minute Try-It

Type out this UI structure yourself and run it on Expo Go — try swapping the two placeholder items for your own todo text.

A Quick Word of Caution

Pressing the Add button or a checkbox won't do anything yet at this stage (no event handlers wired up) — it becomes interactive once we add the state logic in Part 2.