not able to connect to the meeting url using React native

[mubashiralisiddiqui]

I am using all the latest versions of react native and other library but when I try to connect to the meeting URL I get error which is pointing to react navigation library I have created this repo in which it can be reproduced https://github.com/mubashiralisiddiqui/jitsi-sample

Similar Issue is open I have created few months ago https://github.com/jitsi/jitsi-meet-sdk-samples/issues/201

can someone let me know how can i fix this

[saghul]

Did you run the script to sync dependencies?

[mubashiralisiddiqui]

yes i did

[saghul]

Please share your package.json file.

[mubashiralisiddiqui]

https://github.com/mubashiralisiddiqui/jitsi-sample/blob/main/package.json @saghul here is package.json and you can also check my repo

{ "name": "AwesomeProject", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest", "update-deps": "node node_modules/@jitsi/react-native-sdk/update_dependencies.js" }, "dependencies": { "@amplitude/react-native": "2.7.0", "@giphy/react-native-sdk": "2.3.0", "@jitsi/react-native-sdk": "^1.0.3", "@react-native-async-storage/async-storage": "1.19.3", "@react-native-community/clipboard": "1.5.1", "@react-native-community/netinfo": "9.4.1", "@react-native-community/slider": "4.4.3", "@react-native-google-signin/google-signin": "10.0.1", "@react-navigation/native": "^6.1.9", "@react-navigation/native-stack": "^6.9.17", "react": "18.2.0", "react-native": "0.73.2", "react-native-background-timer": "2.4.1", "react-native-calendar-events": "2.2.0", "react-native-default-preference": "1.4.4", "react-native-device-info": "10.9.0", "react-native-gesture-handler": "2.9.0", "react-native-get-random-values": "1.9.0", "react-native-immersive-mode": "2.0.1", "react-native-keep-awake": "4.0.0", "react-native-orientation-locker": "1.6.0", "react-native-pager-view": "6.2.0", "react-native-paper": "5.10.3", "react-native-performance": "5.0.0", "react-native-safe-area-context": "4.7.1", "react-native-screens": "3.24.0", "react-native-sound": "0.11.2", "react-native-splash-screen": "3.3.0", "react-native-svg": "13.13.0", "react-native-video": "6.0.0-alpha.7", "react-native-watch-connectivity": "1.1.0", "react-native-webrtc": "111.0.6", "react-native-webview": "13.6.3" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/babel-preset": "0.73.19", "@react-native/eslint-config": "0.73.2", "@react-native/metro-config": "0.73.3", "@react-native/typescript-config": "0.73.1", "@types/react": "^18.2.6", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.6.3", "eslint": "^8.19.0", "jest": "^29.6.3", "prettier": "2.8.8", "react-test-renderer": "18.2.0", "typescript": "5.0.4" }, "engines": { "node": ">=18" }, "overrides": { "@xmldom/xmldom": "0.8.7" } }

[saghul]

Your deps are out of sync. Look at what we have regarding navigation:

    "@react-navigation/bottom-tabs": "6.5.8",
    "@react-navigation/elements": "1.3.18",
    "@react-navigation/material-top-tabs": "6.6.3",
    "@react-navigation/native": "6.1.7",
    "@react-navigation/stack": "6.3.17",

[mubashiralisiddiqui]

runing update deps command didn't add the packages however I have manually added the dependencies which you mentions but still gettting same error when I try to connect with room url it ask permission and then got error

on both android and ios here is my updated package.json

{ "name": "AwesomeProject", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest", "update-deps": "node node_modules/@jitsi/react-native-sdk/update_dependencies.js" }, "dependencies": { "@amplitude/react-native": "2.7.0", "@giphy/react-native-sdk": "2.3.0", "@jitsi/react-native-sdk": "^1.0.3", "@react-native-async-storage/async-storage": "1.19.3", "@react-native-community/clipboard": "1.5.1", "@react-native-community/netinfo": "9.4.1", "@react-native-community/slider": "4.4.3", "@react-native-google-signin/google-signin": "10.0.1", "@react-navigation/native-stack": "^6.9.17", "@react-navigation/bottom-tabs": "6.5.8", "@react-navigation/elements": "1.3.18", "@react-navigation/material-top-tabs": "6.6.3", "@react-navigation/native": "6.1.7", "@react-navigation/stack": "6.3.17", "react": "18.2.0", "react-native": "0.73.2", "react-native-background-timer": "2.4.1", "react-native-calendar-events": "2.2.0", "react-native-default-preference": "1.4.4", "react-native-device-info": "10.9.0", "react-native-gesture-handler": "2.9.0", "react-native-get-random-values": "1.9.0", "react-native-immersive-mode": "2.0.1", "react-native-keep-awake": "4.0.0", "react-native-orientation-locker": "1.6.0", "react-native-pager-view": "6.2.0", "react-native-paper": "5.10.3", "react-native-performance": "5.0.0", "react-native-safe-area-context": "4.7.1", "react-native-screens": "3.24.0", "react-native-sound": "0.11.2", "react-native-splash-screen": "3.3.0", "react-native-svg": "13.13.0", "react-native-video": "6.0.0-alpha.7", "react-native-watch-connectivity": "1.1.0", "react-native-webrtc": "111.0.6", "react-native-webview": "13.6.3" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/babel-preset": "0.73.19", "@react-native/eslint-config": "0.73.2", "@react-native/metro-config": "0.73.3", "@react-native/typescript-config": "0.73.1", "@types/react": "^18.2.6", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.6.3", "eslint": "^8.19.0", "jest": "^29.6.3", "prettier": "2.8.8", "react-test-renderer": "18.2.0", "typescript": "5.0.4" }, "engines": { "node": ">=18" }, "overrides": { "@xmldom/xmldom": "0.8.7" } }

[saghul]

Have you run the script mentioned here? https://github.com/jitsi/jitsi-meet/tree/master/react-native-sdk#installation

Here is how the result should look like, roughly: https://github.com/jitsi/jitsi-meet-sdk-samples/blob/master/react-native/package.json

[saghul]

Can you try to create the project using RN 0.72? We haven't updated to RN 0.73 and there might be adjustments necessary.

[mubashiralisiddiqui]

@saghul Thank you for your response I haven't created a new project with version RN 0.72, what I did is I just copied packages.json content from the example project which is using the react-native": "0.72.3 " and try to run the app then I got errors with react-native-webview so I upgraded webview version to fix that error after that I got the same error when I try to connec to the room url for me I think issue is related to configuration maybe with metro.config or some other config I also tried to run the project with the example project file of metro.config but with that configurtation I wasn't able to connect to metro server can you please spend some time and try to fix that issue can you check how we can make jitsi compaitable with the current metro.config

this is the latest metro.config

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

/**

• Metro configuration
• https://facebook.github.io/metro/docs/configuration
• @type {import('metro-config').MetroConfig} */ const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), config); looking forward for your response Thanks

[saghul]

I'm at a loss here. Does the sample app run for you, unchanged?

[mubashiralisiddiqui]

I'm at a loss here. Does the sample app run for you, unchanged?

yes that is working but I also try to use all same versions in my project which you have used in sample app but thats not working in my project thats why I am saying something wrong with config can you please use the configuration which I have in my repo may be there is a small fix required I am not able to identified the issue

[mubashiralisiddiqui]

do you have any expected time frame when it will support latest react native and other versions that's not a good thing that its only working in specific version with specific configuration it should support all

[saghul]

No ETA, sorry.

[Jignesh-Rana]

I am also facing same issue. Any solution. same my RN version is latest 0.73.3. I am also getting same error.

[saghul]

Please try RN 0.72 we haven't yet updated to 73.

[mubashiralisiddiqui]

downgrading our project to 0.72 not solving the issue this is what I am trying to explain need some fixes with Metro.config when we downgrade our project we just change the react native version there are som other changes needed which we dont know

[Jignesh-Rana]

Yes @mubashiralisiddiqui your are right it's not working.

[mubashiralisiddiqui]

I manage to resolve this by transfer all my code into example project and then after I also upgraed my RN version to react-native": "0.72.7" now I dont have the error which I reported but now I can see some other issues if I connect to the server url without the token params the end call button was not working nothing happen when I press cancel call and with token when I tried to connect I got this errror

@saghul can you please guide me on it

[mubashiralisiddiqui]

@saghul I also resolve this issue by matching the moment js version the issue which is left now is that I am not able to end and close the meeting can you please help me. on it on android when I press red button to end the call nothing happen and on ios when I click on red button to end the call it get me back to join meeting screen there i have buttton at top where we have option of close but clicking on close nothing happen here is my code

`const Meeting = props => { const {route} = props; const jitsiMeetingRef = useRef(null); const navigation = useNavigation(); const backHandler = useRef(null);

useEffect(() => { if (Platform.OS === 'android') { backHandler.current = BackHandler.addEventListener( 'hardwareBackPress', () => { onClose(); return true; }, ); }

return () => {
  // Clean up the event listener
  if (Platform.OS === 'android') {
    backHandler.current.remove();
  }
};

}, []); const urlObject = new URL(route?.params?.jitsiUrl); const onClose = () => { navigation.goBack(); navigation.navigate('myBooking'); }; const onConferenceTerminated = nativeEvent => { console.log('Jitsi Terminated'); // JitsiMeet.endCall(); onClose(); }; // Get the value of the 'jwt' parameter from the URL search parameters const jitsiUrl = route?.params?.jitsiUrl; const jwt = jitsiUrl.split('?jwt=')[1]; const room = route?.params?.user || 'room'; return ( <JitsiMeeting // eventListeners={eventListeners} ref={jitsiMeetingRef} onConferenceTerminated={onConferenceTerminated} style={{flex: 1}} room={room} serverURL={route?.params?.jitsiUrl || 'https://meet.jit.si/'} token={jwt || ''} /> ); };`

[saghul]

Make sure you add a listener for onReadyToClose: https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-react-native-sdk#eventlisteners onConferenceTerminated is not a reliable way to decide to dispose the component.