React Native Accessibility Toolkit

A comprehensive, production-ready accessibility plugin for React Native applications. This toolkit provides features like text-to-speech, screen reader support, dynamic color adjustments, text scaling, and more to make your React Native apps accessible to all users.

✨ Features

- 🔊 Text-to-Speech (TTS) - Read content aloud with customizable voice controls
- 📱 Native Accessibility - TalkBack (Android) & VoiceOver (iOS) integration
- 🎨 Dynamic Colors - High contrast, grayscale, color inversion, saturation controls
- 📏 Text Controls - Font scaling, line height, letter spacing adjustments
- 👁️ Visual Aids - Hide images, enlarge buttons, reduced motion
- 📖 Reading Features - Text alignment, reading guides, text magnification
- 🎯 Accessibility Profiles - Pre-configured settings for specific needs
- 💾 Persistent Storage - Automatically saves user preferences
- 🌐 Cross-Platform - Works on both iOS and Android

📦 Installation

``bash
npm install @accessibility-rn-js/react-native-accessibility-toolkit

or

yarn add @accessibility-rn-js/react-native-accessibility-toolkit
`

$3

`bash
npm install react-native-tts @react-native-async-storage/async-storage react-native-vector-icons
`

$3

`bash
cd ios && pod install
`

Add to your Info.plist:
`xml
NSSpeechRecognitionUsageDescription
This app uses speech recognition for accessibility features
`

$3

For react-native-vector-icons, add to android/app/build.gradle:
`gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
`

🚀 Quick Start

$3

`javascript
import { AccessibilityProvider } from '@accessibility-rn-js/react-native-accessibility-toolkit';

export default function App() {
return (

{/ Your app content /}

);
}
`

$3

`javascript
import { AccessibilityButton } from '@accessibility-rn-js/react-native-accessibility-toolkit';

function MyScreen() {
return (

{/ Your content /}


);
}
`

$3

`javascript
import { AccessibleText, useAccessibility } from '@accessibility-rn-js/react-native-accessibility-toolkit';

function MyComponent() {
const { fontScale, textColor } = useAccessibility();

return (

This text respects accessibility settings!

);
}
`

📖 API Documentation

$3

#### useAccessibility()
`javascript
const {
fontScale, // Current font scale (1.0 - 2.0)
textColor, // Custom text color
backgroundColor, // Custom background color
updateSetting, // Update single setting
setProfile, // Apply accessibility profile
openModal, // Open accessibility settings
} = useAccessibility();
`

#### useDynamicColors()
`javascript
const colors = useDynamicColors();
// Returns: { primaryTextColor, defaultBackground, primaryButtonColor, etc. }
`

#### usePageRead(textContent)
`javascript
const { start, pause, resume, stop, isSpeaking } = usePageRead("Text to read");
`

$3

- - Auto-scales and styles text
- - Floating accessibility menu button

$3

- TTSService - Text-to-speech functionality
- NativeAccessibilityBridge - Native platform integration

$3

`javascript
import { ACCESSIBILITY_PROFILES } from '@accessibility-rn-js/react-native-accessibility-toolkit';

// Available profiles:
ACCESSIBILITY_PROFILES.BLIND // Screen reader optimized
ACCESSIBILITY_PROFILES.DYSLEXIA // Increased spacing, reading aids
ACCESSIBILITY_PROFILES.LOW_VISION // Maximum text, high contrast
ACCESSIBILITY_PROFILES.COGNITIVE // Simplified, clear layout
ACCESSIBILITY_PROFILES.EPILEPSY_SAFE // No animations, reduced saturation
ACCESSIBILITY_PROFILES.ADHD_FOCUS // Reading mask, minimal distractions
`

🎨 Customization

$3

`javascript
const { updateSetting } = useAccessibility();

updateSetting('fontScale', 1.5);
updateSetting('colorTheme', 'dark');
updateSetting('textColor', '#FF0000');
`

$3

`javascript
const { setProfile } = useAccessibility();

setProfile(ACCESSIBILITY_PROFILES.DYSLEXIA);
`

🛠️ Advanced Usage

$3

`javascript
import { useAccessibility, getAdjustedFontSize } from '@accessibility-rn-js/react-native-accessibility-toolkit';

function CustomComponent() {
const { fontScale, backgroundColor, textColor } = useAccessibility();

const styles = StyleSheet.create({
container: {
backgroundColor: backgroundColor || '#FFFFFF',
},
text: {
fontSize: getAdjustedFontSize(16, fontScale),
color: textColor || '#000000',
},
});

return ...;
}
`

$3

`javascript
import { NativeAccessibilityBridge } from '@accessibility-rn-js/react-native-accessibility-toolkit';

// Announce important messages
NativeAccessibilityBridge.announce("Form submitted successfully");
``

📱 Platform Support

- iOS: 12.4+
- Android: API 21+
- React Native: 0.60.0+

📄 License

MIT

🙏 Acknowledgments

Built following WCAG 2.1 accessibility guidelines to ensure apps work for everyone.

📞 Support

- Issues: https://github.com/jayeshgupta3502/react-native-accessibility-toolkit/issues
- Documentation: Full API docs available in the repository

---

Made with ❤️ for accessibility