react-native-zendesk-unified v0.0.1-alpha.0

Library Under Construction – Do Not Use Yet 🚧

I'm currently working on this library, even though it is already working, it's not yet fully usable as there will be breaking changes coming soon. If you want to help, feel free to open a PR! Testing the alpha version is also very welcome.

See the Supported Zendesk SDKs and Methods section for more information of what is currently supported and what is coming soon.

It is part of my journey to learn how to create native modules for React Native. So it might take a while to get it to a stable state (or maybe I'll never get there, who knows 🤷‍♂️).

react-native-zendesk-unified

React Native wrapper for the iOS and Android Zendesk SDKs (Chat, Support & Answer Bot)

Installation

npm install react-native-zendesk-unified

iOS

Install the pods:

cd ios && pod install

Android

Add the following to your android/app/build.gradle file:

repositories {
  maven {
    url 'https://zendesk.jfrog.io/zendesk/repo'
  }
}

Usage

import { useEffect } from 'react';
import { Button, Text } from 'react-native';
import {
  useZendesk,
  ZendeskProvider,
  ZendeskConfig,
} from 'react-native-zendesk-unified';

const zendeskConfig: ZendeskConfig = {
  appId: 'YOUR_ZENDESK_APP_ID',
  clientId: 'YOUR_ZENDESK_CLIENT_ID',
  zendeskUrl: 'YOUR_ZENDESK_URL',
};

export function App() {
  return (
    <ZendeskProvider zendeskConfig={zendeskConfig}>
      <MyComponent />
    </ZendeskProvider>
  );
}

function MyComponent() {
  const zendesk = useZendesk();

  const openHelpCenter = async () => {
    try {
      await zendesk.openHelpCenter({
        labels: ['test'],
        groupType: 'section',
        groupIds: [15138052595485],
      });
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    zendesk.changeTheme('#3f2b96');
    zendesk.setAnonymousIdentity({
      email: 'info@mateoguzman.net',
      name: 'Mateo Guzmán',
    });
  }, []);

  return (
    <>
      <Text>{zendesk.healthCheck()}</Text>

      <Button onPress={openHelpCenter} title="Open Help Center" />
    </>
  );
}

If you are not using React hooks, or you need to instantiate the Zendesk class in a different way (for example in a utility function or another context outside React), you can do so like this:

import { useEffect } from 'react';
import { Button, Text } from 'react-native';
import { Zendesk, ZendeskConfig } from 'react-native-zendesk-unified';

const zendeskConfig: ZendeskConfig = {
  appId: 'YOUR_ZENDESK_APP_ID',
  clientId: 'YOUR_ZENDESK_CLIENT_ID',
  zendeskUrl: 'YOUR_ZENDESK_URL',
};
const zendesk = new Zendesk(zendeskConfig);

export function App() {
  const openHelpCenter = async () => {
    try {
      await zendesk.openHelpCenter({
        labels: ['test'],
        groupType: 'section',
        groupIds: [15138052595485],
      });
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    zendesk.changeTheme('#3f2b96');
    zendesk.setAnonymousIdentity({
      email: 'info@mateoguzman.net',
      name: 'Mateo Guzmán',
    });
  }, []);

  return (
    <>
      <Text>{zendesk.healthCheck()}</Text>

      <Button onPress={openHelpCenter} title="Open Help Center" />
    </>
  );
}

API Documentation

All the methods are documented in the API documentation.

The naming convention is very similar to the official Zendesk SDKs, so you can check the iOS and Android documentation for more information.

There are some things that are not possible to do using only React Native, so you might need to do some native coding to achieve them. For example, to change the theme colors on Android, you need to create a custom theme in your native Android project.

Another example is the localization, which can be overridden by setting the localizable strings for both iOS and Android in your native projects.

Supported Zendesk SDKs and Methods

Any questions about any specific implemention? Feel free to open an issue!

Demo App

You can check the Zendesk demo app to see how to use the library in a real app.

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