How to fix two navigationcontainer conflict in react-native - react-native

Question

I want to use the ZegoCloudUIkit for voice call so after setting up my project, I imported the ZegoCloudUIKit and applied it to my existing code. I runned it and was getting errors.
first error message:
Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitly. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them.
so I commentted the navigationContainer Component that was nested to the ZegoUIkit component and I got a different error but the console did not through the error instead from the mobile app.
secode error message:
this is my App.tsx file
import React, {useEffect, useState} from 'react';
import {StyleSheet, View} from 'react-native';
import RNBootSplash from 'react-native-bootsplash';
import {toast, Toasts} from '#backpackapp-io/react-native-toast';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import axios from 'axios';
import AsyncStorage from '#react-native-async-storage/async-storage';
import {useDispatch, useSelector} from 'react-redux';
import {
ZegoUIKitPrebuiltCallWithInvitation,
ZegoInvitationType,
ONE_ON_ONE_VIDEO_CALL_CONFIG,
ONE_ON_ONE_VOICE_CALL_CONFIG,
GROUP_VIDEO_CALL_CONFIG,
GROUP_VOICE_CALL_CONFIG,
} from '#zegocloud/zego-uikit-prebuilt-call-rn';
import ZegoUIKitSignalingPlugin from '#zegocloud/zego-uikit-signaling-plugin-rn';
import {zego_appid, zego_appkey} from '#env';
import Main from './src/Main';
import {GestureHandlerRootView} from 'react-native-gesture-handler';
import {returnListOfProviders} from './src/redux/provider/listProvider';
import {provider} from './src/apis/endpoints';
import {RootState} from './src/types/redux.type';
import whichSignedUser from './src/utils/whichSignedUser';
import IClientData from './src/interfaces/clientData';
import IProviderData from './src/interfaces/providerData';
import {
NavigationContainer,
useNavigation,
useNavigationContainerRef,
} from '#react-navigation/native';
import {isSigned} from './src/redux/auth/isSigned';
import ActivityLoader from './src/components/widgets/ActivityLoader';
import {INavigateProps} from './src/interfaces';
import {Text} from 'react-native-animatable';
const App = () => {
const dispatch = useDispatch();
React.useEffect(() => {
const init = async () => {
try {
// const response = await listProvider();
const response = await axios.get(provider);
await AsyncStorage.setItem(
'list_provider',
JSON.stringify(response.data)
);
dispatch(
returnListOfProviders(
JSON.parse(await AsyncStorage.getItem('list_provider'))
)
);
} catch (error) {
if (error.message === 'Network Error') {
toast('Network error!');
} else if (error.response) {
// Request made but the server responded with an error
toast('Ouch... Something went wrong.');
} else if (error.request) {
// Request made but no response is received from the server.
toast('Request exception: We are sorry for this!');
} else {
// Error occured while setting up the request
toast('An error occured!');
}
}
};
init().finally(async () => {
await RNBootSplash.hide({fade: true});
});
}, [dispatch]);
return (
<SafeAreaProvider>
<GestureHandlerRootView style={styles.container}>
<ZegoUIKitPrebuiltCallWithInvitation
independent
appSign={zego_appkey}
appID={zego_appid}
userID={'ALi'}
callID={'ALi'}
userName={'ALi'}
// callID={userData?.id}
// userID={userData?.phone_number} // userID can be something like a phone number or the user id on your own user system.
// userName={`${userData?.first_name} ${userData?.last_name}`}
ringtoneConfig={{
incomingCallFileName: 'zego_incoming.mp3',
outgoingCallFileName: 'zego_outgoing.mp3',
}}
requireConfig={(data: any) => {
const config =
data.invitees.length > 1
? ZegoInvitationType.videoCall === data.type
? GROUP_VIDEO_CALL_CONFIG
: GROUP_VOICE_CALL_CONFIG
: ZegoInvitationType.videoCall === data.type
? ONE_ON_ONE_VIDEO_CALL_CONFIG
: ONE_ON_ONE_VOICE_CALL_CONFIG;
return config;
}}
// config={{
// ...ONE_ON_ONE_VOICE_CALL_CONFIG,
// onOnlySelfInRoom: () => {
// navigate('drawer_nav');
// },
// onHangUp: () => {
// navigate('drawer_nav');
// },
// }}
plugins={[ZegoUIKitSignalingPlugin]} // The signaling plug-in used for call invitation must be set here.
>
{/* <NavigationContainer> */}
<Main />
<Toasts />
{/* </NavigationContainer> */}
</ZegoUIKitPrebuiltCallWithInvitation>
</GestureHandlerRootView>
</SafeAreaProvider>
);
};
const styles = StyleSheet.create({
container: {flex: 1},
});
export default App;
while these are the project dependencies:
"dependencies": {
"#backpackapp-io/react-native-toast": "^0.8.0",
"#react-native-async-storage/async-storage": "^1.17.10",
"#react-native-community/picker": "^1.8.1",
"#react-navigation/bottom-tabs": "^6.3.3",
"#react-navigation/drawer": "^6.4.4",
"#react-navigation/material-top-tabs": "^6.2.4",
"#react-navigation/native": "^6.1.2",
"#react-navigation/native-stack": "^6.9.8",
"#reduxjs/toolkit": "^1.8.6",
"#types/react-native-vector-icons": "^6.4.12",
"#zegocloud/zego-uikit-prebuilt-call-rn": "^1.3.1",
"#zegocloud/zego-uikit-rn": "^1.4.10",
"#zegocloud/zego-uikit-signaling-plugin-rn": "^1.0.4",
"axios": "0.26.0",
"react": "18.1.0",
"react-delegate-component": "^1.0.0",
"react-native": "0.70.0",
"react-native-animatable": "^1.3.3",
"react-native-bootsplash": "^4.3.2",
"react-native-calendars": "^1.1289.0",
"react-native-date-picker": "^4.2.5",
"react-native-document-picker": "^8.1.1",
"react-native-dotenv": "^3.4.2",
"react-native-gesture-handler": "^2.8.0",
"react-native-image-picker": "^4.10.1",
"react-native-kommunicate-chat": "^1.6.8",
"react-native-pager-view": "^6.0.2",
"react-native-push-notification-popup": "^1.6.1",
"react-native-quick-base64": "^2.0.5",
"react-native-reanimated": "^2.10.0",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2",
"react-native-select-dropdown": "^2.0.4",
"react-native-sound": "^0.11.2",
"react-native-tab-view": "^3.1.1",
"react-native-vector-icons": "^9.2.0",
"react-redux": "^8.0.4",
"zego-express-engine-reactnative": "^3.1.2",
"zego-zim-react-native": "^2.5.0"
},
other info:
info Fetching system and libraries information...
System:
OS: Linux 5.15 Zorin OS 16.2
CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU # 2.50GHz
Memory: 3.45 GB / 7.53 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.18.1 - /tmp/yarn--1673425542734-0.8217341778464808/node
Yarn: 1.22.19 - /tmp/yarn--1673425542734-0.8217341778464808/yarn
npm: 9.2.0 - ~/.nvm/versions/node/v16.18.1/bin/npm
Watchman: Not Found
SDKs:
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Languages:
Java: 17.0.5 - /usr/bin/javac
npmPackages:
#react-native-community/cli: Not Found
react: 18.1.0 => 18.1.0
react-native: 0.70.0 => 0.70.0
npmGlobalPackages:
*react-native*: Not Found
I am trying to achieve something similar to the article here.
In my case I want to have a one_on_one_voice_call where a caller can invite the other person on a call.