FmChat (React Native mobile application)

cineF

The React Native Mobile FmChat App is a native application meticulously optimized for both Android and iOS platforms. Constructed using React Native and Firebase, it delivers a smooth and intuitive chat experience, encompassing functionalities such as image and location sharing, along with the capability to access messages offline.

Development approach

In the development process, I first set up the Expo environment for React Native, incorporating dependencies and libraries. The chat functionality was implemented using the Gifted Chat library, with a focus on accessibility for users with disabilities. Firebase anonymous authentication facilitated user access to chat without explicit account creation, while Firestore enabled seamless storage, retrieval, and real-time synchronization of chat conversations. Offline functionality was ensured by configuring React Native's asyncStorage API to locally store chats and using the NetInfo package to check and handle online/offline status. Communication features were enhanced with an Actionsheet allowing image selection, camera access, and location sharing, implemented through expo-image-picker, expo-location, and expo-camera APIs.

Features

  • Enter username
  • Choose background color
  • Send and receive messages
  • Share pictures from the devices gallery
  • Take and share photos
  • Share location
  • The app was built using the TDD technique.
  • See past messages even while offline

Tech stack

  • React Native
  • Expo
  • Gifted Chat
  • Firebase (Googles cloudbased database)
  • React navigator
  • useNetInfo

Live links

There is no live demo available. See GitHub readme for instructions to use/test it.

Challenges and merits

I encountered challenges setting up Expo for this native application and ensuring simultaneous functionality with other devices (mobile, webserver). However, after troubleshooting, I successfully resolved the issues. Overall, it was a valuable learning experience in the development of this native app.