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

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';

export default function App() {
  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';

const MyComponent = () => {
  return (
    <View>
      <Button title="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';

const MyComponent = () => {
  return (
    <View>
      <Button
        title="Open Support Article"
        onPress={() => CommandBar.openResourceCenter(123456)}
      />
    </View>
  );
};

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);

Render a Resource Center View

import { Button, View } from 'react-native';

const MyComponent = () => {
  return (
    <View style={{ flex: 1 }}>
      <ResourceCenterView options={{ 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