Chattown – a React Native chat app

A chat app for mobile devices using React Native, Expo, Google's Firebase/Firestore and gifted-chat library. The app will provide users with a chat interface and the possibility to share images (take a picture or choose from media library) and their location with others.

Key Features

• Select background color before starting a chat
• Ask for permission to use location data and share images
• take a new picture or choose one from your media library
• Datastorage online in firebase Cloud and local storage offline

Getting started

First you need to set up your development environment. Make sure you have the latest version of Node and install Expo

$ npm install expo-cli --global

For testing the app you can use XCode as an iOS Simulator or Android-Studio emulator. You will need Expo to run the app on your mobile device (iOS/Android Smartphone) or use the emulator (or simulator). Download the Expo app from App or Play store onto your device. Create [your-Expo-account] (https://expo.io/signup).

Now you can set up your React Native App! Make sure you are working in your projects folder.

$ expo init hello-world

Back in your terminal choose the blank template - but not the TypeScript blank

Go to your project's directory using cd project-name and start with npm start or expo start. This will launch the https server "Metro Bundler in a new tab. You can also hit the in terminal "?" to see all options for running the app.

Nice work!

Setting up your Database

Storage of realtime conversations in the Firestore Database. With Firebase you can authenticate the users anonymously. After setting up Firebase, don't forget to check if the Sigh-in method for Anonymous has the status of "Enabled".

$ npm install --save firebase@7.9.0

Follow the instructions of Google Firebase. Wenn creating your project, choose "Database and not real-time database. Starting a collection in Firebase is pretty straightforward. I will include all steps in an updated version of this ReadMe file. But for now, don't forget to choose auto ID. Make sure the name and fields matches with your chat app code...etc.

Referencing the app in Chat.js with your own credentials, like so: Go to your project in the terminal and run npm start or expo start. Et violà!

Dependencies

• "@react-native-community/async-storage",
• "@react-native-community/masked-view",
• "@react-native-community/netinfo",
• "@react-navigation/native",
• "@react-navigation/stack",
• "expo",
• "expo-image-picker",
• "expo-location",
• "expo-permissions",
• "expo-status-bar",
• "firebase",
• "prop-types",
• "react",
• "react-dom",
• "react-native",
• "react-native-gesture-handler",
• "react-native-gifted-chat",
• "react-native-maps",
• "react-native-reanimated",
• "react-native-safe-arecrdea-context",
• "react-native-screens,
• "react-native-web",
• "react-navigation"

Libraries

The app uses [GiftedChat] (https://github.com/FaridSafi/react-native-gifted-chat)

Project Management

Using a simple Kanban Board to visualize and optimize my workflow. Contain the user stories, story points for time estimation, and other handoff deliverables.

currently working on this README file

Happy Coding!