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
- React Native development environment
- Node.js
- Yarn
- Chatkit app instance
- ngrok account
- Clone the repo:
git clone https://github.com/anchetaWern/RNChatkitDemo.git
cd RNChatkitDemo
- Install the app dependencies:
yarn
- Eject the project (re-creates the
iosandandroidfolders):
react-native eject
- 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
- Update
android/app/build.gradlefile:
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"
- Update
android/app/src/main/AndroidManifest.xmlto 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>
-
Update
.envfile with your Chatkit credentials. -
Set up the server:
cd server
yarn
-
Update the
server/.envfile with your Chatkit credentials. -
Run the server:
yarn start
- Run ngrok:
./ngrok http 5000
-
Update the
src/screens/Login.js,src/screens/Group.js, andsrc/screens/Chat.jsfile with your ngrok https URL. -
Run the app:
react-native run-android
react-native run-ios
- Log in to the app on two separate devices (or emulator).
If this project helped you reduce time to develop, please consider buying me a cup of coffee :)
