React Native-এ "Text strings must be rendered within a <Text> component" এরর সমাধান

React Native ডেভেলপমেন্টের সময় একটি সাধারণ এরর: "Text strings must be rendered within a <Text> component"। এর কারণ এবং সমাধান নিচে দেওয়া হলো।

এরর-produceকারী কোড

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

export default class App extends React.Component {
  render() {
    return (
      
        
      
    );
  }
}

const styles = StyleSheet.create({
  container: { paddingTop: 50, paddingLeft: 50 },
  stretch: { width: 200, height: 200, resizeMode: 'stretch' }
});

কারণ দুটি

1. খারাপ ইন্ডেন্টেশন/স্পেসিং: JSX-এ টেক্সট নোড (whitespace, newline) যদি কম্পোনেন্টের বাইরে বা ভুল জায়গায় পড়ে, তবে React Native সেটিকে টেক্সট স্ট্রিং বলে মনে করে এবং এরর ফেলে।
2. কপি-পেস্ট থেকে আসা অদৃশ্য ক্যারেক্টার: অন্য জায়গা থেকে কোড কপি করলে লাইন এন্ডে স্পেস বা স্পেশাল ক্যারেক্টার চলে আসে।

সমাধান

• কোডকে সঠিকভাবে ইন্ডেন্ট করুন (Prettier/ESLint ব্যবহার করুন)।
• প্রতিটি কম্পোনেন্টের শেষে অপ্রয়োজনীয় স্পেস/নিউলাইন মুছুন।
• JSX-এ সরাসরি টেক্সট লিখলে অবশ্যই <Text> র‍্যাপ করুন।

সঠিক কোড

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

export default class App extends React.Component {
  render() {
    return (
      
        
      
    );
  }
}

const styles = StyleSheet.create({
  container: { paddingTop: 50, paddingLeft: 50 },
  stretch: { width: 200, height: 200, resizeMode: 'stretch' }
});

আউটপুট

ইমেজ সঠিকভাবে রেন্ডার হবে, কোনো এরর দেখা যাবে না।

প্রো টিপ

• VS Code-এ Prettier - Code formatter এক্সটেনশন ইনস্টল করে "Format on Save" অন করুন।
• ESLint রুল react-native/no-raw-text আন্ড করলে ডেভেলপমেন্ট টাইমেই সতর্কতা পাবেন।