@stark-lab-inc/stark-accessibility-react-native

A comprehensive accessibility toolkit for React Native applications by Stark Lab, Inc. This package provides a powerful CLI tool for accessibility scanning and an ESLint plugin for IDE integration.

Features

• 🚀 CLI Tool - Scan your React Native codebase with minimal setup required
• 📊 Stark Integration - All scans automatically sync to your Stark dashboard
• 🔍 Comprehensive Rules - Specialized web accessibility rules for React Native
• 🛠️ ESLint Plugin - Integrate with your existing ESLint setup for IDE support
• ⚙️ Flexible Configuration - Environment variables, .env files, or CLI arguments

Installation

npm install --save-dev @stark-lab-inc/stark-accessibility-react-native

CLI Tool (Recommended)

The easiest way to get started is with our CLI tool that scans your React Native code for accessibility issues and automatically uploads results to your Stark dashboard. A Stark token is required for all scans.

Quick Setup

1. Log in to your Stark account at app.getstark.co
2. Navigate to your project and create or edit a source code asset
3. Find your asset's Stark Token (it looks like stark_1452216e48434f07bd0cf4f6f6502e56)
4. Copy this token - you'll need it for running the tool
5. Configure your token (see configuration options below)
6. Run accessibility checks

Stark Token Configuration

Your Stark token can be configured using any of these methods:

Option 1: Environment Variable (Recommended for CI/CD)

export STARK_TOKEN="your-stark-token"
npx stark-scan-react-native src/

Option 2: .env File (Recommended for Development)

# Create .env file in your project root
echo "STARK_TOKEN=your-stark-token" > .env
npx stark-scan-react-native src/

Option 3: Command Line Argument

npx stark-scan-react-native src/ --stark-token your-stark-token

The CLI will automatically detect and use your token from any of these sources.

Usage Examples

Once your token is configured, you can use these commands:

# Basic usage
npx stark-scan-react-native src/

# Use iOS-specific rules
npx stark-scan-react-native src/ --config ios

# Use Android-specific rules
npx stark-scan-react-native src/ --config android

# Use basic rules only
npx stark-scan-react-native src/ --config basic

# With custom scan name
npx stark-scan-react-native src/ --name "Production Build"

# Silent mode (perfect for CI/CD)
npx stark-scan-react-native src/ --silent

# Merge with local ESLint configuration
npx stark-scan-react-native src/ --merge-config

# Help
npx stark-scan-react-native --help

CLI Options

• --stark-token <token> - Your Stark token (REQUIRED - can also be set via environment variable or .env file)
• --config <preset> - Configuration preset to use: basic, ios, android, or all (default: all)
• --name <name> - Custom scan name (defaults to current directory name)
• --silent - Suppress console output except errors
• --merge-config - Enable config merging (search for and merge with local ESLint configurations)
• --help - Show help message

Configuration Presets

The CLI offers four configuration presets to match your project needs:

• basic - Core accessibility rules that apply to all React Native projects
• ios - Basic rules + iOS-specific accessibility rules (e.g., accessibilityIgnoresInvertColors)
• android - Basic rules + Android-specific accessibility rules (e.g., importantForAccessibility, accessibilityLiveRegion)
• all - All rules combined (iOS + Android + Basic) - Default

Configuration Merging

By default, the CLI ships with an embedded configuration that works out of the box. However, you can use the --merge-config flag to integrate your existing ESLint configuration:

• Without --merge-config: Uses the embedded configuration
• With --merge-config: Searches for and merges local ESLint configs (eslint.config.js) with the embedded configuration

This is useful for projects that have specific requirements or custom ESLint configuration options (like specialized parser settings, environment configurations, or particular project needs).

What Gets Synced to Stark

When using the CLI tool, the following information is automatically uploaded to your Stark dashboard:

• 📊 Accessibility metrics (errors, warnings)
• 📍 Issue locations (relative file paths, line numbers)
• 📖 WCAG compliance (which guidelines are affected)
• 📝 Code snippets (context around each issue)
• 🔄 Historical tracking (progress over time)

ESLint Plugin Integration

If you prefer to integrate accessibility checking directly into your existing ESLint setup (for IDE support, custom workflows, etc.), you can use our ESLint plugin:

Available Configurations

The plugin provides four configuration presets:

• starkAccessibilityReactNative.configs.basic - Core accessibility rules for all React Native projects
• starkAccessibilityReactNative.configs.ios - Basic rules + iOS-specific rules
• starkAccessibilityReactNative.configs.android - Basic rules + Android-specific rules
• starkAccessibilityReactNative.configs.all - All rules combined (recommended for cross-platform projects)

Basic Configuration

Add Stark to your existing ESLint configuration:

// eslint.config.js
import starkAccessibilityReactNative from '@stark-lab-inc/stark-accessibility-react-native';

export default [
  starkAccessibilityReactNative.configs.all, // or .basic, .ios, .android
  {
    files: ['**/*.{js,jsx}'],
  },
];

TypeScript Configuration

For TypeScript projects:

// eslint.config.js
import tseslint from 'typescript-eslint';
import starkAccessibilityReactNative from '@stark-lab-inc/stark-accessibility-react-native';

export default tseslint.config([
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      starkAccessibilityReactNative.configs.all // or .basic, .ios, .android
    ],
  },
]);

Support & Resources

• 💬 Support: Report bugs or get help with Stark integration
• 🌐 Stark Dashboard: app.getstark.co