expo-zendesk v0.0.1-alpha.0

Library Under Construction – Do Not Use Yet 🚧

I'm currently working on this library, so it's not yet fully usable. If you want to help, feel free to open a PR!

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 🤷‍♂️).

expo-zendesk

Unofficial React Native, Expo wrapper for the iOS and Android Zendesk SDKs

Installation

npm install expo-zendesk

Usage

import { useEffect } from "react";
import { Button, Text } from "react-native";
import {
  useExpoZendesk,
  ExpoZendeskProvider,
  ZendeskConfig,
} from "expo-zendesk";

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

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

function MyComponent() {
  const expoZendesk = useExpoZendesk();

  const openHelpCenter = async () => {
    try {
      await expoZendesk.openHelpCenter({
        labels: ["mobile", "app"],
        tags: ["iOS", "Android"],
        subject: "My app is having a problem!",
      });
    } catch (error) {
      console.log(error);
    }
  };

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

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

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

If you are not using React hooks, or you need to instantiate the ExpoZendesk 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 { ExpoZendesk, ZendeskConfig } from "expo-zendesk";

const zendeskConfig: ZendeskConfig = {
  appId: "YOUR_ZENDESK_APP_ID",
  clientId: "YOUR_ZENDESK_CLIENT_ID",
  zendeskUrl: "YOUR_ZENDESK_URL",
};
const expoZendesk = new ExpoZendesk(zendeskConfig);

export function App() {
  const openHelpCenter = async () => {
    try {
      await expoZendesk.openHelpCenter({
        labels: ["mobile", "app"],
        tags: ["iOS", "Android"],
        subject: "My app is having a problem!",
      });
    } catch (error) {
      console.log(error);
    }
  };

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

  return (
    <>
      <Text>{expoZendesk.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!

Contributing

Contributions are very welcome! Please refer to guidelines described in the contributing guide.

License

MIT