ethora-sample-react-native

Minimal sample app demonstrating @ethora/chat-component-rn — drop the SDK into a fresh Expo project, paste a JWT, get a working chat.

Pinned to SDK 26.5.4.

What it does

Two-screen flow, no router:

1. Setup — paste your Ethora baseUrl and JWT, confirm XMPP host fields.
2. Chat — renders <XmppProvider><Chat /></XmppProvider> with the config from screen 1.

That's it. Once you tap Connect, the SDK owns the rest — room list, room chat, media send/receive (image, video, audio, document), typing indicators, unread tracking, edits, replies, reactions. Use this app to smoke-test the SDK against your own Ethora deployment, or against the default chat.ethora.com cloud.

Prerequisites

• Node 18+
• Xcode 16+ (for iOS) / Android Studio with an emulator (for Android)
• Sign up at app.chat.ethora.com to get a JWT app token

Install

git clone https://github.com/dappros/ethora-sample-react-native.git
cd ethora-sample-react-native
npm install

About the Expo packages: starting with SDK 26.5.3, expo-av, expo-clipboard, expo-document-picker, expo-image-manipulator, expo-image-picker, and expo-media-library are declared as peerDependencies of the SDK (not as bundled transitive deps). They're listed in this sample's package.json so npm install pulls everything in one shot. If you're integrating the SDK into your own app instead, run npx expo install expo-av expo-clipboard expo-document-picker expo-image-manipulator expo-image-picker expo-media-library once (or only the ones you actually need — they're all optional).

Run

iOS

npm run ios

First run prebuilds the iOS project (ios/ directory) from app.json, installs CocoaPods, and launches the iOS simulator. Subsequent runs reuse the cached prebuild.

Android

npm run android

Boots an Android emulator (or attaches to a connected device), then builds and installs the dev app.

Expo Go (limited)

npm start

Expo Go works for the bare chat UI but won't load the native modules the SDK pulls in (push notifications, file system writes). For a full smoke test, use the prebuild flows above.

Configuration

The Setup screen exposes the five fields you need for the default Ethora cloud:

Field	Default	Notes
JWT	(empty)	App-level token from the Ethora dashboard. Passed as customAppToken and jwtLogin.token.
API base URL	https://api.chat.ethora.com/v1	REST endpoint. Change for self-hosted / QA.
XMPP WebSocket	wss://xmpp.chat.ethora.com/ws	XMPP socket.
XMPP host	xmpp.chat.ethora.com	Domain in JIDs / SASL.
XMPP MUC conference	conference.xmpp.chat.ethora.com	MUC subdomain.

To pin the app to a specific Ethora deployment, edit the DEFAULTS constant at the top of App.tsx.

What to smoke-test

A pass-checklist for verifying an SDK release:

• App boots without red-screen errors
• JWT auth succeeds — room list populates
• Send + receive text in an existing room
• Send + receive image (gallery + camera)
• Send + receive video (gallery + camera)
• Send + receive document (PDF, DOCX)
• Receive audio plays back
• Typing indicator visible on the other side
• Unread badge increments on background, clears on view
• iOS keyboard lifts the input cleanly
• Android keyboard opens without flicker
• tsc --noEmit in this project passes (npm run tsc)

The last item validates that the SDK ships clean .d.ts files — consumer's tsc should not descend into the SDK source.

Files

File	Role
App.tsx	Setup form → Chat mount. The only application code.
index.js	Expo registration. Polyfills crypto.getRandomValues and react-native-gesture-handler before anything that needs them.
app.json	Expo config: bundle ids, iOS privacy strings, Android permissions, plugin pre-build hooks.
package.json	Pins SDK + every peer dep at the version the SDK was built against.
babel.config.js	babel-preset-expo + react-native-worklets/plugin (required by react-native-reanimated v4 which the SDK uses for keyboard animation).
metro.config.js	Default Expo Metro config.
tsconfig.json	Strict mode + skipLibCheck: true — matches how a real RN consumer would set up.

Updating the SDK

npm install @ethora/chat-component-rn@latest

Then re-run npm run ios / npm run android. If the SDK bumped a peer dep, you may need to update the corresponding entry in package.json too — check the SDK's peerDependencies block.