Add a new expo app for react native (#188)

* added expo app

* Added README

* removed app id

* removed android and ios folders

* pr review

* added minimum deployment target for ios

* install expo-system-ui

sandboxes/IntercomExpo/.gitignore

@@ -0,0 +1,39 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# android and iOS folders
+android/
+ios/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

sandboxes/IntercomExpo/App.js

@@ -0,0 +1,69 @@
+import React, { useEffect } from 'react';
+import { StatusBar } from 'expo-status-bar';
+import {
+  StyleSheet,
+  AppState,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import Intercom, { Visibility } from '@intercom/intercom-react-native';
+import { useIntercom } from './useIntercom';
+import { styles } from './App.styles';
+
+export default function App() {
+  useEffect(() => {
+    const subscription = AppState.addEventListener(
+      'change',
+      (nextStatus) => nextStatus === 'active' && Intercom.handlePushMessage()
+    );
+    return subscription.remove;
+  }, []);
+
+  useEffect(() => {
+    (async () => {
+      await Intercom.setLauncherVisibility(Visibility.VISIBLE);
+    })();
+  }, []);
+
+  const {
+    handleLoginIdentifiedUser,
+    handleLoginUnidentifiedUser,
+    handleLogout,
+    setUserIdentifier,
+    isLoggedIn,
+  } = useIntercom();
+
+  return (
+    <View style={styles.screenWrapper}>
+      <Text style={styles.title}>Push Notifications Sandbox</Text>
+      <View style={styles.wrapper}>
+        {!isLoggedIn ? (
+          <>
+            <TextInput style={styles.input} onChangeText={setUserIdentifier} />
+            <TouchableOpacity
+              style={styles.button}
+              onPress={handleLoginIdentifiedUser}
+            >
+              <Text style={styles.buttonText}>Login Identified User</Text>
+            </TouchableOpacity>
+
+            <View style={styles.divider} />
+
+            <TouchableOpacity
+              style={styles.button}
+              onPress={handleLoginUnidentifiedUser}
+            >
+              <Text style={styles.buttonText}>Login Unidentified User</Text>
+            </TouchableOpacity>
+          </>
+        ) : (
+          <TouchableOpacity style={styles.button} onPress={handleLogout}>
+            <Text style={styles.buttonText}>Logout</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+    </View>
+  );
+}

sandboxes/IntercomExpo/App.styles.js

@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  screenWrapper: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    position: 'absolute',
+    top: '25%',
+    fontWeight: 'bold',
+    fontSize: 20,
+  },
+  wrapper: {
+    width: '50%',
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: 'rgba(0,0,80,0.2)',
+    backgroundColor: '#f3f8ff',
+    paddingVertical: 10,
+    fontSize: 18,
+    marginBottom: 10,
+  },
+  button: {
+    backgroundColor: '#7284c5',
+    paddingVertical: 13,
+    alignItems: 'center',
+  },
+  buttonText: {
+    color: '#fff',
+  },
+  divider: {
+    marginVertical: 18,
+    borderWidth: 0.5,
+    borderColor: '#5757ca',
+  },
+});

sandboxes/IntercomExpo/App.utils.js

@@ -0,0 +1,3 @@
+import { MMKVLoader } from 'react-native-mmkv-storage';
+
+export const storage = new MMKVLoader().initialize();

sandboxes/IntercomExpo/README.md

@@ -0,0 +1,73 @@
+# Intercom React Native Expo Sandbox
+
+# Setup
+
+## Step 1: Install dependencies
+
+```shell
+# using npm
+npm install
+
+# OR using Yarn
+yarn install
+```
+
+## Step 2: Add your app id and api keys
+
+Go to `app.json` and replace the `appId`, `androidApiKey` and `iosApiKey` under `plugins`.
+You can also change the intercomRegion to US, EU or AU.
+Check our docs for a detailed explanation about these fields [here](https://developers.intercom.com/installing-intercom/react-native/installation/#using-intercom-with-expo)
+
+```shell
+"plugins": [
+      [
+        "@intercom/intercom-react-native",
+        {
+          "appId": "<app-id>",
+          "androidApiKey": "<android-api-key>",
+          "iosApiKey": "<ios-api-key>",
+          "intercomRegion": "US"
+        }
+      ]
+    ],
+```
+
+## Step 3: Prebuild the app
+
+```shell
+# using npx
+npx expo prebuild
+
+# OR using Yarn
+yarn expo prebuild
+```
+
+## Step 4: Run pod install
+
+Go to the `ios` folder and run pod install
+
+```shell
+npx pod install
+```
+
+## Step 5: Run the app
+
+### For Android
+
+```shell
+# using npm
+npx expo run:android
+
+# OR using Yarn
+yarn expo run:android
+```
+
+### For iOS
+
+```shell
+# using npm
+npx expo run:ios
+
+# OR using Yarn
+yarn expo run:ios
+```

sandboxes/IntercomExpo/app.json

@@ -0,0 +1,55 @@
+{
+  "expo": {
+    "plugins": [
+      [
+        "@intercom/intercom-react-native",
+        {
+          "appId": "<app-id>",
+          "androidApiKey": "<android-api-key>",
+          "iosApiKey": "<ios-api-key>",
+          "intercomRegion": "US"
+        }
+      ],
+      [ 
+        "expo-build-properties",
+        {
+          "ios": {
+            "deploymentTarget": "15.0"
+          }
+        }
+      ]
+    ],
+    "name": "IntercomExpo",
+    "slug": "IntercomExpo",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "io.intercom.ios.enterprise.sample"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "permissions": [
+        "android.permission.READ_EXTERNAL_STORAGE",
+        "android.permission.VIBRATE"
+      ],
+      "package": "com.intercom.sample"
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

sandboxes/IntercomExpo/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};