[🐛] Bug Report adding OverlayProvider crash the app

[fawzii0x3]

Issue

getRefNativeTag error related to gorhom/react-native-bottom-sheet#1438

Expected behavior

Project Related Information

Customization

Click To Expand

newArchEnabled : true

Offline support

• I have enabled offline support.
• The feature I'm having does not occur when offline support is disabled. (stripe out if not applicable)

Environment

Click To Expand

package.json:

"dependencies": {
    "@apollo/client": "^3.10.3",
    "@dev-plugins/apollo-client": "^0.0.6",
    "@dev-plugins/react-native-mmkv": "^0.0.1",
    "@gorhom/bottom-sheet": "^4.6.3",
    "@hookform/resolvers": "^3.4.0",
    "@react-native-community/datetimepicker": "8.0.1",
    "@react-native-community/netinfo": "11.3.1",
    "@react-native-firebase/app": "^20.0.0",
    "@react-native-firebase/auth": "^20.0.0",
    "@react-native-firebase/crashlytics": "^20.0.0",
    "@react-navigation/native": "^6.0.2",
    "@shopify/flash-list": "1.6.4",
    "@stream-io/flat-list-mvcp": "^0.10.3",
    "apollo-upload-client": "^17.0.0",
    "apollo3-cache-persist": "^0.15.0",
    "expo": "~51.0.8",
    "expo-asset": "~10.0.6",
    "expo-av": "~14.0.5",
    "expo-battery": "~8.0.1",
    "expo-blur": "~13.0.2",
    "expo-build-properties": "~0.12.1",
    "expo-checkbox": "~3.0.0",
    "expo-constants": "~16.0.1",
    "expo-dev-client": "~4.0.14",
    "expo-document-picker": "~12.0.1",
    "expo-dynamic-app-icon": "^1.2.0",
    "expo-file-system": "~17.0.1",
    "expo-font": "~12.0.5",
    "expo-haptics": "~13.0.1",
    "expo-image": "~1.12.9",
    "expo-image-manipulator": "~12.0.5",
    "expo-image-picker": "~15.0.5",
    "expo-linking": "~6.3.1",
    "expo-localization": "~15.0.3",
    "expo-location": "~17.0.1",
    "expo-media-library": "~16.0.3",
    "expo-router": "~3.5.14",
    "expo-splash-screen": "~0.27.4",
    "expo-status-bar": "~1.12.1",
    "expo-system-ui": "~3.0.4",
    "expo-updates": "~0.25.14",
    "expo-web-browser": "~13.0.3",
    "graphql": "^16.8.1",
    "i18next": "^23.11.5",
    "immer": "^10.1.1",
    "react": "18.2.0",
    "react-hook-form": "^7.51.4",
    "react-i18next": "^14.1.1",
    "react-native": "0.74.1",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-maps": "1.14.0",
    "react-native-mmkv": "^3.0.0-beta.5",
    "react-native-modal-datetime-picker": "^17.1.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-ui-datepicker": "^2.0.2",
    "react-native-unistyles": "^2.7.2",
    "stream-chat-expo": "^5.31.0",
    "valibot": "^0.30.0",
    "zustand": "^4.5.2"
  },
  "devDependencies": {
    "@babel/core": "^7.24.5",
    "@babel/preset-env": "^7.24.5",
    "@babel/preset-typescript": "^7.24.1",
    "@commitlint/cli": "^19.3.0",
    "@commitlint/config-conventional": "^19.2.2",
    "@graphql-codegen/add": "^5.0.2",
    "@graphql-codegen/cli": "^5.0.2",
    "@graphql-codegen/fragment-matcher": "^5.0.2",
    "@graphql-codegen/introspection": "^4.0.3",
    "@graphql-codegen/typescript": "^4.0.7",
    "@graphql-codegen/typescript-operations": "^4.2.1",
    "@graphql-codegen/typescript-react-apollo": "^4.3.0",
    "@testing-library/jest-dom": "^6.4.5",
    "@testing-library/react": "^15.0.7",
    "@testing-library/react-hooks": "^8.0.1",
    "@types/apollo-upload-client": "^17.0.5",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.2.79",
    "@types/react-test-renderer": "^18.0.7",
    "babel-jest": "^29.7.0",
    "cross-env": "^7.0.3",
    "cz-conventional-changelog": "^3.3.0",
    "eslint": "^8.57.0",
    "eslint-config-expo": "^7.1.2",
    "eslint-config-universe": "^12.0.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-react-compiler": "^0.0.0-experimental-c8b3f72-20240517",
    "husky": "^9.0.11",
    "jest": "^29.7.0",
    "jest-expo": "~51.0.2",
    "prettier": "3.2.5",
    "react-test-renderer": "18.3.1",
    "ts-jest": "^29.1.3",
    "typescript": "~5.3.3"
  },

react-native info output:

 OUTPUT GOES HERE

• Platform that you're experiencing the issue on:
  • iOS
  • Android
  • iOS but have not tested behavior on Android
  • Android but have not tested behavior on iOS
  • Both
• stream-chat-expo version you're using that has this issue:
  • 5.31.0
• Device/Emulator info:
  • I am using a physical device
  • OS version: e.g. Android 10
  • Device/Emulator: e.g. iPhone 11

Additional context

Screenshots

Click To Expand

---

[fawzii0x3]

@khushal87 yup the new arch is enabled

[khushal87]

Hey @fawzii0x3, right now, we haven't tested our SDK with the new architecture. However, it is in our pipeline, and we will pick this up in the weeks to come. Please stay in the loop until then, and feel free to remove the new architecture for now if you want to use the SDK to the best of your capabilities. Thanks 😄

[Raghu-M-S]

I'm also facing same error , currently using expo 50.0.19, as soon as i import anything from "stream-chat-expo", application is crashing

But i'm not not using expo-router for navigation, i'm creating navigator using "@react-navigation/stack"

`import React, { useContext, useEffect, useState } from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { SafeAreaView } from "react-native-safe-area-context";
import { Stack, YStack } from "tamagui";
import {
StreamVideo,
StreamVideoClient,
User,
} from "@stream-io/video-react-native-sdk";
import CardSkeleton from "@components/skeleton/CardSkeleton";
import RoundedSkeleton from "@components/skeleton/RoundedSkeleton";
import BottomNavigation from "./BottomNavigation";
import { ApiContext } from "context/ApiContext";
import VideoCall from "@screens/VideoStream/VideoCall";
import { useQuery } from "react-query";
import { stream_key } from "@utils/globalConstants";
import { StreamChat } from "stream-chat";
import ChatSystem from "@screens/ChatSystem";
import { Chat, OverlayProvider } from "stream-chat-expo";

const UserStack = createStackNavigator();

const AppStack = () => {
const apiContext = useContext(ApiContext);
if (!apiContext) {
throw new Error("ApiContext is not available");
}
const { client, userData, setUserData } = apiContext;
const chatClient = StreamChat.getInstance(stream_key);
const [isLoading, setIsLoading] = useState(true);
const [initialRouteName, setInitialRouteName] = useState("BottomNavigation");
const [status, setStatus] = useState(null);
const [clientStream, setClient] = useState<StreamVideoClient | null>(null);

const fetchGetStreamToken = async () => {
const response = await client.get(telehealth/session/token);
return response.data.result;
};

const { data } = useQuery("fetchGetStreamToken", fetchGetStreamToken, {
refetchOnMount: true,
});

useEffect(() => {
const user: User = { id: String(userData?.user?.id ?? "") };

const initializeClient = async () => {
  if (!data?.sessionToken) {
    console.log("Session token is not available.");
    return;
  }
  try {
    const client = new StreamVideoClient({
      apiKey: stream_key,
      user,
      token: data.sessionToken,
    });
    setClient(client);
    if (userData?.streamToken !== data.sessionToken) {
      setUserData({
        ...userData,
        streamToken: data.sessionToken,
      });
    }
  } catch (e) {
    console.log("Error creating client:", e);
  }
};

if (client && data) {
  initializeClient();
}

return () => {
  if (clientStream) {
    clientStream?.disconnectUser();
  }
};

}, [client, data]); // React to changes in client or data

return (
<UserStack.Navigator initialRouteName={initialRouteName}>
<UserStack.Screen
name="BottomNavigation"
component={BottomNavigation}
options={{ headerShown: false }}
initialParams={{ status: status }}
/>
{clientStream && (
<UserStack.Screen name="VideoCall" options={{ headerShown: false }}>
{(props) => (

<VideoCall {...props} />

)}
</UserStack.Screen>
)}

  {chatClient && (
    <UserStack.Screen name="ChatSystem" options={{ headerShown: false }}>
      {(props) => (
        <OverlayProvider>
          <Chat client={chatClient}>
            <ChatSystem />
          </Chat>
        </OverlayProvider>
      )}
    </UserStack.Screen>
  )}
</UserStack.Navigator>

);
};

export default AppStack;
`

[khushal87]

Hey @Raghu-M-S, are you on new architecture as well?

[fawzii0x3]

@Raghu-M-S install missing dependencies and create a development build to add native modules

[RajeshPandey057]

Hi @khushal87 ,
The error is related to usage of nativeTag in gorhom/react-native-bottom-sheet which in is causing the app to crash when using new architecture

They already fixed the issue with this commit and published it in the release 4.6.4.

If gorhom/react-native-bottom-sheet in peer dependencies for this package is update to to version 4.6.4, the issue should be resolved. Should be a small change for you. Or let me know if you want me to open a pull request.

[stream-ci-bot]

🎉 This issue has been resolved in version 5.36.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀