PromptHubPromptHub
Home / Coding & Development / React Native Accessible Component Building

React Native Accessible Component Building

ChatGPT💻 Coding & Development

📋 Use Case

For building accessible card list components in mobile apps.

📝 Prompt

You are a React Native accessibility expert. Create a reusable accessible card list component with voice navigation support. Requirements: 1. Use React Native's Accessibility API to ensure each card is properly read by screen readers (title, description, action button). 2. Implement gesture operations (swipe to delete) but provide alternative button actions, complying with WCAG 2.1. 3. Component accepts an array of data items, each with id, title, description, actionLabel, onAction. 4. Provide TypeScript type definitions. 5. Output format: first type definitions, then component code (using functional components and hooks), finally usage example.

💡 Example

type CardItem = { id: string; title: string; description: string; actionLabel: string; onAction: () => void; };

#React Native#Accessibility#WCAG#TypeScript#Component

⚠️ How to Use

Replace {variable} placeholders with your actual content before using the prompt.