Using Source Code Integrations for Mobile Frameworks
Monitor your mobile framework source code files and get live feedback
Quick-start with an AI prompt
Copy this into your AI coding agent of choice to get set up without having to work through the steps below by hand.
Set up Stark's source code accessibility scanning in this React Native project. Facts to use as-is (don't guess at flags or invent options): - Package: `@stark-lab-inc/stark-accessibility-react-native`, installed as a dev dependency. - CLI: `npx stark-scan-react-native <path>` — e.g. `npx stark-scan-react-native src/`. A Stark token is required for every scan; there is no tokenless mode. - Token comes from `STARK_TOKEN` in the environment, a `.env` file at the project root, or `--stark-token <token>`. The CLI checks all three. - CLI options, and only these: `--stark-token <token>`, `--config <preset>`, `--name <name>` (defaults to the current directory name), `--silent`, `--merge-config`, `--help`. - `--config` presets: `basic` (rules that apply to any RN project), `ios` (basic plus iOS-only rules like `accessibilityIgnoresInvertColors`), `android` (basic plus Android-only rules like `importantForAccessibility` and `accessibilityLiveRegion`), and `all` (everything, and the default). - By default the CLI uses its own embedded ESLint config and ignores yours. `--merge-config` makes it find and merge your local `eslint.config.js` — needed if your rules depend on custom parser or environment settings. - Separately, the package ships an ESLint plugin for in-IDE feedback, exposing `configs.basic`, `configs.ios`, `configs.android`, and `configs.all`. - My Stark token: PASTE_YOUR_TOKEN_HERE Steps: 1. Confirm this is a React Native project, tell me the source root you'd scan, and check whether an `eslint.config.js` already exists. Report back before changing anything. 2. Tell me which platforms this app actually ships to, and which `--config` preset that implies. Don't just take the `all` default — if this is iOS-only, Android rules will produce findings nobody is going to act on. Ask me if it's ambiguous. 3. Install the package as a dev dependency. 4. Put the token in `.env` as `STARK_TOKEN`, and verify `.env` is gitignored before writing it. If it isn't, stop and tell me. 5. Run a first scan with the preset from step 2 and an explicit `--name` describing this codebase rather than letting it default to the directory name. 6. Summarize what came back: how many issues, grouped by rule, and separate the platform-specific findings from the basic ones. Don't start fixing them. Once I've reviewed: 7. Propose (don't write yet) the ESLint plugin wiring for IDE feedback, using the same preset. Plain JS uses the flat-config array form; TypeScript uses `tseslint.config([...])` with the preset in `extends`. Match whichever this project actually is. 8. Propose a CI step running the scan with `--silent`, token supplied as a secret. Constraints: use only the flags and presets listed above, don't add a config file the docs don't describe, and if the scan errors show me the real output before proposing a fix.
With Stark's source code integrations for mobile frameworks, you get a CLI tool to scan your React-Native or Flutter codebase, automatic syncing to your Stark dashboard, and integration with your existing linter for IDE support.
Getting Started with React Native
Begin by installing the package:
npm install --save-dev @stark-lab-inc/stark-accessibility-react-native
Using 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
- Log in to your Stark account at app.getstark.co
- Navigate to your project and create or edit a source code asset
- Find your project's Stark Token (it looks like stark_1452216e48434f07bd0cf4f6f6502e56)
- Copy this token - you'll need it for running the tool
- Configure your token (see configuration options below)
- 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, orall(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
The CLI offers four configuration presets to match your project needs:
basic- Core accessibility rules that apply to all React Native projectsios- 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).
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:
The plugin provides four configuration presets:
starkAccessibilityReactNative.configs.basic- Core accessibility rules for all React Native projectsstarkAccessibilityReactNative.configs.ios- Basic rules + iOS-specific rulesstarkAccessibilityReactNative.configs.android- Basic rules + Android-specific rulesstarkAccessibilityReactNative.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
],
},
]);
Getting Started with Flutter
Download the Stark package to get linting right in your IDE.
- Add to your
pubspec.yaml:
dev_dependencies: custom_lint: ^0.8.1 stark_accessibility_lint: ^1.0.0 - Create or update
analysis_options.yaml:
analyzer: plugins: - custom_lint - In your IDE (VS Code, Android Studio, IntelliJ), the linter will automatically run and show issues inline.
Using CLI Reporter
Upload accessibility scan results to your Stark dashboard.
- Log in to your Stark account at app.getstark.co
- Navigate to your project and create or edit a source code asset
- Find your project's Stark Token (it looks like stark_1452216e48434f07bd0cf4f6f6502e56)
- Copy this token - you'll need it for running the linter
- Run the commands below
Usage
# From your Flutter project directory
dart run stark_accessibility_lint:reporter --stark-token YOUR_TOKEN
# With custom scan name
dart run stark_accessibility_lint:reporter --stark-token YOUR_TOKEN --name "My Flutter App"
Options
--stark-token(required) - Your Stark API token for authentication--name(optional) - Custom name for the scan (defaults to current directory name)