skills.rest
microsoft
microsoftOFFICIAL
Explore all skills by this author →
Website𝕏@OpenAtMicrosoftGitHub

add-camera

Generates typed camera, image picker, and barcode scanner wrappers for Power Apps mobile apps.

808|167|Updated Jan 21, 2026
Search Tags:#react native#expo#image upload#Dataverse#barcode scanner#Camera#Power Apps
One-click install
npx skills add https://github.com/microsoft/power-platform-skills --skill add-camera
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-camera
Source: https://github.com/microsoft/power-platform-skills/tree/main/plugins/mobile-apps/skills/add-native/add-camera
Command: npx skills add https://github.com/microsoft/power-platform-skills --skill add-camera

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires expo-camera, expo-image-picker, expo-file-system.

What problem does it solve?

Adding camera capture, gallery image selection, and barcode/QR scanning to a Power Apps mobile app requires careful handling of Expo module permissions, discriminated-union result types, and Dataverse image column uploads, which is error-prone when written by hand.

Core Features & Use Cases

  • Camera and Gallery Wrappers: Generates src/native/camera.ts with takePhoto() and pickImage() functions that return discriminated-union results and never throw.
  • Barcode/QR Scanner Control: Writes src/native/barcodeScanner.tsx using expo-camera's CameraView with one-shot scan locking, pause/reset lifecycle, and overlay rendering rules.
  • Dataverse Image Upload Helper: Creates src/native/cameraUpload.ts that reads a photo URI as base64 and patches a Dataverse Image column via a generated service's update() method.
  • Use Case: A field inspector app needs an evidence-capture screen where a technician photographs equipment, scans a QR code to look up the asset record, and attaches the photo to the record's Dataverse Image column.

Quick Start

Ask the agent to run /add-native camera in an initialized Power Apps mobile app project to generate the camera wrapper, scanner control, and upload helper.

Frequently Asked Questions about add-camera

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add camera capture to a Power Apps mobile app?▼

Invoke /add-native camera in an initialized project to generate src/native/camera.ts with takePhoto() and pickImage() functions. Both return discriminated-union results with ok, uri, width, height, and mimeType fields, and never throw exceptions.

How do I build a barcode or QR scanner with expo-camera?▼

The generated src/native/barcodeScanner.tsx provides a BarcodeScannerView component using CameraView with configurable barcode types, a one-shot scan lock, and pause/reset props. Set paused=true before navigating or mutating data, then reset it when the screen regains focus.

Can I install expo-camera myself if it is missing from package.json?▼

No. The skill stops if expo-camera or expo-image-picker are missing because customer binaries are built from a pre-built rewrap base. Installing modules locally would compile against code the binary does not contain, causing runtime crashes.

How do I upload a camera photo to a Dataverse Image column?▼

Use the generated uploadPhotoToImageColumn() helper in src/native/cameraUpload.ts. It reads the photo URI as base64 via expo-file-system and calls the generated service's update() with the image column logical name, treating any non-truthy success value as failure.

When should I use this instead of the host ImagePicker control?▼

Standard Dataverse File/Image form fields should use the host FilePicker and ImagePicker controls from @microsoft/power-apps-native-host. This skill is only for custom capture flows like dedicated evidence screens, scan gates, or images transformed before saving.

Why does camera upload fail with arrayBuffer is not a function?▼

Converting camera URIs to browser-style File or Blob objects is fragile in React Native and Expo runtimes. The generated helper avoids this by reading the URI directly as base64 with expo-file-system and patching the Image column with that string.

Related Skills

Explore More Software Engineering Skills→
333-333-333333-333-333

expo

Configure Expo SDK app settings, permissions, and EAS builds.

Community
Intermediate
Ramakrishnan24689Ramakrishnan24689
5

gen-service

Generate CRUD service wrappers for Dataverse tables and Power Platform connectors.

Community
Advanced
microsoftmicrosoft
483

add-dataverse

Create Dataverse tables and generate TypeScript models and services for Power Apps.

Official
Advanced
pingqLINpingqLIN

pcf-tooling

Set up Microsoft Power Platform CLI for PCF component development.

Community
Basic