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

elisabeth0bangoura · 2024-05-10T20:13:48Z

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
}

The text was updated successfully, but these errors were encountered:

VictorDiasO · 2024-05-12T14:49:38Z

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

elisabeth0bangoura · 2024-05-12T15:12:13Z

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.

VictorDiasO · 2024-05-12T16:22:20Z

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

VictorDiasO · 2024-05-12T16:26:58Z

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

elisabeth0bangoura · 2024-05-12T16:28:19Z

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

elisabeth0bangoura added the bug Something isn't working label May 10, 2024

elisabeth0bangoura changed the title ~~After React-Native Expo 51 Upgrate I'm not able to import @stream-io/video-react-native-sdk~~ After React-Native Expo 51 upgrate not able to use @stream-io/video-react-native-sdk May 10, 2024

elisabeth0bangoura closed this as completed May 10, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

elisabeth0bangoura commented May 10, 2024

VictorDiasO commented May 12, 2024

elisabeth0bangoura commented May 12, 2024

VictorDiasO commented May 12, 2024 •

edited

Loading

VictorDiasO commented May 12, 2024

elisabeth0bangoura commented May 12, 2024

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

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

Comments

elisabeth0bangoura commented May 10, 2024

VictorDiasO commented May 12, 2024

elisabeth0bangoura commented May 12, 2024

VictorDiasO commented May 12, 2024 • edited Loading

VictorDiasO commented May 12, 2024

elisabeth0bangoura commented May 12, 2024

VictorDiasO commented May 12, 2024 •

edited

Loading