diff --git a/.gitignore b/.gitignore index 4f2b318..d6294a3 100644 --- a/.gitignore +++ b/.gitignore @@ -24,8 +24,8 @@ project.xcworkspace # Android/IntelliJ # -CometChatWorkspace/cometchat-app/android/app/build/ -CometChatWorkspace/ios/Pods +cometchat-app/android/app/build/ +ios/Pods cometchat-app/android/app/build/ /android/app/build/ /app/build/ @@ -48,7 +48,8 @@ yarn.lock # include if you are using yarn - don't use both npm and yarn buck-out/ \.buckd/ # *.keystore -!CometChatWorkspace/cometchat-app/android/app/debug.keystore +!cometchat-app/android/app/debug.keystore +!cometchat-app/android/app/my-upload-key.keystore # Fastlane # @@ -62,10 +63,35 @@ buck-out/ */fastlane/screenshots # Pods -CometChatWorkspace/cometchat-app/ios/Pods/ +cometchat-app/ios/Pods/ cometchat-app/ios/Pods/ /ios/Pods/ ios/Pods/* # Bundle artifact *.jsbundle + +# Build file for ui-kit +cometchat-pro-react-native-ui-kit-1.0.0.tgz + +# Logs +*.log +npm-debug.log + +# Runtime data +tmp +build +lib + +# Dependency directory +node_modules +*.DS_Store +example/development2 +example/development +# Build file for local testing +cometchat-pro-react-native-ui-kit-1.0.0.tgz +package-lock.json +Pods +.idea +.gradle +vendor \ No newline at end of file diff --git a/App.tsx b/App.tsx index 102b726..ff541c4 100644 --- a/App.tsx +++ b/App.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef, useState } from 'react'; -import { PermissionsAndroid, Platform, SafeAreaView, StatusBar, Text } from 'react-native'; +import { PermissionsAndroid, Platform, SafeAreaView, StatusBar, StyleSheet, View } from 'react-native'; import { CometChat } from "@cometchat/chat-sdk-react-native"; import { AppConstants } from './AppConstants'; import { CometChatContextProvider, CometChatLocalize } from '@cometchat/chat-uikit-react-native'; @@ -80,33 +80,42 @@ const App = () => { }, []); return ( - - - { - callRecevied && - { - setCallReceived(false) - }} - incomingCallStyle={{ - backgroundColor: 'white', - titleColor: 'black', - subtitleColor: 'gray', - titleFont: { - fontSize: 20, - fontWeight: 'bold' - } - }} - /> - } - - - - - - + + + + { + callRecevied && + { + setCallReceived(false) + }} + incomingCallStyle={{ + backgroundColor: 'white', + titleColor: 'black', + subtitleColor: 'gray', + titleFont: { + fontSize: 20, + fontWeight: 'bold' + } + }} + /> + } + + + + + + + ); }; +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: "#fff" + } +}) + export default App; diff --git a/README.md b/README.md index 7e1e804..e324505 100644 --- a/README.md +++ b/README.md @@ -2,63 +2,60 @@ CometChat

-# iOS Sample App by CometChat +# React Native Sample App by CometChat -This reference application showcases the integration of [**CometChat's React Native UI Kit**](https://www.cometchat.com/docs/v4/react-native-uikit/overview) within an React Native framework. It provides developers with examples of implementing real-time messaging and voice and video calling features in their react native based applications. +This is a reference application showcasing the integration of [**CometChat's React Native UI Kit**](https://www.cometchat.com/docs/v4/react-native-uikit/overview) in React Native. It offers developers practical examples for incorporating real-time messaging, as well as voice and video calling functionalities, into their React Native based applications. ## Prerequisites -- Visual Studio Code or any other IDE. -- For iOS: - - XCode - - pod (CocoaPods) - - An iOS device or emulator with iOS 12.0 or above. -- For Android: - - Android Studio - - Android device or emulator with Android version 5.0 or above. -- Sign up for a [CometChat](https://app.cometchat.com/) account to get your app credentials: _`App ID`_, _`Region`_, and _`Auth Key`_ +- Ensure that you have React Native development environment set up. + - Follow instructions for your environment at https://reactnative.dev/docs/environment-setup +- Sign up for a [CometChat](https://app.cometchat.com/) account to get your app credentials: _`App ID`_, _`Region`_, and _`Auth Key`_ ## Installation -1. Clone the repository: - ``` - git clone https://github.com/cometchat/cometchat-sample-app-react-native.git - ``` -2. Install dependencies - ```sh - yarn install - ``` - -3. Enter your CometChat _`App ID`_, _`Region`_, and _`Auth Key`_ in the [AppConstants.ts](./AppConstants.ts) file: - ```typescript - export const AppConstants = { - APP_ID: 'APP_ID', // Enter your App ID - REGION: 'REGION', // Enter your App Region - AUTH_KEY: 'AUTH_KEY', // Enter your App Auth Key - } - ``` - -4. For iOS, install dependencies after navigating to ios : - ```sh - cd ios - pod install - ``` - -5. Run the app on a device or emulator from the repo root. - ```sh - yarn start - yarn run android - yarn run ios - ``` - -
- login -
- - +1. Clone the repository: + - Using HTTPS + ``` + git clone https://github.com/cometchat/cometchat-sample-app-react-native.git + ``` + - Using SSH + ``` + git clone git@github.com:cometchat/cometchat-sample-app-react-native.git + ``` +2. Navigate to the cloned directory: + ``` + cd cometchat-sample-app-react-native + ``` +3. Install dependencies: + ``` + npm install + ``` +4. For iOS, install dependencies after navigating to ios: + ```sh + cd ios + pod install + ``` +5. Enter your CometChat _`App ID`_, _`Region`_, and _`Auth Key`_ in the [src/AppConstants.ts](https://github.com/cometchat/cometchat-sample-app-react-native/blob/v4/AppConstants.ts) file: + https://github.com/cometchat/cometchat-sample-app-react-native/blob/f7d4945414da14405f5dece975c8cf43926b01c7/AppConstants.ts#L1-L5 +6. Run the app on a device or emulator from the repo root. + ```sh + npm start + npm run android + npm run ios + ``` + + + + + + +
+ login + + login +
## Help and Support -For issues running the project or integrating with our UI Kits, consult our [documentation](https://www.cometchat.com/docs/react-native-uikit/integration) or create a [support ticket](https://help.cometchat.com/hc/en-us) or seek real-time support via the [CometChat Dashboard](http://app.cometchat.com/). + +For issues running the project or integrating with our UI Kits, consult our [documentation](https://www.cometchat.com/docs/vue-uikit/integration) or create a [support ticket](https://help.cometchat.com/hc/en-us) or seek real-time support via the [CometChat Dashboard](http://app.cometchat.com/). diff --git a/Screenshots/constants.png b/Screenshots/constants.png deleted file mode 100644 index 4f3e5cf..0000000 Binary files a/Screenshots/constants.png and /dev/null differ diff --git a/Screenshots/login-android.png b/Screenshots/login-android.png new file mode 100644 index 0000000..7145df2 Binary files /dev/null and b/Screenshots/login-android.png differ diff --git a/Screenshots/main.png b/Screenshots/main.png deleted file mode 100644 index 3a1775a..0000000 Binary files a/Screenshots/main.png and /dev/null differ diff --git a/package.json b/package.json index f971c64..95ce36d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cometchat-chat-sample-app-react-native", - "version": "4.3.0", + "version": "4.3.2", "license": "SEE LICENSE IN LICENSE.md", "private": true, "scripts": { @@ -13,8 +13,8 @@ "dependencies": { "@cometchat/calls-sdk-react-native": "^4.0.4", "@cometchat/chat-sdk-react-native": "^4.0.6", - "@cometchat/chat-uikit-react-native": "^4.3.0", - "@react-native-async-storage/async-storage": "1.17.10", + "@cometchat/chat-uikit-react-native": "^4.3.2", + "@react-native-async-storage/async-storage": "1.23.1", "@react-native-clipboard/clipboard": "^1.13.2", "@react-native-community/cli-platform-android": "^8.0.5", "@react-native-community/datetimepicker": "^7.6.2",