ওয়েব আর React Native

একই ইমপোর্ট

একটি প্যাকেজ ইনস্টল করে দুই প্ল্যাটফর্মেই তার রুট থেকে ইমপোর্ট করুন। React একমাত্র আবশ্যক peer নির্ভরতা; নেটিভ অ্যাপের জন্য React Native ঐচ্ছিক peer নির্ভরতা। কোনো প্ল্যাটফর্মেই provider, র‍্যাপার বা সেটআপ কল লাগে না।

// Web and React Native: the same import.
import { MotionNumber, MotionList } from '@kkwaenggwari/animated-chorus';

export function Score({ points, players }) {
  return (
    <>
      <MotionNumber value={points} />
      <MotionList items={players} renderItem={(player) => player.name} />
    </>
  );
}

গতি কীভাবে চলে

ওয়েবে কম্পোনেন্ট Web Animations API-তে চলে, স্প্রিং বিশ্লেষণাত্মকভাবে নমুনাকৃত, তাই কোনো অ্যানিমেশন লাইব্রেরি লোড করতে হয় না আর প্রতি ফ্রেমে React রেন্ডার নেই। React Native-এ কম্পোনেন্ট transform আর অস্বচ্ছতার জন্য নেটিভ driver-সহ Animated ব্যবহার করে, আর JS driver শুধু যেখানে লেআউট (প্রস্থ বা উচ্চতা) বদলায়।

React Native-এর বিশেষত্ব

API একই; ডিভাইসে এই পার্থক্যগুলো চোখে পড়বে।

• সংখ্যা আর স্ট্রিম হওয়া লেখা সত্যিকারের Text থাকে, তাই বাছাই, লাইন ভাঙা, numberOfLines আর অ্যাক্সেসিবিলিটি স্বাভাবিকভাবে চলে।
• MotionSheet আর MotionZoom স্বচ্ছ Modal-এ রেন্ডার হয়, আর ব্যাক বোতাম এগুলো বন্ধ করে।
• শিটের ভেতরের ScrollView নিজের জেসচার রাখে; শিট হ্যান্ডেল আর স্থির অংশ থেকে টানা হয়।
• MotionHold অ্যাক্সেসিবিলিটির activate অ্যাকশন থেকে সরাসরি নিশ্চিত করে।
• inline MotionSwap নতুন বিষয়বস্তু এক লাইনে মাপে; ভাঙা লেখার জন্য inline=— ব্যবহার করুন।

import { Text, View } from 'react-native';
import { MotionNumber, MotionSheet } from '@kkwaenggwari/animated-chorus';

export function Wallet({ balance, open, setOpen }) {
  return (
    <View>
      <MotionNumber
        value={balance}
        intl
        locale="en-US"
        format={{ style: 'currency', currency: 'USD' }}
      />
      <MotionSheet open={open} onOpenChange={setOpen} detents={[0.5, 0.9]}>
        <Text>Recent activity</Text>
      </MotionSheet>
    </View>
  );
}

আপনার লেআউট আপনারই থাকে

কম্পোনেন্ট প্ল্যাটফর্মের নিজস্ব লেআউট রাখে: লেখার মাপ, লাইন ভাঙা, ফন্ট স্কেলিং, প্যারেন্টের সীমা আর আপনার স্টাইল। গতি কখনো আপনার লেখায় অক্ষরের প্রস্থ, নির্দিষ্ট লেখার উচ্চতা বা ক্লিপিং মাস্ক চাপায় না।

কোথায় কী যাচাই হয়েছে

ওয়েবের আচরণ সত্যিকারের ব্রাউজারে যাচাই করা হয়। React Native-এর আচরণ ভাগ করা মডেল আর নকল রেন্ডারারের টেস্টে কভার হয়, তাই রিলিজের আগে লক্ষ্য ডিভাইসে জেসচার আর লেআউট যাচাই করুন।