Animations, Gestures & Reduced Motion

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

Animations, Gestures & Reduced Motion ရဲ့ React နဲ့ native platform behavior ကိုရှင်းပြနိုင်ရန်

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

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

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

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

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

Animations, Gestures & Reduced Motion 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 { useRef } from 'react';
import { Animated, Pressable, Text } from 'react-native';

export function SaveButton() {
  const scale = useRef(new Animated.Value(1)).current;
  const animate = (toValue: number) => Animated.spring(scale, {
    toValue, useNativeDriver: true,
  }).start();
  return <Animated.View style={{ transform: [{ scale }] }}>
    <Pressable onPressIn={() => animate(0.96)} onPressOut={() => animate(1)} accessibilityRole="button">
      <Text>Save</Text>
    </Pressable>
  </Animated.View>;
}

You should see

Layout မပြောင်းဘဲ smooth press feedback ရရှိမည်။

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

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

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

Animations — React Native