ExpoBeginner
জরুরি Core Components — View, Text, Pressable
প্রতিদিন ব্যবহার হওয়া React Native components — কাজ ও উদাহরণ।
5টি অংশবাংলা ভাষায়
| Component | কাজ |
|---|---|
| View | container; layout (div-এর বদলে) |
| Text | text rendering; nested text |
| TextInput | user input |
| Pressable | tap/click — feedback |
| ScrollView | scrollable container |
| FlatList | long list, optimized |
| Modal | overlay dialog |
| ActivityIndicator | loading spinner |
components/Button.tsxtsx
tsx
import { View, Text, Pressable, StyleSheet } from "react-native";
export default function Button({ label, onPress }) {
return (
<Pressable style={styles.btn} onPress={onPress}>
<Text style={styles.text}>{label}</Text>
</Pressable>
);
}
const styles = StyleSheet.create({
btn: { backgroundColor: "#2563eb", padding: 12, borderRadius: 8 },
text: { color: "#fff", fontWeight: "600" },
});Text-এ nested হলে inline formatting সহজ:
<Text>আজ <Text style={{ fontWeight: "bold" }}>৩</Text>টা টাস্ক বাকি</Text>Text ভুলে যাবেন না
string অবশ্যই Text-এর ভিতরে হতে হবে — View-এর ভিতরে সরাসরি text render হয় না।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।