Skip to content

Latest commit

 

History

113 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Stringee React Native Samples

React Native sample applications for integrating Stringee voice, video, live chat, and programmable chat features on Android and iOS.

Samples

Sample Language Description
CallSampleHook JavaScript One-to-one voice/video calls using StringeeCall and StringeeCall2, including token persistence, Android FCM/Notifee notifications, and iOS PushKit/CallKeep.
CallSampleHookTS TypeScript Typed version of the complete one-to-one call flow, including typed SDK listeners, call state, notification payloads, and native modules.
LiveChatSample JavaScript Live Chat integration with separate Customer and Agent flows.
StringeeChatSample JavaScript Programmable Chat operations for conversations, participants, messages, user information, typing state, and object-change events.

All four samples use stringee-react-native-v2 and React Native 0.72.3.

Requirements

  • Node.js 16 or newer and Yarn 1.x.
  • Android Studio, JDK 17, and an Android SDK supported by the selected sample.
  • Xcode and CocoaPods for iOS builds.
  • A Stringee project with the required Call, Live Chat, or Chat features enabled.
  • Access tokens generated by a trusted application server.
  • A Firebase project for Android incoming-call notifications.
  • A physical iOS device for complete PushKit/CallKeep incoming-call testing.

Never generate Stringee access tokens from an API secret inside a React Native application. API secrets must remain on a trusted server.

Project structure

Each directory is an independent React Native project with its own dependencies and native Android/iOS applications.

react-native-samples/
├── CallSampleHook/       # JavaScript Call and Call2 sample
├── CallSampleHookTS/     # TypeScript Call and Call2 sample
├── LiveChatSample/       # Customer and Agent Live Chat sample
└── StringeeChatSample/   # Programmable Chat API sample

Open only the selected sample directory in your editor, Android Studio, or Xcode. Do not install all projects as one monorepo.

Getting started

1. Open a sample

Clone this repository and enter the sample you want to run. For example:

git clone https://github.com/stringeecom/react-native-samples.git
cd react-native-samples/CallSampleHook

2. Install dependencies

yarn install

For iOS, install CocoaPods dependencies from the selected sample:

cd ios
pod install
cd ..

3. Create an access token

Generate a Stringee access token on your application server, then enter it in the sample application or replace the documented development placeholder.

See the Stringee authentication documentation for token creation and renewal requirements.

4. Configure notifications for call samples

Android

Register application ID com.callsamplehook in Firebase, download google-services.json, and place it at:

<CallSample>/android/app/google-services.json

Enable Firebase Cloud Messaging and configure the corresponding FCM credential in the Stringee dashboard. Grant microphone, camera, notification, Bluetooth, and full-screen call permissions when requested.

iOS

Select a development team and registered bundle identifier in Xcode. Enable Push Notifications and the Voice over IP, Remote notifications, and Audio background modes. Configure the corresponding APNs/VoIP credential in the Stringee dashboard.

Use a physical iOS device for incoming PushKit/CallKeep tests. The simulator can validate compilation, UI, and outgoing-call flows but does not provide the complete VoIP push lifecycle.

Build and run

Start Metro from the selected sample directory:

yarn start

Run Android or iOS from another terminal:

yarn android
# or
yarn ios

You can also open the sample's android/ directory in Android Studio or its .xcworkspace file in Xcode.

Call sample coverage

Both call applications expose four independent outgoing-call cases:

API Voice Video
StringeeCall Supported Supported
StringeeCall2 Supported Supported

The shared architecture demonstrates:

  • Access-token persistence, automatic reconnection, push registration, and logout cleanup.
  • A single active-call model shared by Call and Call2.
  • Listener installation before call setup and response-aware call transitions.
  • Idempotent Answer, Reject, Hangup, and terminal-state cleanup.
  • Android foreground, background, and cold-start FCM/Notifee handling.
  • Android incoming-call full-screen notifications and an active-call microphone foreground service.
  • iOS PushKit delivery before the React Native bridge is ready and CallKeep event reconciliation after JavaScript starts.
  • Stringee-style home, incoming, outgoing, voice-call, and video-call views.

See the sample-specific documentation for setup and implementation details:

Chat sample coverage

LiveChatSample demonstrates separate Customer and Agent entry points for a Live Chat session.

StringeeChatSample demonstrates:

  • Connecting a StringeeClient and handling client events.
  • Creating, loading, and updating conversations.
  • Adding, removing, and updating participants.
  • Sending, loading, editing, deleting, and revoking messages.
  • Loading and updating user information.
  • Typing indicators and conversation/message object-change callbacks.

Both chat projects use a compatibility wrapper that exposes their original sample callbacks while delegating to the Promise-based stringee-react-native-v2 API. See the sample-specific setup and token configuration:

Validate a sample

Run the commands supported by the selected project:

yarn lint
yarn test --runInBand --watchman=false

The TypeScript call sample also supports:

yarn typecheck

Build the Android debug application:

cd android
./gradlew app:assembleDebug

For iOS, build the application scheme from its .xcworkspace. End-to-end notification and media validation requires two different Stringee users and physical Android/iOS devices.

Repository safety

Do not commit:

  • Stringee access tokens, API secrets, or server private keys.
  • Signing keystores, passwords, provisioning profiles, or private APNs keys.
  • Machine-specific development paths or dependency overrides.

Firebase configuration files contain project identifiers and client API keys, not Stringee server secrets. Whether they are committed should still follow the owning Firebase project's repository policy.

Documentation

About

No description, website, or topics provided.

Resources

Stars

11 stars

Watchers

0 watching

Forks

Releases

Packages

Used by

Contributors

Languages