Just another chat app for mobile devices built with React Native.
Table of Contents
- Build a chat app for mobile devices using React Native that provides users with a minimalistic chat interface and the possibility to share images and their location.
- As a new user, I want to be able to easily enter a chat room so I can quickly start talking to my friends and family.
- As a user, I want to be able to send messages to my friends and family members to exchange the latest news.
- As a user, I want to send images to my friends to show them what I’m currently doing.
- As a user, I want to share my location with my friends to show them where I am.
- As a user, I want to be able to read my messages offline so I can reread conversations at any time.
- As a user with a visual impairment, I want to use a chat app that is compatible with a screen reader so that I can engage with a chat interface.
- A page where users can enter their name and choose a background color for the chat screen before joining the chat.
- A page displaying the conversation, as well as an input field and submit button.
- The chat must provide users with two additional communication features: sending images and location data.
- Data gets stored online and offline.
The development of this application was organized through a Kanban board. You can see the board by following this link.
- async-storage
- expo
- firebase
- netinfo
- react
- react-native
- react-native-async-storage
- react-native-gifted-chat
- react-native-maps
- react-navigation
- babel
- eslint
To develop and test native apps with React Native, Facebook recommends using Expo.
Expo is an open-source platform for making universal native apps that run on Android, iOS, and the web. There are two tools that you need to develop apps with Expo: a command line app called Expo CLI to initialize and serve your project and a mobile client app called Expo Go to open it on iOS and Android. To install Expo CLI on your computer, you need to have previously installed Node.js (LTS release).
npm install --global expo-cli
If you want to test the app on a mobile device, you must also install the Expo Go application on the mobile device.
- Android Play Store (Android Lollipop and greater)
- OS App Store (iOS 11 and greater)
Install all dependencies listed in package.json in the local node_modules folder with the following npm command:
npm install
Once you have the project on your computer, and you have installed Expo CLI and all the dependencies, you can start using (and modifying) the project.
In order to use the cloud storage, you need to have a Firebase account and create a new project for the app. Once inside the new project created, you must enable authentication with at least the anonymous option activated, so that users can use the app. To do this, you must go to the "Authentication" option in the Firebase main menu.
To save the messages sent by users, you must create a collection in Cloud Firestore. To do this, you must go to the "Firestore Database" option in the Firebase main menu.
Finally, you must go to the project configuration, and in the "General" tab you will find the SDK Configuration. You must copy the configuration code of your Firebase service into the "Chat" component of the app. The configuration code in both Firebase and the app looks like this:
const firebaseConfig = {
apiKey: "AIzaSyDnmUSVDxoqmX3Vh8Vwb-0fdSgBj04w0pk",
authDomain: "minichat2-b3fdf.firebaseapp.com",
projectId: "minichat2-b3fdf",
storageBucket: "minichat2-b3fdf.appspot.com",
messagingSenderId: "841797473504",
appId: "1:841797473504:web:7d98f08ea0e9d2dbd1ac85"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
To run the app, you can use the following commands:
expo start
npm start
Expo will start automatically and will give you several options to run, including the option to launch the app in a virtualized operating system that you have open at that moment (for example, with Android Studio).
And that's it! Happy coding/hacking! 🤓
For this project I took the role of developer. I was in charge of coding the application and optimizing its performance.
I started the project by identifying the objective of the application and the user requirements, then I created a Kanban board with all the tasks I had to face to create the application. Then, I made design mockups to visualize how the UI would look like. And finally, I started the coding process. During the whole process I was continuously testing the application, both on a real mobile device (Android) and on a virtualized device (also Android).
For the project I made two important decisions. The first was to use my own color palette and background image for the application. This way I could give the application a personal touch. The second was to use Hooks to create the application. The project was taught to be done using the React class model, but I strongly believe in the importance of adopting Hooks, especially for code maintenance from a scalability perspective.
For the future, I think the application could benefit from a better authentication system. Implement, for example, login via e-mail account or username and password. Currently there is only one instance in the chat, so there are no private rooms between users.
One aspect to improve is the UI part. Since this project was my first approach to React Native, and I had little time to develop it, the interface was functional but not very attractive. The same happens with the UX part: the experience is different depending on the size of the device and the operating system used. I need to improve the way the components behave so that the UX is uniform and pleasant for all users.
To finish, I can conclude that this project was an interesting way to learn how to create native apps with React Native. It was challenging and I learned new technologies that will certainly be very useful for my future work. Native apps are here to stay, and I believe that in the near future they will be the new paradigm for programming applications on mobile devices.
Distributed under the MIT License. See LICENSE for more information.
Francisco Gregorio de las Heras: LinkedIn
Project Link: https://github.com/gregoriodelasheras/minichat
This project was done as part of CareerFoundry's Full-Stack Web Development Program (Project 5 - React Native Mobile Chat App).
- Project tutor: Itua Akhator
- Project mentor: Vinh-Tuong Mai
Special thanks to Bárbara Starke for making the illustration for the start screen of the app.