React Native Gifted Chat

N2988 Petra Lund
TTOW0615 Mobile Application Development - Research Assignment

Chat app using Gifted Chat, where users can create channels and chat with each other.
Because the chat needs authentication for different users, I started the development by creating login and register functions using Firebase Authentication. When user registers, new user is added to firebase authentication and to firebase database. When user logs in, the app then retrieves current users’ id from firebase authentication and username and email from database ‘users’-collection.

Next I created Chat screen where messages are in real time added to and retrieved from database ‘messages’-collection. Chat screen is created with Gifted Chat, where the minimal info you need is messages array, onSend-function, and current users’ information.

With Gifted Chat there are many customizable features, in example you can customize the message bubbles (renderBubble), you can decide if usernames are shown on messages (renderUsernameOnMessage), if send-button is shown all times (alwaysShowSend) or just when user has typed something which is default, and whether you want to show avatar for current user (showUserAvatar). There are also function callbacks for input text change, when message bubble is pressed and when user avatar is pressed, among other things.

I also created home screen in between login and chat, where user can join existing channels or create their own. Channels are added to firebase database ‘channels’-collection and chat messages are added and retrieved with ‘channel’-field that has the channels’ name. Navigation between screens is handled with React Navigation.

Watch Demo video: