Skip to content

FIrebase backend chat / messaging app (Chat Room + Personal i.e one to one ) with push notification in react native with user sign in/up for personal and anonymous for Global Chat with pusing user to Friendlist for the user to choose friend to chat with. Youtube:

License

Notifications You must be signed in to change notification settings

aryaminus/RN-firechat

Repository files navigation

RnFireChat

RnFireChat is the 5th session build for showing the implementation of Firebase for building a Chat app; both Chat Room and p2p along with serverless function for push notification.

RnFireChat demo

In this master branch, we'll be using the built layout from PersonalChat branch where we will be working to building push notification using Firebase Cloud Functions using my other repository:

RN-firechat-functions

Also, we will be working on generating release apk so that it can be used within diferent devices.

Todos

  • Configuring firebase-messaging to subscribe to particular 1 to 1 chat
  • Making the UI of Boiler.js more enhanced and material
  • Adding file exchange i.e sending and receiving files between the user
  • Adding avatar to the user profile

Note:

  1. Arch Linux with VS-Code, thus support focused on Android App
  2. Extensions: React Native Tools , React-Native Snippets , Prettier
  3. Device run instead of SDK-build using Vysor

Installation

Clone the source locally:

$ git clone https://github.com/aryaminus/RN-firechat
$ cd RN-firechat

Start the application in development mode

npm install
react-native link
react-native run android

or for VS-Code:

npm install
react-native link

then press F1 or Fn+F1 and React Native:Run Android on Device

Else Follow Code.txt and Youtube

We will be using Signin and Signup screen ie. 3rd session

Packages:

  1. react-navigation
  2. react-native-loading-spinner-overlay
  3. react-native-firebase
  4. react-native-gifted-chat
  5. Invertase Firebase initial setup
  6. Original drmas Friendlist layout
  7. Generate Signed APK

Additional Links:

There is an update put up by invertase for a react-native-firebase-starter pre-integrated so you can get started quickly.

Installation

Follow Code.txt and Working.png

Major Properties:

  • Use the template of GloChat branch for anon login and geting inside Global ChatRoom
  • Usage of invertase firebase instead of original firebase package as it is built for web but therefore Firebase will run on the native thread for invertase
  • Request permission is needed for new newer devices both android and ios and subscribe and unsubscribe will just look in the child database in firebase to fetch push notification from cloud server
  • If choose Friendlist.js show a vertical ListView of users linked in 'friends' with geeting progile pic from gavatar
  • When certain user is clicked, send the rowdata value ie receiver ID and genetare certain Chat ID with user and Friend ID and iside the databse of chatID, show the Gifted Chat to send and receive text

Working demo

Contributing

  1. Fork it (https://github.com/aryaminus/RN-firechat/fork)
  2. Create your feature branch (git checkout -b feature/fooBar)
  3. Commit your changes (git commit -am 'Add some fooBar')
  4. Push to the branch (git push origin feature/fooBar)
  5. Create a new Pull Request