Hallo i got some Error with my code i already try some of the solution but still not work, can someone help me? Thank You

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;

But when i don't use Route part the code can still work, like you can use DashboardBody and User.

But when use Route idk why the code error

CodePudding user response：

There's a typo mistake on the NavigationContainer component. Refactor code as below:

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


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