release React Native demo application (#104)

.github/workflows/reactnative-node-ci.yml

@@ -0,0 +1,51 @@
+name: React Native Chat CI
+#   - Install, lint, test, and build production Expo application 
+#   - Runs only on changes to connectReactNativeChat/ folder
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [ master ]
+    paths: 'connectReactNativeChat/**'
+  pull_request:
+    branches: [ master ]
+    paths: 'connectReactNativeChat/**'
+
+jobs:
+  build:
+    runs-on: macos-12
+    strategy:
+      matrix:
+        node-version: [16.x] # 18.x, 19.x
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+    defaults:
+      run:
+        working-directory: ./connectReactNativeChat
+
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Install Expo app dependencies
+      run: yarn
+
+    - run: yarn lint
+
+    - name: Create endpoint.js config
+      run: |
+        cp endpoints.sample.js endpoints.js || echo "no endpoint.sample.js found"
+
+    - run: yarn test
+
+    - name: Create app.json config
+      run: |
+        rm app.json || echo "no app.json found, creating new"
+        cp app.prod.json app.json
+
+    - name: Build the Expo application
+      run: CI=1 npx expo prebuild --platform all
+

CHANGELOG.md

@@ -3,6 +3,10 @@
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.4.0] - 2023-3-29
+### Changed
+- Connect React Native Chat - initial release of cross-platform Amazon Connect Chat solution
+
 ## [1.3.3] - 2023-2-21
 ### Changed
 - Custom Chat Widget - Support Custom Chat Duration

README.md

@@ -20,6 +20,9 @@ At the moment, these are the solutions in this repo:
 5. **[customChatWidget](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/customChatWidget)**
    Custom Chat Widget for Amazon Connect, with a Chat Form that can be easily plugged into a webpage. This solution helps customers to have Amazon Connect Custom Chat Widget in their website, by applying simple configuration parameters. It also makes customizing the `amazon-connect-interface.js` file easier, and can be used as an easy way to host custom widget on a webpage.
 
+6. **[connectReactNativeChat](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/connectReactNativeChat)**
+   React Native demo Chat application for Amazon Connect. This cross-platform solution implements basic Chat JS functionality and is fully customizable. Follow the provided documentation to build with [`amazon-connect-chatjs@^1.5.0`](https://github.com/amazon-connect/amazon-connect-chatjs).
+
 ## Resources
 
 Here are a few resources to help you implement chat in your contact center:

connectReactNativeChat/.eslintrc

@@ -0,0 +1,41 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    },
+    "extends": [
+        "plugin:react/recommended"
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "react/prop-types": "off",
+        "global-require": 0
+    },
+    "ignorePatterns": [
+        "assets",
+        "ios",
+        "android"
+    ],
+    "overrides": [
+        {
+            "files": [
+                "**/*.test.js",
+                "**/*.test.jsx"
+            ],
+            "env": {
+                "jest": true
+            }
+        }
+    ]
+}

connectReactNativeChat/.gitignore

@@ -0,0 +1,23 @@
+node_modules
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+
+endpoints.js
+yarn-error.log
+.dev
+android
+ios

connectReactNativeChat/.husky/.gitignore

@@ -0,0 +1 @@
+_

connectReactNativeChat/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

connectReactNativeChat/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 120
+}

connectReactNativeChat/App.js

@@ -0,0 +1,67 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: MIT-0
+
+import React from "react";
+import { View, Image } from "react-native";
+import { createStackNavigator } from "@react-navigation/stack";
+import { NavigationContainer } from "@react-navigation/native";
+
+import ChatWrapper from "./src/components/ChatWrapper";
+import GiftedChatWidget from "./src/components/ChatWidget";
+import DebuggerWidget from "./src/components/DebuggerWidget";
+import ChatForm from "./src/components/ChatForm";
+
+import { LogBox } from "react-native";
+import { ENABLE_REACTNATIVE_LOGBOX } from "./config";
+if (!ENABLE_REACTNATIVE_LOGBOX) {
+  LogBox.ignoreAllLogs();
+}
+
+const ChatScreen = ({ navigation }) => {
+  return (
+    <ChatWrapper
+      navigation={navigation}
+      ChatWidgetComponent={GiftedChatWidget}
+    />
+  );
+};
+
+const HomeScreen = ({ navigation }) => (
+  <View
+    style={{
+      flex: 1,
+      alignItems: "center",
+      padding: 10,
+      marginTop: 100,
+    }}
+  >
+    <Image
+      source={require("./assets/connect.png")}
+      style={{
+        height: 90,
+        width: 100,
+        padding: 10,
+      }}
+      alt="Connect logo"
+    />
+
+    <ChatForm openChatScreen={() => navigation.navigate("Chat")} />
+
+    <DebuggerWidget />
+  </View>
+);
+
+const Stack = createStackNavigator();
+
+const App = () => {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator initialRouteName="Home">
+        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen name="Chat" component={ChatScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+};
+
+export default App;