/chat-app

Primary LanguageJavaScript

shield barbershop

chat-app

Hello!! 👋

This is my first app created using React Native. It is a chat app where users can share images and their location.

Design

Key Features

  • 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.

Dependencies

"@react-native-async-storage/async-storage": "~1.17.3",
"@react-native-community/masked-view": "^0.1.11",
"@react-native-community/netinfo": "9.3.0",
"@react-navigation/bottom-tabs": "^6.4.0",
"@react-navigation/native": "^6.0.13",
"@react-navigation/stack": "^6.3.2",
"expo": "~46.0.16",
"expo-image-picker": "~13.3.1",
"expo-location": "~14.3.0",
"expo-permissions": "~13.2.0",
"expo-status-bar": "~1.4.0",
"firebase": "^7.24.0",
"mapview": "^1.0.0",
"react": "18.0.0",
"react-native": "0.69.6",
"react-native-custom-action-sheet": "^0.0.11",
"react-native-firebase": "^5.6.0",
"react-native-gesture-handler": "~2.5.0",
"react-native-gifted-chat": "^1.0.4",
"react-native-maps": "0.31.1",
"react-native-reanimated": "~2.9.1",
"react-native-safe-area-context": "4.3.1",
"react-native-screens": "~3.15.0"

How to run the project:

To emulate the app, follow the steps below : You can use any Emulator or Simulator to run the app on your device. To test this app, I have used Expo Go on iOS. To test the app with Expo, follow the below steps:

  1. Download an app emulator (for this project I have used Expo Go)

  2. Clone repository: git clone https://github.com/viniciustocchio/chat-app.git

  3. Install Expo CLI as a global npm package: npm install --global expo-cli

  4. Install all dependecies: npm install

  5. Start project: expo start / npx expo start

  6. Launch the app on Expo