Not working on react 0.73? Cannot read property 'OverlayProvider' of undefined

[ToshKoevoets]

Tried complete fresh install. Not compatible yet with latest react-native?

{
  "name": "YourProjectName",
  "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": {
    "@react-native-camera-roll/camera-roll": "^6.0.2",
    "@react-native-community/netinfo": "^11.1.0",
    "@stream-io/flat-list-mvcp": "^0.10.3",
    "react": "18.2.0",
    "react-native": "0.71.14",
    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "^2.13.4",
    "react-native-image-crop-picker": "^0.40.1",
    "react-native-image-resizer": "^1.4.5",
    "react-native-reanimated": "^2.13.0",
    "react-native-svg": "^13.14.0",
    "stream-chat-react-native": "^5.21.0"
  },
  "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"
  }
}

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import type {PropsWithChildren} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { OverlayProvider } from 'stream-chat-react-native';

type SectionProps = PropsWithChildren<{
  title: string;
}>;

function Section({children, title}: SectionProps): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
}

function DefaultApp(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="Step One">
            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <Section title="See Your Changes">
            <ReloadInstructions />
          </Section>
          <Section title="Debug">
            <DebugInstructions />
          </Section>
          <Section title="Learn More">
            Read the docs to discover what to do next:
          </Section>
          <LearnMoreLinks />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

function App() {
  return (
    <GestureHandlerRootView>
      <OverlayProvider>
        <DefaultApp />
      </OverlayProvider>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;

[khushal87]

Hey @ToshKoevoets, from the package.json you have shared, the react-native version is 0.71.14, so its a bit confusing whether this issue is 0.73 specific?

[ToshKoevoets]

That's my bad; apologies, shared with you the package.json after hours of debugging. It took me a while to figure out RN version was the issue.

I've tried downgrading an existing project, still got this error.

Then I've installed it in a fresh RN cli project, will also reproduce this error.

However installing a fresh RN project in v71 does work.

It's only on IOS, on Android it does work in v0.73.

I've experimented with reanimated, thought it might be the issue, but that's fine to be on 3 (your docs state 2)

Op ma 13 nov 2023 om 06:57 schreef Khushal Agarwal @.***

:

Hey @ToshKoevoets https://github.com/ToshKoevoets, from the package.json you have shared, the react-native version is 0.71.14, so its a bit confusing whether this issue is 0.73 specific?

— Reply to this email directly, view it on GitHub https://github.com/GetStream/stream-chat-react-native/issues/2303#issuecomment-1807520185, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJEFAHTK7JTBWVCVHSWJF3YEGZGLAVCNFSM6AAAAAA7GYJ4GKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMBXGUZDAMJYGU . You are receiving this because you were mentioned.Message ID: @.***>

[khushal87]

Oh, we honestly haven't tested the project with RN 0.73 as it is fairly new. On older versions, we haven't seen any such issues. We will try to test it with 0.73 and let you know. Until then, please stick to 0.71 or 0.72 for now.

[ToshKoevoets]

I think 0.72 has the same error for IOS, initialy my project was ported to 0.72, which is where I experienced the issue. Then I tried a complete fresh install, which was 0.73. But I only got it working on 0.71. But all the down & upgrading could have also caused the issue. Would need to do a fresh install on 0.72 to be sure.

Op ma 13 nov 2023 om 09:28 schreef Khushal Agarwal @.***

:

Oh, we honestly haven't tested the project with RN 0.73 as it is fairly new. On older versions, we haven't seen any such issues. We will try to test it with 0.73 and let you know. Until then, please stick to 0.71 or 0.72 for now.

— Reply to this email directly, view it on GitHub https://github.com/GetStream/stream-chat-react-native/issues/2303#issuecomment-1807668562, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJEFAGV5QVZZDV7PLBWC3LYEHK4VAVCNFSM6AAAAAA7GYJ4GKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMBXGY3DQNJWGI . You are receiving this because you were mentioned.Message ID: @.***>

[ToshKoevoets]

It might be good to add a warning in docs, at the moment with a fresh React Native install you wont be able to use GetStream; I understand it's not a priority & there is a version indication already, but might be save some frustration to clarify it in the docs. Also certain parts of your table say minimum; although not the react native part.

[khushal87]

We have our SampleApp(examples/SampleApp) on 0.72.6, and we didn't notice any issue.

[khushal87]

It might be good to add a warning in docs, at the moment with a fresh React Native install you wont be able to use GetStream; I understand it's not a priority & there is a version indication already, but might be save some frustration to clarify it in the docs. Also certain parts of your table say minimum; although not the react native part.

We have taken this feedback and will close the issue. Please reach us if there is an issue. Thanks 😄

[RaphaelGLv]

I had the same issue with react-native 0.72, the OverlayProvider worked fine with android, but I couldn't use it's component in iOS.

So I switched from:

  return (
    <OverlayProvider>
      {childred}
    </OverlayProvider>
  );

To:

  return (
    OverlayProvider({children: children})
  );

It worked fine with both OS and solve my problem completely