Mobile Extension: React Native App with Offline-First & Native Scanning

[Nitya-003]

Description

While the web dashboard is excellent for administrators and retailers, it is impractical for farmers and transporters working in the field. We need a native mobile application (/mobile) that provides a rugged, high-performance experience optimized for on-site operations.

This extension will focus on three pillars: Native Performance (QR Scanning), Reliability (Offline Support), and Real-time Awareness (Push Notifications).

Goals

1. Provide a high-speed QR scanning interface for high-volume batch processing.
2. Enable data entry in areas with zero or intermittent internet coverage (Offline-first).
3. Keep stakeholders informed via mobile alerts without requiring them to check the web dashboard.

Tasks

1. High-Performance Native QR Scanner

• Library Integration: Setup react-native-vision-camera and vision-camera-code-scanner.
• Native Optimization: Configure the scanner to use the device's auto-focus and flash (torch) for low-light warehouse/field conditions.
• Instant Verification: Implement a "Scan-to-View" flow that fetches batch history immediately upon a successful QR read.

2. Offline Mode & Local Persistence

• Local Storage: Implement AsyncStorage or SQLite to cache batch data and user profiles locally.
• Sync Queue: Create an "Outbox" pattern. If a farmer updates a batch without internet:
  1. Save the update to the local queue.
  2. Display a "Pending Sync" status.
  3. Use NetInfo to detect internet restoration and automatically push updates to the Blockchain/API.

3. Real-time Push Notifications

• Infrastructure: Integrate Firebase Cloud Messaging (FCM) or Expo Notifications.
• Trigger Logic: Configure the backend to send a notification when:
  * A farmer's batch is received by a Mandi.
  * A transport vehicle reaches a checkpoint.
  * A retailer marks a batch as "Sold."

4. Cross-Platform UI/UX

• Styling: Use NativeWind (Tailwind for React Native) to mirror the "Apple-level" aesthetic from the web.
• Biometrics: (Optional) Implement FaceID/TouchID for secure and fast login.

Definition of Done

• /mobile directory initialized with a working React Native/Expo build.
• App can successfully scan a CropChain QR code and display batch details.
• App stores data locally when the "Airplane Mode" is on and syncs when it is off.
• Push notifications are successfully received on a physical device.
• UI/UX is consistent with the web design system (Typography and Color Palette).

Labels: Hard, Enhancement

[github-actions]

🚜 Welcome to the CropChain Ecosystem!

Thank you for opening this issue. Traceability and transparency in agriculture start with great feedback like yours!

Our maintainers will review this shortly. Please make sure you have:

• Used the Issue Template.
• Provided logs or screenshots if reporting a bug.
• Specified if the issue relates to the Smart Contracts, Backend, or Frontend.

🌟 Star the repo to support transparent supply chains!

[Saniiyaa404]

Hi! This feature looks really exciting and impactful for field users 🚜📱

Since the scope of this issue is quite large (QR scanning, offline sync, notifications, and UI), I wanted to ask if it might be possible to break it down into smaller tasks. I’m interested in contributing and would love to help with beginner-to-intermediate parts such as:

• Setting up the /mobile React Native/Expo project
• Building initial UI screens with NativeWind
• Implementing a basic QR scan → view flow
• Prototyping local storage (AsyncStorage)
• Handling notification UI on the client side

If there are any sub-issues or starter tasks you’d recommend, I’d be happy to pick one up and contribute. Can you assign it to me?

[Nitya-003]

Milestone	Task	Complexity	Description
1. Foundation	Project Init & Configuration	Beginner	Initialize Expo/React Native in /mobile, set up TypeScript, and configure NativeWind (Tailwind CSS for Native).
2. Interface	UI Shell & Navigation	Beginner	Build the main navigation structure (Bottom Tabs or Stack) and basic Home and Details screens using NativeWind.
3. Core Logic	QR Scanner Integration	Intermediate	Implement expo-camera or expo-barcode-scanner to handle the scanning event and pass the ID to a results screen.
4. Persistence	Local Storage Prototype	Intermediate	Set up AsyncStorage to bookmark or cache scanned items so they appear in a Recent Scans list.
5. Engagement	Notification UI	Beginner	Create the UI components for in-app alerts and local notification triggers (client-side only for now).

[!TIP] Priority Focus: For field users, Milestone 3 (QR Scanning) is the critical "North Star" feature. It is recommended to complete Milestone 1 and 2 quickly to provide a functional sandbox for the scanner logic.

[Nitya-003]

@Saniiyaa404 Are you from Apertre 3.0 or DSCWOC?

[Saniiyaa404]

@Saniiyaa404 Are you from Apertre 3.0 or DSCWOC?

I am from Apertre 3.0

[Aditya-18849]

Hi @Nitya-003 @vedhapprakashni , I noticed there hasn't been any activity on this issue for over a week. Given the importance of the Mobile Extension for the field operations , I would love to pick this up and get it moving immediately.

I have strong experience with React and Tailwind CSS, so I am very comfortable handling the NativeWind integration and UI requirements.

Here is my proposed plan :
Phase 1: Core Setup & UI

Initialize the /mobile directory with Expo (managed workflow for speed) or React Native CLI if native modules strictly require it.

Configure NativeWind to mirror the web dashboard's design system (typography/colors) exactly.

Set up the navigation structure (Auth, Scanner, History).

Phase 2: Offline-First Architecture (The "Outbox" Pattern)Storage:
Implement AsyncStorage (or SQLite for larger datasets) to cache batch data.Sync Engine: Build a custom hook using NetInfo.State: Online $\rightarrow$ POST directly to API.State: Offline $\rightarrow$ Push action to a local Redux/Zustand "Outbox" queue.Reconnection: Auto-trigger the queue to sync with the backend once the connection is restored.

Phase 3: Native Modules & Scanning

Integrate react-native-vision-camera for the high-performance scanning required in low light.

Implement the "Scan-to-View" logic to immediately fetch/display local data upon a successful scan.

Phase 4: Notifications

Integrate FCM for the required real-time alerts (Mandi receipt, Transport checkpoints).

I am available to start on this right now. Could you please assign this to me?

Thanks,
Aditya Patra

[Nitya-003]

@Saniiyaa404 Any update? or we can assign it to @Aditya-18849

[Aditya-18849]

@Nitya-003 any update ??

[Aditya-18849]

@Nitya-003 ??

[Nitya-003]

@Saniiyaa404 Any update?

[vedhapprakashni]

@Aditya-18849 would you like to work on this under Apertre?