This is a native mobile app built using React Native that allows users to enter a chat room, then send messages, images, and their location.
Chat App was developed to practice native app development using React Native. It includes features like switching between views, storing data locally for use offline, asking permission for access to camera and location, and accessing camera, camera roll, and location services.
- Clone the Github repo to your local machine.
- If you are unsure what method to use, I suggest selecting "Download ZIP" from the "Code" dropdown menu.
- Put this folder somewhere easy to find, like in your Documents folder, and unzip it.
- Navigate to the directory in the terminal.
- If you saved it in your directory, this would look something like
cd Documents/chat-app
.
- If you saved it in your directory, this would look something like
- Use command
npm install
to install all local dependencies.- Ensure npm is installed globally on your machine in order to run this command.
- The app is now ready to test on your machine!
- Use command
expo start
to start the test environment. - Test the app using whatever machine/method you like!
- To test in Android Emulator, first install Android Studio, then then press
a
while expo is running. - (Macs only) To test in iOS Simulator, first ensure XCode is installed, and then press
i
while expo is running. - To test on any Android or iOS device, first install the Expo Go app, and then scan the QR code generated in your terminal when Expo is running (using the Expo Go app on Android or Camera on iOS). Both the local machine and the mobile device must be connected to the same network or plugged into each other in order to emulate the app on the mobile device.
- To test in Android Emulator, first install Android Studio, then then press
Note: The app is connected to its own Firebase database run by the developer, but feel free to make your own database and connect it to your local version of the app to create a private chat!
- HTML5
- CSS3
- JavaScript (ES6)
- Expo
- Expo Font
- Expo Image Picker
- Expo Location
- Expo Permissions
- Expo Status Bar
- Firebase
- React
- React DOM
- React Native
- React Native Gesture-Handler
- React Native Gifted Chat
- React Native Maps
- React Native Reanimated
- React Native Safe Area Context
- React-Native Screens
- React Native Web
- React Navigation