Mini Project Part 3: Todo App — Polish & Navigation

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

Mini Project Part 3: Todo App — Polish & Navigation ကို ကြောက်စရာမလိုအောင် နားလည်မယ်
ကိုယ်တိုင် code ရေးပြီး Expo Go ပေါ်မှာ run ကြည့်တတ်မယ်
Real app project ထဲမှာ ဒီ concept ကို ချက်ချင်း အသုံးချတတ်မယ်

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

Empty state (todo list ဗလာဖြစ်နေရင် 'No todos yet!' ပြသခြင်း) က UX polish ရဲ့ အရေးကြီးတဲ့ အစိတ်အပိုင်းပါ — FlatList ရဲ့ ListEmptyComponent prop ကို သုံးပြီး implement လုပ်လို့ရပါတယ်။ Todo item ကို press လိုက်ရင် Detail screen ဆီ navigate (React Navigation, ယခင်အခန်းများကနေ) လုပ်ပြီး, todo ရဲ့ full detail/edit screen ကို ပြသနိုင်ပါတယ်။

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

FlatList ThemeListEmptyComponent={<Text>No todos yet! Add one above.</Text>} ကို ထည့်ရင် todos array ဗလာဖြစ်ချိန်မှာသာ ပေါ်ပါတယ်။ Todo item ရဲ့ onPress ကို navigation.navigate('TodoDetail', { todoId: item.id }) ဖြင့် ချိတ်ဆက်ပြီး, TodoDetail screen ထဲမှာ route.params.todoId ကနေ todo ကို ရှာပြသနိုင်ပါတယ် (React Navigation ရဲ့ route params pattern)။

ListEmptyComponent = todo list ဗလာချိန် message ပြသခြင်း
Todo item press → Detail screen navigate (route params ဖြင့်)
App တစ်ခုလုံး end-to-end (UI + state + persistence + navigation) ချိတ်ဆက်ပြီးမြောက်ခြင်း

Code နမူနာ

javascript

<FlatList
  data={todos}
  keyExtractor={(item) => item.id}
  ListEmptyComponent={
    <Text style={styles.emptyText}>No todos yet! Add one above 👆</Text>
  }
  renderItem={({ item }) => (
    <TouchableOpacity
      style={styles.todoItem}
      onPress={() => navigation.navigate('TodoDetail', { todoId: item.id })}
    >
      <Text>{item.done ? '☑️' : '☐'} {item.text}</Text>
      <TouchableOpacity onPress={() => deleteTodo(item.id)}>
        <Text>🗑️</Text>
      </TouchableOpacity>
    </TouchableOpacity>
  )}
/>

You should see

Todo list ဗလာနေချိန် empty state message ပေါ်ပြီး, todo item ကို press လိုက်ရင် Detail screen ဆီ navigate ဖြစ်သွားမည်။

၅ မိနစ် စမ်းကြည့်

Todo App ကို ListEmptyComponent + navigation (Detail screen) ဖြင့် ပြီးပြည့်စုံအောင် ဆက်လက် တည်ဆောက်ကြည့်ပါ — ဒါက tutorial တစ်ခုလုံးရဲ့ capstone project ဖြစ်ပါတယ်။

သတိလေးတစ်ချက်

Nested TouchableOpacity (item press + delete button press) ကို React Native မှာ event bubbling behavior က platform (iOS/Android) အလိုက် အနည်းငယ် ကွာနိုင်ပါတယ် — device နှစ်မျိုးလုံးမှာ test လုပ်ကြည့်ပါ။

ဒီနေရာမှာ လူအများမှားတတ်တယ်

Delete button ကို TouchableOpacity outer (item press) ထဲမှာ nest ထားပြီး, delete icon ကို press လိုက်တာနဲ့ item detail navigate ပါ ချက်ချင်း trigger ဖြစ်ခြင်း (event propagation issue — stopPropagation logic လိုအပ်နိုင်)
Empty state ကို implement မလုပ်ဘဲ blank screen အဖြစ် ထားခဲ့ခြင်း — user confuse ဖြစ်နိုင်

အခု ကိုယ်တိုင် စမ်းကြည့်

You'll know it worked when: Todo list ဗလာနေချိန် empty state message ပေါ်ပြီး, todo item ကို press လိုက်ရင် Detail screen ဆီ navigate ဖြစ်သွားမည်။