Practice: Component & Styling Challenges

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

ဒီ practice set က new concept မဟုတ်ဘဲ Basic chapter ရဲ့ core component/styling/flexbox knowledge ကို hands-on task ၄ ခုနဲ့ ပြန်ကျင့်သားရအောင် ဒီဇိုင်းလုပ်ထားပါတယ်။

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

Task ၄ ခု — (1) Profile card component ဆောက်ပါ (avatar image, name, bio, flexDirection: row ဖြင့် icon row), (2) ၃-column grid layout ဆောက်ပါ (flexWrap: 'wrap' သုံး), (3) Custom button component ဆောက်ပါ (props: label, onPress, color — reusable ဖြစ်အောင်), (4) Card list (FlatList) ဆောက်ပြီး alternate row color (index % 2 အသုံးပြု) ထည့်ပါ။

• Task 1-2: Profile card + grid layout (flexbox challenges)
• Task 3: Reusable Button component (props-driven styling)
• Task 4: FlatList alternate row color (index-based conditional style)

Code နမူနာ

// Task 3 starter — make this Button reusable via props
function CustomButton({ label, onPress, color = '#3b82f6' }) {
  return (
    <TouchableOpacity style={[styles.button, { backgroundColor: color }]} onPress={onPress}>
      <Text style={styles.buttonText}>{label}</Text>
    </TouchableOpacity>
  );
}
// Try: <CustomButton label="Save" color="#10b981" onPress={...} />

Task ၄ ခုစလုံးအတွက် component/screen ကို run-နိုင်တဲ့ code အနေနဲ့ ပြီးမြောက်မည်။