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
- Clone the repo:
git clone https://github.com/anchetaWern/RNChatkitDemo.git cd RNChatkitDemo
- Install the app dependencies:
- Eject the project (re-creates the
- 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
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"
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>
.envfile with your Chatkit credentials.
Set up the server:
cd server yarn
server/.envfile with your Chatkit credentials.
Run the server:
- Run ngrok:
./ngrok http 5000
src/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 :)