Skip to content

A multi-lingual React Native chat app with speech to text capabilities

Notifications You must be signed in to change notification settings

ARHASSANI/RNSpeakChat

 
 

Repository files navigation

RNSpeakChat

A multi-lingual React Native chat app with speech to text capabilities.

You can find the full tutorial at: https://pusher.com/tutorials/speech-text-react-native

Prerequisites

Getting Started

  1. Clone the repo:
git clone https://github.com/anchetaWern/RNSpeakChat.git
cd RNSpeakChat
  1. Install the app dependencies:
yarn install
  1. Re-create android and ios folders:
react-native eject
  1. Link native dependencies:
react-native link @react-native-community/async-storage
react-native link react-native-config
react-native link react-native-gesture-handler
react-native link react-native-vector-icons 
react-native link react-native-voice
  1. Add extra config (Android) for React Native Config on android/app/build.gradle:
// 2nd line, add a new apply:
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
  1. Install server dependencies:
cd server
yarn
  1. Add your Chatkit and Cognitive Services config on both app and server:
// .env
CHATKIT_INSTANCE_LOCATOR_ID="YOUR CHATKIT INSTANCE LOCATOR ID"
CHATKIT_SECRET_KEY="YOUR CHATKIT SECRET KEY"
CHATKIT_TOKEN_PROVIDER_ENDPOINT="YOUR CHATKIT TOKEN PROVIDER"
COGNITIVE_SERVICES_API_KEY="YOUR TRANSLATOR TEXT API KEY"
// server/.env
CHATKIT_INSTANCE_LOCATOR_ID="YOUR CHATKIT INSTANCE LOCATOR ID"
CHATKIT_SECRET_KEY="YOUR CHATKIT SECRET KEY"
  1. Run the server:
cd server
node server.js
./ngrok http 5000
  1. Update src/screens/Login.js file with your ngrok HTTPS URL:
const CHAT_SERVER = "YOUR NGROK HTTPS URL";
  1. Create a few users on your Chatkit app dashboard.

  2. Run the app:

react-native run-android
react-native run-ios

Built with

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%