IOS - Element type is invalid error

[notnumeric]

Hi, I'm trying to make Jitsi work in its simplest form, but an error occurs like the one below. Can you help me with this?

React Native Info

import React, {useCallback, useRef, useState} from 'react'; import {JitsiMeeting} from '@jitsi/react-native-sdk/index'; import { Pressable, SafeAreaView, ScrollView, StatusBar, StyleSheet, Text, useColorScheme, View, } from 'react-native';

function App(): JSX.Element { const jitsiMeeting = useRef(null); const [ ready, setReady ] = useState(false)

const onReadyToClose = useCallback(() => { setReady(false) if (jitsiMeeting != null) { // @ts-ignore jitsiMeeting?.current?.close(); } }, []);

const eventListeners = { onReadyToClose };

return ( <SafeAreaView style={{ flex: 1 }}> <View style={{ flex: 1 }}>

{
ready ?
// @ts-ignore
<JitsiMeeting
  eventListeners={eventListeners as any}
  ref={jitsiMeeting}
  style={{flex: 1}}
  room={"EXAMPLE"}
  serverURL={'https://meet.jit.si/'} 
/>
:
<Pressable onPress={() => { setReady(true) }}>
  <Text>Test</Text>
</Pressable>
}
  </View>
</SafeAreaView>

); }

export default App;

===========================================

{ "name": "newjitsi", "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" }, "dependencies": { "@amplitude/react-native": "2.7.0", "@giphy/react-native-sdk": "2.3.0", "@jitsi/react-native-sdk": "^0.3.0", "@react-native-async-storage/async-storage": "1.18.2", "@react-native-community/clipboard": "1.5.1", "@react-native-community/netinfo": "7.1.7", "@react-native-community/slider": "4.1.12", "@react-native-google-signin/google-signin": "7.0.4", "react": "18.2.0", "react-dom": "^18.2.0", "react-native": "0.72.4", "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": "8.4.8", "react-native-gesture-handler": "2.9.0", "react-native-get-random-values": "1.7.2", "react-native-immersive-mode": "2.0.1", "react-native-keep-awake": "4.0.0", "react-native-orientation-locker": "https://git@github.com/wonday/react-native-orientation-locker#f483520ea6b64b97002374a9e9f053a5299a062a", "react-native-pager-view": "5.4.9", "react-native-paper": "4.11.1", "react-native-performance": "2.1.0", "react-native-safe-area-context": "4.4.1", "react-native-screens": "3.22.0", "react-native-sound": "0.11.1", "react-native-splash-screen": "3.3.0", "react-native-svg": "12.4.3", "react-native-video": "https://git@github.com/react-native-video/react-native-video#7c48ae7c8544b2b537fb60194e9620b9fcceae52", "react-native-watch-connectivity": "1.0.11", "react-native-webrtc": "111.0.1", "react-native-webview": "11.15.1" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/eslint-config": "^0.72.2", "@react-native/metro-config": "^0.72.11", "@tsconfig/react-native": "^3.0.0", "@types/react": "^18.0.24", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.2.1", "eslint": "^8.19.0", "jest": "^29.2.1", "metro-react-native-babel-preset": "0.76.8", "prettier": "^2.4.1", "react-test-renderer": "18.2.0", "typescript": "4.8.4" }, "engines": { "node": ">=16" }, "overrides": { "@xmldom/xmldom": "0.8.7" } }

Metro Config

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

module.exports = mergeConfig(getDefaultConfig(__dirname), (async () => { const { resolver: { sourceExts, assetExts } } = await getDefaultConfig();

return { transformer: { babelTransformerPath: require.resolve('react-native-svg-transformer'), getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, inlineRequires: true, }, }), }, resolver: { assetExts: assetExts.filter(ext => ext !== 'svg'), sourceExts: [...sourceExts, 'svg'] } } })());

[saghul]

Did you run the update dependencies command? I don't see the navigation dependencies on your code.

[notnumeric]

hi @saghul, thanks for the reply. this is the rnsdk package.json file. there is no navigation libraries in peerdependencies section.

{ "name": "@jitsi/react-native-sdk", "version": "0.3.0", "description": "React Native SDK for Jitsi Meet.", "main": "index.tsx", "license": "Apache-2.0", "author": "", "homepage": "https://jitsi.org", "repository": { "type": "git", "url": "git+https://github.com/jitsi/jitsi-meet.git" }, "dependencies": { "@hapi/bourne": "2.0.0", "@jitsi/js-utils": "2.0.6", "@jitsi/logger": "2.0.0", "@jitsi/rtcstats": "9.5.1", "@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", "@xmldom/xmldom": "0.8.7", "base64-js": "1.3.1", "grapheme-splitter": "1.0.4", "i18n-iso-countries": "6.8.0", "i18next": "17.0.6", "i18next-xhr-backend": "3.0.0", "js-md5": "0.6.1", "js-sha512": "0.8.0", "jwt-decode": "2.2.0", "lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1670.0.0+10ebc843/lib-jitsi-meet.tgz", "lodash": "4.17.21", "moment": "2.29.4", "moment-duration-format": "2.2.2", "optional-require": "1.0.3", "promise.allsettled": "1.0.4", "punycode": "2.3.0", "react-emoji-render": "1.2.4", "react-i18next": "10.11.4", "react-linkify": "1.0.0-alpha", "react-native-callstats": "3.73.7", "react-native-dialog": "https://github.com/jitsi/react-native-dialog/releases/download/v9.2.2-jitsi.1/react-native-dialog-9.2.2.tgz", "react-native-svg-transformer": "1.0.0", "react-native-tab-view": "3.1.1", "react-native-url-polyfill": "1.3.0", "react-native-youtube-iframe": "2.2.1", "react-redux": "7.2.9", "redux": "4.0.4", "redux-thunk": "2.4.1", "unorm": "1.6.0", "util": "0.12.1", "uuid": "8.3.2", "zxcvbn": "4.4.2" }, "peerDependencies": { "@amplitude/react-native": "2.7.0", "@giphy/react-native-sdk": "2.3.0", "@react-native-async-storage/async-storage": "1.18.2", "@react-native-community/clipboard": "1.5.1", "@react-native-community/netinfo": "7.1.7", "@react-native-community/slider": "4.1.12", "@react-native-google-signin/google-signin": "7.0.4", "react-native": "", "react": "", "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": "8.4.8", "react-native-get-random-values": "1.7.2", "react-native-gesture-handler": "2.9.0", "react-native-immersive-mode": "2.0.1", "react-native-keep-awake": "4.0.0", "react-native-pager-view": "5.4.9", "react-native-paper": "4.11.1", "react-native-performance": "2.1.0", "react-native-orientation-locker": "https://git@github.com/wonday/react-native-orientation-locker#f483520ea6b64b97002374a9e9f053a5299a062a", "react-native-safe-area-context": "4.4.1", "react-native-screens": "3.22.0", "react-native-sound": "0.11.1", "react-native-splash-screen": "3.3.0", "react-native-svg": "12.4.3", "react-native-video": "https://git@github.com/react-native-video/react-native-video#7c48ae7c8544b2b537fb60194e9620b9fcceae52", "react-native-watch-connectivity": "1.0.11", "react-native-webrtc": "111.0.1", "react-native-webview": "11.15.1" }, "overrides": { "@xmldom/xmldom": "0.8.7" }, "scripts": { "postinstall": "node sdk_instructions.js", "prepare": "node prepare_sdk.js" }, "bugs": { "url": "https://github.com/jitsi/jitsi-meet/issues" }, "keywords": [ "react-native" ] }

[saghul]

Oh they are in the dependencies section already, sorry, my bad.

[saghul]

Can you reproduce this with our sample app?

[notnumeric]

I think I solved the problem. When I tried taking the metro.config file from the sample application, the problem was solved. thanks a lot.