Тип элемента недействителен, ожидается, что строка реагирует на родной мобильный

Привет, у меня возникла ошибка с моим кодом, я уже пробовал некоторые решения, но все еще не работает, может ли кто-нибудь мне помочь? Благодарю вас

App.tsx

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { SafeAreaView, StyleSheet, View } from 'react-native';
import { ThemeProvider, Div, Text } from 'react-native-magnus';
import DashboardBody from './src/Component/Dashboard/DashboardBody';
import { Route } from './src/Routes/Route';


export default function App() {
  return (
    <ThemeProvider>
      <Route />
    </ThemeProvider>
  );
}

Route.js

import React from "react";
import { NavigationContainers } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { BodyBar } from "../Component/BottomNav/BodyBar";

const RouteStack = createStackNavigator();
export const Route = () => {
  return (
    <NavigationContainers>
      <RouteStack.Navigator>
        <RouteStack.Screen
          name = "Lobby"
          component = {BodyBar}
          options = {{ headerShown: false }}
        />
      </RouteStack.Navigator>
    </NavigationContainers>
  );
};

BodyBar.js

import React from "react";
import {
  Alert,
  Animated,
  StyleSheet,
  TouchableOpacity,
  View,
} from "react-native";
import { CurvedBottomBar } from "react-native-curved-bottom-bar";
import Ionicons from "react-native-vector-icons/Ionicons";
import {
  heightPercentageToDP as hp,
  widthPercentageToDP as wp,
} from "react-native-responsive-screen";
import DashboardBody from "../Dashboard/DashboardBody";
import User from "../Profile/User";

export const BodyBar = () => {
  const _renderIcon = (routeName: string, selectedTab: string) => {
    let icon = "";

    switch (routeName) {
      case "title1":
        icon = "home";
        break;
      case "title2":
        icon = "person";
        break;
    }

    return (
      <Ionicons
        name = {icon}
        size = {25}
        color = {routeName === selectedTab ? "#feae3b" : "gray"}
      />
    );
  };
  const renderTabBar = ({ routeName, selectedTab, navigate }: any) => {
    return (
      <TouchableOpacity
        onPress = {() => navigate(routeName)}
        style = {{
          flex: 1,
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        {_renderIcon(routeName, selectedTab)}
      </TouchableOpacity>
    );
  };

  return (
    <View style = {{ flex: 1 }}>
      <CurvedBottomBar.Navigator
        style = {styles.bottomBar}
        strokeWidth = {0.5}
        height = {hp(8)}
        circleWidth = {hp(8)}
        bgColor = "#78c040"
        initialRouteName = "title1"
        borderTopLeftRight
        swipeEnabled = {false}
        renderCircle = {({ selectedTab, navigate }) => (
          <Animated.View style = {styles.btnCircle}>
            <TouchableOpacity
              style = {{
                flex: 1,
                justifyContent: "center",
              }}
              onPress = {() => Alert.alert("Click Action")}
            >
              <Ionicons name = {"qr-code"} color = "gray" size = {hp(5)} />
            </TouchableOpacity>
          </Animated.View>
        )}
        tabBar = {renderTabBar}
      >
        <CurvedBottomBar.Screen
          name = "title1"
          position = "left"
          component = {DashboardBody}
        />
        <CurvedBottomBar.Screen
          name = "title2"
          component = {User}
          position = "right"
        />
      </CurvedBottomBar.Navigator>
    </View>
  );
};

export const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  button: {
    marginVertical: 5,
  },
  bottomBar: {},
  btnCircle: {
    width: wp(15),
    height: hp(8),
    borderRadius: hp(4),
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "white",
    padding: hp(1),
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 0.5,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,
    elevation: 1,
    bottom: 30,
  },
  imgCircle: {
    width: 30,
    height: 30,
    tintColor: "gray",
  },
  img: {
    width: 30,
    height: 30,
  },
});

DashboardBody.js

import React from "react";
import { Button, Div, Icon, Image, Text } from "react-native-magnus";
import HeaderLobby from "../Reuseable/HeaderLobby";
import {
  heightPercentageToDP as hp,
  widthPercentageToDP as wp,
} from "react-native-responsive-screen";

const SPACING = hp(1.5);

const DashboardBody = () => {
  return (
    <Div bg = "gray400" flex = {1}>
      <HeaderLobby headerText = {"Dashboard"} />
      <Div
        bg = "#78c040"
        h = {hp(17)}
        style = {{
          borderBottomLeftRadius: hp(15),
          borderBottomRightRadius: hp(15),
        }}
      >
        <Text textAlign = "center" color = "white" fontSize = {hp(3)}>
          Hai, Mike
        </Text>

        <Text
          textAlign = "center"
          mt = {SPACING}
          fontSize = {hp(2.5)}
          fontWeight = "bold"
          color = "white"
        >
          Produk Saya
        </Text>
        <Text
          textAlign = "center"
          mt = {SPACING}
          fontSize = {hp(4)}
          fontWeight = "bold"
          color = "white"
        >
          0
        </Text>
      </Div>

      <Button
        w = {wp(90)}
        h = {hp(15)}
        rounded = {hp(5)}
        ml = {hp(2.5)}
        mt = {SPACING}
        prefix = {
          <Icon
            name = "battery-charging"
            fontFamily = "Ionicons"
            fontSize = {hp(7)}
            color = "#feae3b"
            // h = {hp(10)}
            // w = {wp(13)}
            mr = {hp(2)}
          />
        }
        fontSize = {hp(4)}
        fontWeight = "bold"
        bg = "white"
      >
        <Div>
          <Text fontSize = {hp(3)} w = {wp(50)} fontWeight = "bold">
            Deskripsi Produk
          </Text>
          <Text w = {wp(50)}>
            Lihat informasi 
          </Text>
        </Div>
      </Button>
    </Div>
  );
};

export default DashboardBody;

User.js

import { View } from "react-native";
import React from "react";
import { Div, Text } from "react-native-magnus";
import HeaderBack from "../Reuseable/HeaderBack";

const User = () => {
  return (
    <Div>
      <HeaderBack HeaderText = {"Profile"} />
      <Text>Name</Text>
    </Div>
  );
};

export default User;

Но когда я не использую часть Route, код все еще может работать, как вы можете использовать DashboardBody и User.

Но при использовании Route idk почему ошибка кода