I found that the error occurred in the _layout.tsx section when creating an app in React Native. After wrapping the _layout.tsx part like this, the error was resolved. Thank you! When developing apps or websites, it’s often difficult to spot errors clearly, just like creating algorithms. I think I struggled with this for about three weeks.

// app/(tabs)/_layout.tsx
import React from 'react';
import { useColorScheme } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Colors } from '@/constants/Colors';
import { TabBarIcon } from 'C:\\app\\my-app\\components\\navigation\\TabBarIcon';
import NatureRecordForm from './NatureRecordForm';
import BiologyRecordForm from './BiologyRecordForm';
import RecordStorage from './RecordStorage';
import NatureDetails from './NatureDetails';
import BiologyDetails from './BiologyDetails';
import { NatureRecordProvider } from '@/RecordLogic/RecordContext';

export default function Layout() {
  const colorScheme = useColorScheme();

  const Tabs = createBottomTabNavigator();

  return (
    <NatureRecordProvider>
      <Tabs.Navigator
        screenOptions={{
          tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
          headerShown: false,
        }}>
        <Tabs.Screen
          name="NatureRecordForm"
          component={NatureRecordForm}
          options={{
            title: 'Nature Record Form',
            tabBarIcon: ({ color, focused }) => (
              <TabBarIcon name={focused ? 'leaf' : 'leaf-outline'} color={color} />
            ),
          }}
        />
        <Tabs.Screen
          name="BiologyRecordForm"
          component={BiologyRecordForm}
          options={{
            title: 'Biology Record Form',
            tabBarIcon: ({ color, focused }) => (
              <TabBarIcon name={focused ? 'leaf' : 'leaf-outline'} color={color} />
            ),
          }}
        />
        <Tabs.Screen
          name="RecordStorage"
          component={RecordStorage}
          options={{
            title: 'Record Storage',
            tabBarIcon: ({ color, focused }) => (
              <TabBarIcon name={focused ? 'leaf' : 'leaf-outline'} color={color} />
            ),
          }}
        />
        <Tabs.Screen
          name="NatureDetails"
          component={NatureDetails}
          options={{
            title: 'Nature Details',
            tabBarIcon: ({ color, focused }) => (
              <TabBarIcon name={focused ? 'leaf' : 'leaf-outline'} color={color} />
            ),
          }}
        />
        <Tabs.Screen
          name="BiologyDetails"
          component={BiologyDetails}
          options={{
            title: 'Biology Details',
            tabBarIcon: ({ color, focused }) => (
              <TabBarIcon name={focused ? 'leaf' : 'leaf-outline'} color={color} />
            ),
          }}
        />
      </Tabs.Navigator>
    </NatureRecordProvider>
  );
}