After React-Native Expo 51 upgrate not able to use @stream-io/video-react-native-sdk

Question

After React-Native Expo 51 upgrate not able to use @stream-io/video-react-native-sdk

elisabeth0bangoura opened this issue 5 months ago · 5 comments

elisabeth0bangoura commented 5 months ago

Which package/packages do you use?

@stream-io/video-react-sdk
@stream-io/video-react-native-sdk
@stream-io/video-client

After I installed everything and created a Development Build in IOS
and Import the getstream.io SDK for expo in expo 51
like so:

import Ionicons from '@expo/vector-icons/Ionicons';
import { StyleSheet, View, Platform } from 'react-native';

import { Collapsible } from '@/components/Collapsible';
import { ExternalLink } from '@/components/ExternalLink';
import ParallaxScrollView from '@/components/ParallaxScrollView';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { Image } from 'expo-image';
import { useEffect, useState } from 'react';
import {StreamCall, StreamVideo, StreamVideoClient,User} from '@stream-io/video-react-native-sdk';

export default function Livestream() {
return (

<View>

</View>

);
}

const styles = StyleSheet.create({
headerImage: {
color: '#808080',
bottom: -90,
left: -35,
position: 'absolute',
},
titleContainer: {
flexDirection: 'row',
gap: 8,
},
});

I get this error.

my app.json file

{
"expo": {
"name": "Weilme",
"slug": "Weilme",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"scheme": "com.weilme",
"userInterfaceStyle": "automatic",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"ios": {
"supportsTablet": true,
"bitcode": false,
"bundleIdentifier": "com.weilme"
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/images/adaptive-icon.png",
"backgroundColor": "#ffffff"
},
"permissions": [
"android.permission.RECORD_AUDIO",
"android.permission.MODIFY_AUDIO_SETTINGS",
"android.permission.POST_NOTIFICATIONS",
"android.permission.FOREGROUND_SERVICE",
"android.permission.FOREGROUND_SERVICE_MICROPHONE",
"android.permission.BLUETOOTH",
"android.permission.BLUETOOTH_CONNECT",
"android.permission.BLUETOOTH_ADMIN",
"android.permission.ACCESS_NETWORK_STATE",
"android.permission.CAMERA",
"android.permission.INTERNET",
"android.permission.SYSTEM_ALERT_WINDOW",
"android.permission.WAKE_LOCK"
]
},
"web": {
"bundler": "metro",
"output": "static",
"favicon": "./assets/images/favicon.png"
},
"plugins": [
"expo-router",
[
"expo-av",
{
"microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone."
}
],
[
"expo-document-picker",
{
"iCloudContainerEnvironment": "Production"
}
],
"@stream-io/video-react-native-sdk",
[
"@config-plugins/react-native-webrtc",
{
"cameraPermission": "Allow $(PRODUCT_NAME) to access your camera",
"microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone"
}
],
[
"expo-build-properties",
{
"android": {
"extraMavenRepos": [
"$rootDir/../../../node_modules/@notifee/react-native/android/libs"
]
}
}
]
],
"experiments": {
"typedRoutes": true
},
"extra": {
"router": {
"origin": false
},
"eas": {
"projectId": ""
}
},
"runtimeVersion": {
"policy": "appVersion"
},
"updates": {
"url": ""
}
}
}

my package.json file
{
"name": "weilme",
"main": "expo-router/entry",
"version": "1.0.0",
"scripts": {
"start": "expo start",
"reset-project": "node ./scripts/reset-project.js",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"test": "jest --watchAll",
"lint": "expo lint"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"@config-plugins/react-native-webrtc": "^9.0.0",
"@expo/vector-icons": "^14.0.0",
"@notifee/react-native": "^7.8.2",
"@react-native-community/netinfo": "11.3.1",
"@react-navigation/native": "^6.0.2",
"@stream-io/flat-list-mvcp": "^0.10.3",
"@stream-io/react-native-webrtc": "^118.0.1",
"@stream-io/video-react-native-sdk": "^0.6.21",
"expo": "~51.0.2",
"expo-av": "~14.0.4",
"expo-clipboard": "~6.0.3",
"expo-constants": "~16.0.1",
"expo-document-picker": "~12.0.1",
"expo-file-system": "~17.0.1",
"expo-font": "~12.0.4",
"expo-haptics": "~13.0.1",
"expo-image-manipulator": "~12.0.3",
"expo-image-picker": "~15.0.4",
"expo-linking": "~6.3.1",
"expo-media-library": "~16.0.3",
"expo-router": "~3.5.11",
"expo-sharing": "~12.0.1",
"expo-splash-screen": "~0.27.4",
"expo-status-bar": "~1.12.1",
"expo-system-ui": "~3.0.4",
"expo-web-browser": "~13.0.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.74.1",
"react-native-gesture-handler": "~2.16.1",
"react-native-incall-manager": "^4.2.0",
"react-native-reanimated": "~3.10.1",
"react-native-safe-area-context": "4.10.1",
"react-native-screens": "3.31.1",
"react-native-svg": "15.2.0",
"react-native-web": "~0.19.10",
"stream-chat-expo": "^5.29.0",
"expo-image": "~1.12.9",
"expo-dev-client": "~4.0.13",
"expo-updates": "~0.25.11"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@types/jest": "^29.5.12",
"@types/react": "~18.2.45",
"@types/react-test-renderer": "^18.0.7",
"jest": "^29.2.1",
"jest-expo": "~51.0.1",
"react-test-renderer": "18.2.0",
"typescript": "~5.3.3"
},
"private": true
}

Answer 1 · 2024-05-12T14:49:38.000Z

Could you let me know if you solved that and how? Im facing the same error

Answer 2 · 2024-05-12T15:12:13.000Z

Could you let me know if you solved that and how? Im facing the same error

Once you have completed the installation process outlined in the documentation at https://getstream.io/video/docs/reactnative/setup/installation/expo/, ensure that you create a (metro.config.js file), as described in the documentation. (I forgot it and this created my error) This file should be placed in the root directory of your project. Afterward, create an Expo Development Build. Following these steps should make everything work.

Answer 3 · 2024-05-12T16:22:20.000Z

Thank you! But my project is using babel.config.js, do you know if can I just create the file metro.config.js and it will work correctly?
Im just starting with React Native so I really don't know haha

Answer 4 · 2024-05-12T16:26:58.000Z

Well, I tried just creating the metro.config.js keeping the babel file and it fixed the error, Thank you!!!

Answer 5 · 2024-05-12T16:28:19.000Z

Well, I tried just creating the metro.config.js keeping the babel file and it fixed the error, Thank you!!!
Awesome, You're welcome!! :)