React Native Navigation-এ "A navigator can only contain Screen components" এরর সমাধান

React Navigation (v5+) ব্যবহার করার সময় একটি সাধারণ এরর: "A navigator can only contain 'Screen' components as its direct children"।

এরর-উৎপাদক কোড (App.js)

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Button, View, Alert, Text } from 'react-native';

const Stack = createStackNavigator();

const HomePage = ({ navigation }) => (
   navigation.navigate('About', { name: 'About Page' })} />
);

const AboutPage = () => You have reached inside About Page!;

const MyStack = () => {
  return (
    
      
        
        
      
    
  );
};

export default MyStack;

কারণ

1. ইন্ডেন্টেশন/স্পেসিং সমস্যা: JSX পার্সার কখনও কখনও হোয়াইটস্পেসকে টেক্সট নোড হিসেবে গণনা করে।
2. <Stack.Navigator>-এর ডায়রেক্ট চাইল্ড হিসেবে শুধু <Stack.Screen> থাকা উচিত। কোনো টেক্সট, কমেন্ট বা স্পেস থাকলে এরর হয়।

সমাধান: সঠিক ইন্ডেন্টেশন এবং স্পেস মুছে ফেলা

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Button, View, Alert, Text } from 'react-native';

const Stack = createStackNavigator();

const HomePage = ({ navigation }) => (
   navigation.navigate('About', { name: 'About Page' })} />
);

const AboutPage = () => You have reached inside About Page!;

const MyStack = () => {
  return (
    
      
        
        
      
    
  );
};

export default MyStack;

প্রো টিপস

• VS Code-এ Prettier + ESLint কনফিগার করুন।
• <Stack.Navigator> এবং </Stack.Navigator> ট্যাগগুলো আলাদা লাইনে রাখুন, মাঝপথে কোনো টেক্সট/স্পেস না থাকন দিন।
• React Navigation v6+ এ Screen কম্পোনেন্ট বাধ্যতামূলক।

সঠিক স্ট্রাকচার

<Stack.Navigator>
  <Stack.Screen name="Home" component={HomePage} />
  <Stack.Screen name="About" component={AboutPage} />
</Stack.Navigator>

মাঝপথে কোনো <View>, <Text> বা কমেন্ট থাকবে না।