Task
Uploaded by
Satyajit SamalTask
Uploaded by
Satyajit SamalTask: Employee Details App
Goal:
Create a React Native dashboard that:
Fetches weather data from a free API
Has two sections: Add Details & See Details
The Add Details section has a multi-step form:
• Page 1: QR Code Scanner ➝ Next Button
• Page 2: Dropdown (City) + Name Input ➝ Previous & Submit Button
The details store in AsyncStorage and display on the See Details page
Dashboard Page (Dashboard.js)
Two Sections:
1️ Add Details: Loads the multi-step form (AddDetails.js)
2️ See Details: Fetches & displays stored details (SeeDetails.js)
Weather API Integration:
• Uses OpenWeatherMap to show weather info.
• Fetches weather based on stored city.
Multi-Step Form (AddDetails.js)
This will use child components (Page1.js & Page2.js)
Page 1 (QR Code Scanner)
• Scans QR Code & sets value in TextInput.
• Next Button to go to Page 2.
Page 2 (City & Name Input)
• Dropdown to select a city.
• TextInput for name.
• Previous Button to go back.
• Submit Button saves all details in AsyncStorage & navigates to Dashboard.
See Details Page (SeeDetails.js)
• Retrieves data from AsyncStorage.
• Displays QR Code value, City, and Name.
API Details for Weather
Use OpenWeatherMap API
API Link
Example API Call:
plaintext
https://api.openweathermap.org/data/2.5/weather?q={CITY_NAME}&appid={YOUR_API_KEY}&
units=metric
Implementation Flow
1️ Dashboard ➝ Shows Weather & Add/See Details Sections
2️ AddDetails (Parent Component) ➝ Loads Page1.js or Page2.js
3️ Page1 (QR Scanner) ➝ Gets QR value, stores it, & moves to Page 2
4️ Page2 (City & Name Input) ➝ Saves details in AsyncStorage & returns to Dashboard
5️ SeeDetails ➝ Fetches & Displays stored details
Bonus Features
Loading Spinner while fetching weather data
Edit Stored Details
Disable "Next" until QR is scanned
