📦 React Native View, Text ও Image Components (TypeScript সহ)

React Native অ্যাপ তৈরির সময় সবচেয়ে বেশি ব্যবহার হয় View, Text এবং Image কম্পোনেন্ট। এগুলোই হচ্ছে React Native UI এর মৌলিক বিল্ডিং ব্লক। এই কোর্সে আমরা TypeScript ব্যবহার করব, যাতে অ্যাপ আরও বেশি safe ও professional হয়।

🧱 View Component কী?

View হচ্ছে React Native এর সবচেয়ে বেসিক layout container। HTML এর <div> এর মতো কাজ করে। প্রায় সব UI layout View দিয়েই তৈরি হয়।

📁 File: ViewExample.tsx

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

const ViewExample = (): JSX.Element => {
  return (
    <View style={{ padding: 20, backgroundColor: '#ccfbf1' }}>
      <Text>এটি একটি View এর ভিতরের Text</Text>
    </View>
  );
};

export default ViewExample;

  

✍️ Text Component কী?

React Native এ সব লেখা অবশ্যই Text কম্পোনেন্টের ভিতরে থাকতে হবে। View এর ভিতরে সরাসরি string লেখা যাবে না।

📁 File: TextExample.tsx

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

const TextExample = (): JSX.Element => {
  return (
    <View>
      <Text style={{ fontSize: 20, color: 'teal' }}>
        React Native Text Component
      </Text>

      <Text style={{ fontWeight: 'bold' }}>
        এটি একটি Bold Text
      </Text>
    </View>
  );
};

export default TextExample;

  

🖼 Image Component কী?

Image কম্পোনেন্ট ব্যবহার করে লোকাল অথবা অনলাইন ছবি দেখানো হয়। Image ব্যবহার করার সময় width ও height অবশ্যই দিতে হয়।

📁 File: ImageExample.tsx

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

const ImageExample = (): JSX.Element => {
  return (
    <View>
      <Image
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        style={{ width: 100, height: 100 }}
      />
    </View>
  );
};

export default ImageExample;

  

🧠 সংক্ষেপে মনে রাখবেন

• View → Layout container (div এর মতো)
• Text → সব লেখা দেখানোর জন্য বাধ্যতামূলক
• Image → ছবি দেখাতে ব্যবহৃত হয়
• Image এ সবসময় width ও height দিতে হবে
• এই কোর্সে আমরা TypeScript ব্যবহার করছি