GetStream / stream-chat-react-native

💬 React-Native Chat SDK ➜ Stream Chat. Includes a tutorial on building your own chat app experience using React-Native, React-Navigation and Stream
https://getstream.io/chat/sdk/react-native/
Other
949 stars 321 forks source link

Expo offline support and react-native-firebase #2123

Closed andreaslydemann closed 10 months ago

andreaslydemann commented 1 year ago

Describe the bug When you install react-native-firebase in an expo app, it is stated in the docs that you need to set useFrameworks: 'static' with expo-build-properties for react-native-firebase to work. Unfortunately that setting doesn't work with the library react-native-quick-sqlite that is used for offline mode.

You would get the following EAS build error from adding react-native-quick-sqlite while having useFrameworks: 'static' enabled:

Skærmbillede 2023-05-06 kl  09 11 32

That basically makes offline mode impossible together with push notifications using react-native-firebase.

To Reproduce Steps to reproduce the behavior:

  1. Install react-native-firebase and set useFrameworks: 'static' in the app.json file while having react-native-quick-sqlite installed for offline mode.
  2. Run EAS build.
  3. See EAS build error.

Expected behavior I expect the app to work with react-native-firebase while having offline support enabled. But that is currently not possible as far as I can see. If Stream used another sqlite library with support for useFrameworks: 'static', that would be a solution.

vanGalilea commented 1 year ago

This issue is known to us, and we're aware of the unfortunate limitations. We're triaging possible solutions

RRaideRR commented 1 year ago

I'm just here to tell you that I have the same problem :-)

RRaideRR commented 1 year ago

I'm pretty sure you evaluated already some possibilities and I'm a total newbie on everything on the native side, so probably this proposal is totally useless, but maybe its possible to "simply" exchange react-native-quick-sqlite with https://docs.expo.dev/versions/latest/sdk/sqlite/

jaibheeman commented 1 year ago

Also, have the same issue. Hope it's fixed soon :)

eveepi commented 1 year ago

Running into this bug as well. Any updates?

RRaideRR commented 11 months ago

@andreaslydemann are you still stuck with this problem or what did you do?

andreaslydemann commented 11 months ago

I had to drop the offline support on my project, unfortunately, until there is a solution.

keeganthomp commented 11 months ago

Same here

RRaideRR commented 11 months ago

@vishalnarkhede could you please share some information with us how you and your team are seeing the priority of this bug/enhancement? This would help me arguing in our company and to plan my next steps a little bit better :-).

vishalnarkhede commented 11 months ago

We are discussing this internally, going to prioritize this. Will update you in couple of working days :)

vishalnarkhede commented 11 months ago

@andreaslydemann @RRaideRR could you please provide your dependencies list? or complete package.json

RRaideRR commented 11 months ago

Sure!

  "dependencies": {
    "@config-plugins/react-native-adjust": "^5.0.0",
    "@expo/vector-icons": "^13.0.0",
    "@ptomasroos/react-native-multi-slider": "^2.2.2",
    "@purchasely/react-native-purchasely-google": "^4.0.1",
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-native-community/datetimepicker": "7.2.0",
    "@react-native-community/netinfo": "^9.4.1",
    "@react-native-community/slider": "4.4.2",
    "@react-native-firebase/analytics": "^18.3.0",
    "@react-native-firebase/app": "^18.3.0",
    "@react-native-firebase/auth": "^18.3.0",
    "@react-native-google-signin/google-signin": "^10.0.1",
    "@react-native-masked-view/masked-view": "0.2.9",
    "@react-navigation/bottom-tabs": "^6.5.7",
    "@react-navigation/core": "^6.4.8",
    "@react-navigation/material-top-tabs": "^6.6.2",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/native-stack": "^6.9.12",
    "@react-navigation/routers": "^6.1.8",
    "@react-navigation/stack": "^6.3.16",
    "@reduxjs/toolkit": "^1.9.5",
    "@sentry/react-native": "^5.8.0",
    "@shopify/flash-list": "^1.5.0",
    "@shopify/react-native-skia": "^0.1.202",
    "axios": "^1.5.0",
    "date-fns": "^2.30.0",
    "date-fns-tz": "^2.0.0",
    "expo": "^49.0.8",
    "expo-apple-authentication": "~6.1.0",
    "expo-application": "~5.3.0",
    "expo-av": "~13.4.1",
    "expo-blur": "~12.4.1",
    "expo-build-properties": "~0.8.3",
    "expo-clipboard": "~4.3.1",
    "expo-constants": "~14.4.2",
    "expo-crypto": "~12.4.1",
    "expo-dev-client": "2.4.7",
    "expo-device": "~5.4.0",
    "expo-document-picker": "~11.5.4",
    "expo-file-system": "~15.4.3",
    "expo-font": "~11.4.0",
    "expo-haptics": "~12.4.0",
    "expo-image": "^1.5.1",
    "expo-image-manipulator": "~11.3.0",
    "expo-image-picker": "~14.3.2",
    "expo-insights": "~0.2.0",
    "expo-intent-launcher": "~10.7.0",
    "expo-keep-awake": "~12.3.0",
    "expo-linear-gradient": "~12.3.0",
    "expo-linking": "~5.0.2",
    "expo-localization": "~14.3.0",
    "expo-media-library": "~15.4.1",
    "expo-notifications": "~0.20.1",
    "expo-sharing": "~11.5.0",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "expo-store-review": "~6.4.0",
    "expo-system-ui": "~2.4.0",
    "expo-tracking-transparency": "~3.1.0",
    "expo-updates": "~0.18.11",
    "expo-video-thumbnails": "~7.4.0",
    "google-libphonenumber": "^3.2.32",
    "i18next": "^23.5.1",
    "i18next-chained-backend": "^4.4.0",
    "i18next-resources-to-backend": "^1.1.4",
    "lodash.debounce": "^4.0.8",
    "lottie-react-native": "^6.2.0",
    "patch-package": "^6.5.1",
    "postinstall-postinstall": "^2.1.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-i18next": "^12.2.0",
    "react-native": "^0.72.4",
    "react-native-adjust": "^4.33.0",
    "react-native-app-link": "^1.0.1",
    "react-native-circular-progress-indicator": "^4.4.2",
    "react-native-country-picker-modal": "^2.0.0",
    "react-native-device-number": "^1.0.7",
    "react-native-fiesta": "^0.5.1",
    "react-native-gesture-handler": "^2.12.0",
    "react-native-multi-slider": "^0.3.6",
    "react-native-pager-view": "6.2.0",
    "react-native-phrase-sdk": "^1.1.2",
    "react-native-purchasely": "^4.0.1",
    "react-native-reanimated": "^3.4.2",
    "react-native-reanimated-carousel": "^3.5.1",
    "react-native-root-toast": "^3.4.1",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-share": "^9.0.2",
    "react-native-svg": "13.9.0",
    "react-native-system-setting": "^1.7.6",
    "react-native-tab-view": "^3.5.1",
    "react-native-videoeditorsdk": "^3.0.0",
    "react-native-vision-camera": "^2.15.5",
    "react-native-web": "~0.19.6",
    "react-native-webview": "13.2.2",
    "react-redux": "^8.0.5",
    "redux": "^4.2.1",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.4.2",
    "rgb-hex": "^4.0.0",
    "sentry-expo": "^7.0.1",
    "stream-chat-expo": "^5.16.0",
    "styled-components": "^5.3.8",
    "tinycolor2": "^1.6.0",
    "toggle-switch-react-native": "^3.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@react-native-community/eslint-config": "^3.2.0",
    "@testing-library/react-hooks": "^8.0.1",
    "@types/enzyme": "3.10.11",
    "@types/google-libphonenumber": "^7.4.23",
    "@types/lodash": "^4.14.178",
    "@types/react": "~18.2.14",
    "@types/react-redux": "^7.1.24",
    "@types/react-test-renderer": "^18.0.0",
    "@types/redux": "^3.6.0",
    "@typescript-eslint/eslint-plugin": "^5.42.1",
    "@typescript-eslint/parser": "^5.42.1",
    "babel-plugin-module-resolver": "^4.1.0",
    "babel-preset-expo": "^9.5.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.6",
    "eslint": "^8.27.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-react": "^7.31.10",
    "eslint-plugin-react-hooks": "^4.6.0",
    "prettier": "^2.7.1",
    "react-devtools-core": "^4.26.1",
    "react-native-dotenv": "^3.4.2",
    "react-test-renderer": "^18.2.0",
    "typescript": "^5.1.3"
  },
vishalnarkhede commented 11 months ago

is it the production build that triggers this issue? @RRaideRR

RRaideRR commented 11 months ago

is it the production build that triggers this issue? @RRaideRR

The last time I tried it in May / June, it was that I couldn't build locally as well as production build.

However, I just tried to create a minimal reproducible example but it seemed to work. I'll get back to you tomorrow :-).

vishalnarkhede commented 11 months ago

Yeah I am having a bit hard time trying to reproduce this issue

vishalnarkhede commented 11 months ago

Would really appreciate the reproducible repo

RRaideRR commented 11 months ago

That was some hard work - way more than I thought :-D.

Okay - so good news first: @andreaslydemann - I couldn't come up with a minimal reproducible example with firebase and expo-build-properties. So it seems like the initial bug in this thread is fixed (maybe because of a new react-native-quick-sqlite version).

Bad news: I still got some errors building my production app on IOS.

How to run the example:

  1. Run eas build -p ios --profile production --clear-cache
  2. The build should fail. Inspect either the fastlane error or download the relevant X Code logs.
vishalnarkhede commented 11 months ago

Ok so first of all, thanks alot @RRaideRR . That was really helpful.

So I finally managed to get an expo app working and getting EAS build to succeed. This is what I had to do (mostly same as what @RRaideRR mentioned, but adding explicit changes in case it helps anyone):

  1. Latest versions of Expo (49), react-native-quick-sqlite (8.0.4) and react-native-firebase (18.4.0)
  2. Make sure to follow expo steps for react-native-firebase library, specifically for app.json file.

    • add expo-build-properties dependency

      npx expo install expo-build-properties
    • configure useFrameworks property in app.json

      "plugins": [
        "@react-native-firebase/app",
        "expo-build-properties",
        [
          "expo-build-properties",
          {
            "ios": {
              "useFrameworks": "static"
            }
          }
        ]
      ],
  3. Set QUICK_SQLITE_USE_PHONE_VERSION env variable in eas.json

      "production": {
        "env": {
          "QUICK_SQLITE_USE_PHONE_VERSION": "1"
        }
      }

    This is not ideal and expo-sqlite has the same issue, but seems like this will be resolved in Expo 50 for expo-sqlite. We will try to check if support for expo-sqlite can be added to the sdk - https://github.com/expo/expo/issues/23970#issuecomment-1680996963

andreaslydemann commented 11 months ago

Thanks for the help figuring this out @RRaideRR and @vishalnarkhede! I'll have a go with the workaround here soon.

RRaideRR commented 11 months ago

If you're not using expo-update or another library that conflicts with sqlite3, you don't need the workaround with QUICK_SQLITE_USE_PHONE_VERSION: 1. When you remove expo-update in my sample project and exchange it with rn-firebase, it works out of the box :-)

RRaideRR commented 5 months ago

By the way: I can confirm that it works for expo 50 out of the box without QUICK_SQLITE_USE_PHONE_VERSION: 1 🎊🎈