React Native-এর UI তৈরি হয় বিভিন্ন Components দিয়ে। এর মধ্যে সবচেয়ে গুরুত্বপূর্ণ ৩টি হলো:

• View – Layout container
• Text – Text display করার জন্য
• Image – ছবি দেখানোর জন্য

এই Components ভালোভাবে বুঝলে UI বানানো অনেক সহজ হয়ে যায়।

---

🟩 1) View Component (Layout Container)

View হলো React Native-এর সবচেয়ে গুরুত্বপূর্ণ container component। আপনি layouts, rows, columns, boxes, sections—সবকিছু View দিয়ে তৈরি করবেন।

✔ View এর কাজ:

• UI layout তৈরি করা
• Flexbox ব্যবহার করে screen সাজানো
• Div-এর মতো কাজ করে (HTML এর)
• Padding, margin, shadow ইত্যাদি styling করা

📌 Example:

import { View } from 'react-native';

export default function App() {
  return (
    <View style={{ padding: 20, backgroundColor: '#e0f7f7' }}>
      <View style={{ backgroundColor: '#008080', padding: 15 }}>
      </View>
    </View>
  );
}
    

---

📝 2) Text Component

React Native-এ সব লেখা বা টেক্সট দেখাতে Text Component ব্যবহার করা হয়। HTML-এর <p> বা <h1> এর মতো কাজ করে।

✔ Text এর কাজ:

• Heading / paragraph / title / labels দেখানো
• Font size, color, weight style করা
• Nested text লিখা

📌 Example:

import { Text, View } from 'react-native';

export default function App() {
  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 24, color: '#008080', fontWeight: 'bold' }}>
        React Native Text Component
      </Text>

      <Text style={{ marginTop: 10 }}>
        এটি React Native-এর টেক্সট দেখানোর component।
      </Text>
    </View>
  );
}
    

---

🖼️ 3) Image Component

App-এ ছবি দেখানোর জন্য Image Component ব্যবহৃত হয়। Image component automatially caching, scaling এবং accessibility handle করে।

✔ Image এর কাজ:

• Local or online images দেখানো
• Width/height control করা
• Resize modes (contain, cover, stretch)

📌 Example (Local Image):

import { Image, View } from 'react-native';

export default function App() {
  return (
    <View style={{ padding: 20 }}>
      <Image
        source={require('./assets/logo.png')}
        style={{ width: 120, height: 120 }}
      />
    </View>
  );
}
    

📌 Example (Online Image):

<Image 
  source={{ uri: 'https://example.com/photo.jpg' }}
  style={{ width: 200, height: 200, borderRadius: 100 }}
/>
    

---

📊 Components Comparison

Component	Purpose
View	UI Layout container
Text	Text or heading display
Image	Images display

---