FmChat (React Native mobile application)
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.