Get working react-native sample (example ringing-tutorial)

[sultanmyrza]

Step 1: I want to run sample sample-apps/react-native/ringing-tutorial/

Step 2: Update these files with my credentials, data etc..

• sample-apps/react-native/ringing-tutorial/constants/Users.ts
• sample-apps/react-native/ringing-tutorial/contexts/authentication-provider.tsx
• sample-apps/react-native/ringing-tutorial/utils/setPushConfig.ts
• sample-apps/react-native/ringing-tutorial/google-services.json
• sample-apps/react-native/ringing-tutorial/GoogleService-Info.plist

I'm stuck at Step 1.

So far I tried

1. ✅ Clone monorepo git clone https://github.com/GetStream/stream-video-js.git
2. ✅ Open project cursor stream-video-js
3. ✅ Install workspace dependencies yarn
4. ✅ cd sample-apps/react-native/ringing-tutorial/
5. ❌ Install project dependencies

I tried npm install and got

npm error code EUNSUPPORTEDPROTOCOL
npm error Unsupported URL Type "workspace:": workspace:^

I tried yarn while I didn't get any errors it seems like dependencies are not installed Cannot find module '@stream-io/video-react-native-sdk' or its corresponding type declarations.

I don't have much knowladge about monorepos but would be nice to get a hint on how to get sample apps running locally.

[oliverlaz]

hi @sultanmyrza, our mono repo is managed by yarn so npm won't work here.
To set it up:

• Ensure you have yarn installed on your machine\
• Clone the repo
• In the repo root run yarn install
• Run yarn build:all

And now proceed to the ringing-tutorial sample app, and fill up the necessary credentials. You can follow this tutorial, as it explains how this sample app can be built, step by step:

• https://getstream.io/video/sdk/react-native/tutorial/ringing/

[sultanmyrza]

@oliverlaz thank you for hint. Now Cannot find module '@stream-io/video-react-native-sdk' or its corresponding type declarations. is resolved ✅

I check commits and seems like @santhoshvai did some changes to ringing-tutorial.

Question to @santhoshvai have you tried to build project with eas build? The reason is I'm trying to adopt Continious Native Generation.

So far I tried

• ✅ Clone monorepo git clone https://github.com/GetStream/stream-video-js.git
• ✅ Open project cursor stream-video-js
• ✅ Install dependencies yarn install && yarn build:all as suggested by @oliverlaz 🙏
• ✅ Go to sample project cd sample-apps/react-native/ringing-tutorial/
• ✅ Update api key, eas configs, user tokens etc.
• ❌ eas build
  • ❌ Build locally eas build --platform android --profile development --local
  • ❌ Build on eas eas build

But getting this error for both local and eas builds

[INSTALL_DEPENDENCIES] ➤ YN0000: · Done with warnings in 43s 978ms
The NODE_ENV environment variable is required but was not specified. Ensure the project is bundled with Expo CLI or NODE_ENV is set.
Proceeding without mode-specific .env
[READ_APP_CONFIG] 
Error: Cannot find module './expo-config-plugin/dist'
Require stack:
- /private/var/folders/tg/1gc5phxj45zfmy1kdmxd4mp80000gn/T/eas-build-local-nodejs/90901ce4-df48-4916-bc22-b454c21b6ebc/build/packages/react-native-sdk/app.plugin.js
- /Users/sultanmyrza/.npm/_npx/a4ff5c16beb6b833/node_modules/@expo/config-plugins/build/utils/plugin-resolver.js
- /Users/sultanmyrza/.npm/_npx/a4ff5c16beb6b833/node_modules/@expo/config-plugins/build/plugins/withStaticPlugin.js
- /Users/sultanmyrza/.npm/_npx/a4ff5c16beb6b833/node_modules/@expo/config-plugins/build/plugins/withPlugins.js
- /Users/sultanmyrza/.npm/_npx/a4ff5c16beb6b833/node_modules/@expo/config-plugins/build/index.js
- /Users/sultanmyrza/.npm/_npx/a4ff5c16beb6b833/node_modules/@expo/build-tools/dist/android/expoUpdates.js
- /Users/sultanmyrza/.npm/_npx/a4ff5c16beb6b833/node_modules/@expo/build-tools/dist/utils/expoUpdates.js
- /Users/sultanmyrza/.npm/_npx/a4ff5c16beb6b833/node_modules/@expo/build-tools/dist/builders/android.js
- /Users/sultanmyrza/.npm/_npx/a4ff5c16beb6b833/node_modules/@expo/build-tools/dist/builders/index.js
- /Users/sultanmyrza/.npm/_npx/a4ff5c16beb6b833/node_modules/@expo/build-tools/dist/index.js
- /Users/sultanmyrza/.npm/_npx/a4ff5c16beb6b833/node_modules/eas-cli-local-build-plugin/dist/build.js
- /Users/sultanmyrza/.npm/_npx/a4ff5c16beb6b833/node_modules/eas-cli-local-build-plugin/dist/main.js
- /Users/sultanmyrza/.npm/_npx/a4ff5c16beb6b833/node_modules/eas-cli-local-build-plugin/bin/run
    at Function._resolveFilename (node:internal/modules/cjs/loader:1225:15)
    at Function._load (node:internal/modules/cjs/loader:1055:27)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.require (node:internal/modules/cjs/loader:1311:12)
    at require (node:internal/modules/helpers:136:16)
    at Object.<anonymous> (/private/var/folders/tg/1gc5phxj45zfmy1kdmxd4mp80000gn/T/eas-build-local-nodejs/90901ce4-df48-4916-bc22-b454c21b6ebc/build/packages/react-native-sdk/app.plugin.js:1:18)
    at Module._compile (node:internal/modules/cjs/loader:1554:14)
    at Object..js (node:internal/modules/cjs/loader:1706:10)
    at Module.load (node:internal/modules/cjs/loader:1289:32)

Build failed
Unknown error. See logs of the Read app config build phase for more information.

My Environment

  System:
    OS: macOS 15.5
    CPU: (8) arm64 Apple M1 Pro
    Memory: 1.46 GB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
    Yarn: 4.9.1 - ~/.nvm/versions/node/v22.14.0/bin/yarn
    npm: 11.4.1 - ~/.nvm/versions/node/v22.14.0/bin/npm
    pnpm: 10.7.0 - ~/.nvm/versions/node/v22.14.0/bin/pnpm
    bun: 1.2.7 - ~/.bun/bin/bun

[santhoshvai]

@sultanmyrza we havent tried with eas build.

But, we do support CNG.

You can see that by running yarn prebuild in the ringing-tutorial and see the native folder being created. Then run yarn ios or yarn android in the ringing-tutorial as required.

I think eas is not looking correctly at the expo config plugin build folder. The folder ./expo-config-plugin/dist should have been created in your end after you did yarn build:all.

you can alernatively, create a copy of the ringing-tutorial outside of this yarn workspace and replace the workspace dependency versions in package.json with its own latest versions from npm and then try eas local build.

[sultanmyrza]

Thanks for the suggestion @santhoshvai — I’ll give it a try.

Ideally, it would be great if get-stream worked out of the box with EAS Build. The main advantage of EAS Build is not having to touch native code, letting it handle things like notifications. As soon as I move away from EAS Build, I have to manually configure native code, and if Android introduces changes, I need to follow migration guides myself. EAS Build could take care of all that if I stayed within its ecosystem.

Anyway, thanks again for the hint — hopefully the sample will work with EAS Build out of the box.

[santhoshvai]

About The main advantage of EAS Build is not having to touch native code,

We already handle it through our expo config plugin and you can see yarn prebuild. EAS build is an external building service. I am just mentioning to build on your own in this repo instead of EAS here. You do not need to touch native code at any point.

Alteady by moving to your own folder outside of our workspace, you can support EAS build as I mentioned before