Responsive, Edge-to-Edge & Accessible UI

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

Responsive, Edge-to-Edge & Accessible UI ရဲ့ React နဲ့ native platform behavior ကိုရှင်းပြနိုင်ရန်

Accessibility, failure နဲ့ lifecycle cases စမ်းနိုင်ရန်

Maintainable, testable နဲ့ performant React Native code ရေးနိုင်ရန်

Responsive, Edge-to-Edge & Accessible UI ကို screen တစ်ခုအတွက် style syntax အဖြစ်သာမမြင်ဘဲ Yoga constraints, pixel density, font scaling, safe areas, keyboard, touch target, accessibility tree နဲ့ iOS/Android behavior ကွာခြားမှုတို့ပါသော native UI contract အဖြစ်နားလည်ပါ။

ပိုပြီးနားလည်ထားရမယ့် အချက်

လက်တွေ့မှာ ဘယ်လိုအသုံးချမလဲ

Responsive, Edge-to-Edge & Accessible UI example ကို Android/iOS, small/large screens, font scaling, dark mode, keyboard, screen reader, slow/offline network, denied permissions နဲ့ app background/foreground cases ဖြင့်စမ်းပါ။ DevTools, tests နဲ့ release build ကိုလိုအပ်သလိုအသုံးပြုပါ။

ဒီသင်ခန်းစာပြီးရင်

Shared code နဲ့ platform boundary ကိုရှင်းပြနိုင်ခြင်း
Loading/error/accessibility ပါသော example ရေးနိုင်ခြင်း
Android/iOS behavior တစ်ခုကို test သို့ profiler ဖြင့်စစ်နိုင်ခြင်း

tsx

import { Text, useWindowDimensions, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

export function Dashboard() {
  const { width, fontScale } = useWindowDimensions();
  const columns = width >= 720 ? 2 : 1;
  return <SafeAreaView style={{ flex: 1 }}>
    <View accessibilityRole="summary" style={{ flexDirection: columns === 2 ? 'row' : 'column' }}>
      <Text maxFontSizeMultiplier={2}>Width {Math.round(width)} · font {fontScale}</Text>
    </View>
  </SafeAreaView>;
}

You should see

Layout က width, safe-area insets နဲ့ larger text အလိုက်ပြောင်းမည်။

ကိုယ်တိုင်စမ်းကြည့်ရန်

Platform/Lifecycle သတိပေးချက်

Simulator တစ်ခု၏ happy path မှန်ရုံဖြင့် real devices, release builds, permissions, accessibility, offline နဲ့ lifecycle paths အားလုံးမှန်ပြီဟုယူဆခြင်း။

Accessibility — React Native