React Native CommandBar

Assistant & Resource Center in React Native

Warning

CommandBar is now part of Amplitude. This repository has been updated to help existing CommandBar customers migrate to Amplitude Resource Center & Assistant, but it should be treated as deprecated and will not receive updates. For those migrating from CommandBar/CommandAI, please see our migration guide

About

React Native CommandBar was built as a wrapper around CommandBarIOS and CommandBarAndroid repos and uses both as dependencies.

The Help Hub WebView loads the standalone Amplitude Guides & Surveys script (*.engagement.js), then init + boot. Pass your Amplitude project API key as apiKey in CommandBarOptions.

Available CommandBarOptions fields (all but apiKey are optional):

• apiKey: Amplitude project API key (required)
• user: { userId?, deviceId? } — passed to engagement.boot
• userId: flat shorthand for user: { userId }
• serverZone: 'US' (default), 'EU', or 'local'
• serverUrl, cdnUrl, chatUrl, mediaUrl, locale: forwarded to engagement.init
• spinnerColor: CSS color for the loading spinner
• fontFamilies: string[] of Google Font families to preload (e.g. ['Roboto']) — see Custom theme fonts

Installation

Minimum iOS Version: 13.0 Minimum Android Version: 28

yarn add @commandbar/react-native

npm install @commandbar/react-native

Usage

Run the Example App

1. Clone the repo: git clone https://github.com/tryfoobar/react-native-commandbar && cd react-native-commandbar
2. Install dependencies: yarn
3. Run the example: yarn example ios or yarn example android

Boot the SDK

Boot once at app start. The booted options are reused by every subsequent openResourceCenter / openAssistant call.

import{useEffect}from'react';import{CommandBar}from'@commandbar/react-native';exportdefaultfunctionApp(){useEffect(()=>{CommandBar.boot({apiKey: 'your_api_key'});},[]);// ...}

Call CommandBar.boot(...) again at any time to swap options (e.g. after the user signs in).

Open Resource Center Bottom Sheet

import{Button,View}from'react-native';import{CommandBar}from'@commandbar/react-native';constMyComponent=()=>{return(<View><Buttontitle="Open"onPress={()=>CommandBar.openResourceCenter()}/></View>);};

Open Resource Center Bottom Sheet to a specific Article

import{Button,View}from'react-native';import{CommandBar}from'@commandbar/react-native';constMyComponent=()=>{return(<View><Buttontitle="Open Support Article"onPress={()=>CommandBar.openResourceCenter(123456)}/></View>);};

Close the Sheet Programmatically

Both methods dismiss whichever engagement sheet (Resource Center or Assistant) is currently presented — they're aliases provided for API symmetry with open*. Both are no-ops when nothing is presented.

import{CommandBar}from'@commandbar/react-native';CommandBar.closeResourceCenter();CommandBar.closeAssistant();

A common pattern is dismissing from a fallback action callback:

CommandBar.openAssistant((action)=>{console.log('Fallback triggered:',action);CommandBar.closeAssistant();});

Tag filters

Set filters before or after opening the sheet. Latest values apply on each WebView load and immediately when the sheet is open.

import{CommandBar}from'@commandbar/react-native';CommandBar.setAssistantFilter({tags: ['[Zendesk] mobile']});CommandBar.setResourceCenterFilter({and: [{tags: ['[Zendesk] mobile']},{or: [{tags: ['[Zendesk] v2']},{tags: ['[Zendesk] v3']}]},],});CommandBar.setAssistantFilter(null);CommandBar.setResourceCenterFilter(null);

Custom theme fonts

The Resource Center / Assistant render inside a WebView that has no host page, so a theme that uses a non-system (Google) font only renders correctly if that font is fetched inside the WebView. Pass the font family names your Engagement theme uses via fontFamilies to ensure they're preloaded

import{CommandBar}from'@commandbar/react-native';CommandBar.boot({apiKey: 'your_api_key',fontFamilies: ['Roboto'],// any Google Font(s) your theme uses});

If omitted, the WebView still attempts to auto-detect and load the theme's font at runtime.

Render a Resource Center View

import{Button,View}from'react-native';constMyComponent=()=>{return(<Viewstyle={{flex: 1}}><ResourceCenterViewoptions={{apiKey: 'your_api_key'}}/></View>);};

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library