cef50cec8ebb9ce68c29f8029ad9fbf8965c74ec
SafeQR Code Scanner
SafeQR is a React Native application that allows users to scan QR codes using their mobile device's camera. The app provides a user-friendly interface with a bottom navigation bar for easy access to different sections such as QR Scanner, History, Settings, and Profile.
Features
- QR Code Scanning: Scan QR codes and display the scanned data.
- History: (Placeholder) View the history of scanned QR codes.
- Settings: (Placeholder) Adjust application settings.
- Profile: (Placeholder) View and edit user profile.
Installation
-
Clone the Repository:
git clone https://github.com/safeqr/SafeQR_Front_End_Mobile.git cd SafeQR_Front_End_Mobile -
Install Dependencies: Ensure you have
nodeandnpminstalled, then run:npm install -
Start the Application:
npx expo start -
Install Expo CLI (if step 3 causes expo error):
npm install -g expo-cli -
Run on Device:
- For iOS, use the Expo Go app.
- For Android, use the Expo Go app or an emulator.
Usage
- Open the app on your device.
- Navigate to the QR Scanner tab.
- Point your camera at a QR code.
- The app will scan and display the QR code data below the camera view.
- Use the bottom navigation to explore other sections (History,QR Scanner, Settings).
Project Structure
.//OTHER Node_modules
├── App.tsx
├── package.json
├── tsconfig.json
├── assets
│ └── ...
├── components
│ ├── CameraView.tsx
│ └── CustomTabBar.tsx
├── screens
│ ├── QRScannerScreen.tsx
│ ├── HistoryScreen.tsx
│ └── SettingsScreen.tsx
├── navigation
│ └── AppNavigator.tsx
└── types.ts
Dependencies
The following dependencies are required to run this project:
"@expo/vector-icons": "^14.0.2",
"@react-navigation/bottom-tabs": "^6.5.20",
"@react-navigation/native": "^6.1.17",
"axios": "^1.7.2",
"expo": "~51.0.11",
"expo-camera": "~15.0.10",
"expo-image-picker": "~15.0.5",
"expo-status-bar": "~1.12.1",
"react": "18.2.0",
"react-native": "0.74.2",
"react-native-safe-area-context": "^4.10.4",
"react-native-screens": "^3.31.1"
Installation
To install the dependencies, run the following command(it will auto read package.json):
npm install
Description
Languages
TypeScript
90.2%
Kotlin
3.8%
Objective-C++
2.5%
Ruby
2%
JavaScript
1%
Other
0.4%