Skip to content
A demo chat app built with React Native and Chatkit which has the following features: Public and private chat rooms, roles & permissions, typing indicators, read receipt, file upload (with image, video, and audio file previews), show online and offline users
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
server add code for the demo chat Apr 7, 2019
src add code for the demo chat Apr 7, 2019
.buckconfig add starter code Apr 7, 2019
.editorconfig add starter code Apr 7, 2019
.env add starter code Apr 7, 2019
.flowconfig
.gitattributes add starter code Apr 7, 2019
.gitignore add starter code Apr 7, 2019
.watchmanconfig add starter code Apr 7, 2019
App.js add starter code Apr 7, 2019
README.md update README May 28, 2019
Root.js add starter code Apr 7, 2019
app.json
babel.config.js add starter code Apr 7, 2019
index.js add starter code Apr 7, 2019
metro.config.js add starter code Apr 7, 2019
package.json add starter code Apr 7, 2019

README.md

RNChatkitDemo

A demo chat app built with React Native and Chatkit which has the following features:

  • Public and private chat rooms
  • Roles and permissions
  • Typing indicators
  • Read receipt
  • File uploads
  • Show online and offline users

You can read the full tutorial at: Build a demo chat app with React Native and Chatkit

Prerequisites

Getting Started

  1. Clone the repo:
git clone https://github.com/anchetaWern/RNChatkitDemo.git
cd RNChatkitDemo
  1. Install the app dependencies:
yarn
  1. Eject the project (re-creates the ios and android folders):
react-native eject
  1. Link the packages:
react-native link react-native-gesture-handler
react-native link react-native-permissions
react-native link react-native-document-picker
react-native link react-native-fs
react-native link react-native-config
react-native link react-native-vector-icons
react-native link rn-fetch-blob
  1. Update android/app/build.gradle file:
apply from: "../../node_modules/react-native/react.gradle"

// add these:
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
  1. Update android/app/src/main/AndroidManifest.xml to add permission to read from external storage:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.rnchatkitdemo">
  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  ...
</manifest>
  1. Update .env file with your Chatkit credentials.

  2. Set up the server:

cd server
yarn
  1. Update the server/.env file with your Chatkit credentials.

  2. Run the server:

yarn start
  1. Run ngrok:
./ngrok http 5000
  1. Update the src/screens/Login.js, src/screens/Group.js, and src/screens/Chat.js file with your ngrok https URL.

  2. Run the app:

react-native run-android
react-native run-ios
  1. Log in to the app on two separate devices (or emulator).

Built With

Donation

If this project helped you reduce time to develop, please consider buying me a cup of coffee :)

Buy Me A Coffee

You can’t perform that action at this time.