{"_id":"@accessibility-rn-js/react-native-accessibility-toolkit","_rev":"3-118824fc0018695e69524cfee9ace7f9","name":"@accessibility-rn-js/react-native-accessibility-toolkit","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@accessibility-rn-js/react-native-accessibility-toolkit","version":"1.0.0","keywords":["react-native","accessibility","a11y","screen-reader","tts","text-to-speech","wcag","inclusive-design"],"author":{"name":"Jayesh Gupta","email":"jayeshgupta3502@gmail.com"},"license":"MIT","_id":"@accessibility-rn-js/react-native-accessibility-toolkit@1.0.0","maintainers":[{"name":"easy-rn-js","email":"jayeshgupta3502@gmail.com"}],"homepage":"https://github.com/accessibility-rn-js/react-native-accessibility-toolkit#readme","bugs":{"url":"https://github.com/accessibility-rn-js/react-native-accessibility-toolkit/issues"},"dist":{"shasum":"d35663395ed1b9dcf8fe64d622992e3f841ee6f2","tarball":"https://registry.npmjs.org/@accessibility-rn-js/react-native-accessibility-toolkit/-/react-native-accessibility-toolkit-1.0.0.tgz","fileCount":19,"integrity":"sha512-xFVMGGgFkve83h8rzAd4JQEaaa2qsdVcGgLHxAZwj1FzA8/LNJbmeAYPDw8UQL3l+IMmSvivkyUlR2M8OzIIwg==","signatures":[{"sig":"MEUCICLqEWebUWj2Slm8RdBhZLLavo7X2zOGv/kJj444N/bCAiEA3y9fd1Hr+6SMkd5/DRD53EJ70xBZ83Mf7Xmdm89ad2Q=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":63681},"main":"src/index.js","gitHead":"a6a027c4eb33ed69a165d41da73b8c6e224929b0","scripts":{"lint":"eslint .","test":"jest"},"_npmUser":{"name":"easy-rn-js","email":"jayeshgupta3502@gmail.com"},"repository":{"url":"git+https://github.com/accessibility-rn-js/react-native-accessibility-toolkit.git","type":"git"},"_npmVersion":"10.9.2","description":"A comprehensive accessibility toolkit for React Native applications with TTS, screen reader, color adjustments, and more","directories":{},"_nodeVersion":"22.19.0","dependencies":{"react-native-tts":"^4.1.0","react-native-draggable":"^3.3.0","react-native-element-dropdown":"^2.10.0","@miblanchard/react-native-slider":"^2.3.1","@react-native-async-storage/async-storage":"^1.19.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.2.1","eslint":"^8.19.0","@babel/core":"^7.20.0","@babel/runtime":"^7.20.0","@babel/preset-env":"^7.20.0"},"peerDependencies":{"react":">=16.8.0","react-native":">=0.60.0","react-native-vector-icons":">=9.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-accessibility-toolkit_1.0.0_1769754721413_0.9029675100226802","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@accessibility-rn-js/react-native-accessibility-toolkit","version":"1.0.1","keywords":["react-native","accessibility","a11y","screen-reader","tts","text-to-speech","wcag","inclusive-design"],"author":{"name":"Jayesh Gupta","email":"jayeshgupta3502@gmail.com"},"license":"MIT","_id":"@accessibility-rn-js/react-native-accessibility-toolkit@1.0.1","maintainers":[{"name":"easy-rn-js","email":"jayeshgupta3502@gmail.com"}],"homepage":"https://github.com/accessibility-rn-js/react-native-accessibility-toolkit#readme","bugs":{"url":"https://github.com/accessibility-rn-js/react-native-accessibility-toolkit/issues"},"dist":{"shasum":"485146a72e27dfece37bf264daccbf67b8ee997e","tarball":"https://registry.npmjs.org/@accessibility-rn-js/react-native-accessibility-toolkit/-/react-native-accessibility-toolkit-1.0.1.tgz","fileCount":19,"integrity":"sha512-2KfBn/jWErSH5mj7p41MMcLV99J9HFcqeae/3sdGgQJ0hfqTVckhWIzpiFwA9ALaytZjchVsk9BAOLyX6sBGRA==","signatures":[{"sig":"MEUCIQD/+IB0ib+wjm/JU7Lcm2ppDVmDyq0vKmUuz45J1p+0WgIgGAQNexhKcIEAycPtbOcA3Ftk2CbnIKMS3F0x4MNEYx4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":63157},"main":"src/index.js","gitHead":"a6a027c4eb33ed69a165d41da73b8c6e224929b0","scripts":{"lint":"eslint .","test":"jest"},"_npmUser":{"name":"easy-rn-js","email":"jayeshgupta3502@gmail.com"},"repository":{"url":"git+https://github.com/accessibility-rn-js/react-native-accessibility-toolkit.git","type":"git"},"_npmVersion":"10.9.2","description":"A comprehensive accessibility toolkit for React Native applications with TTS, screen reader, color adjustments, and more","directories":{},"_nodeVersion":"22.19.0","dependencies":{"react-native-tts":"^4.1.0","react-native-draggable":"^3.3.0","react-native-element-dropdown":"^2.10.0","@miblanchard/react-native-slider":"^2.3.1","@react-native-async-storage/async-storage":"^1.19.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.2.1","eslint":"^8.19.0","@babel/core":"^7.20.0","@babel/runtime":"^7.20.0","@babel/preset-env":"^7.20.0"},"peerDependencies":{"react":">=16.8.0","react-native":">=0.60.0","react-native-vector-icons":">=9.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-accessibility-toolkit_1.0.1_1769757479962_0.048979388158630455","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@accessibility-rn-js/react-native-accessibility-toolkit","version":"1.0.2","description":"A comprehensive accessibility toolkit for React Native applications with TTS, screen reader, color adjustments, and more","main":"src/index.js","scripts":{"test":"jest","lint":"eslint ."},"keywords":["react-native","accessibility","a11y","screen-reader","tts","text-to-speech","wcag","inclusive-design"],"author":{"name":"Jayesh Gupta","email":"jayeshgupta3502@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/jayeshgupta3502/react-native-accessibility-toolkit.git"},"bugs":{"url":"https://github.com/jayeshgupta3502/react-native-accessibility-toolkit/issues"},"homepage":"https://github.com/jayeshgupta3502/react-native-accessibility-toolkit#readme","peerDependencies":{"react":">=16.8.0","react-native":">=0.60.0","react-native-vector-icons":">=9.0.0"},"dependencies":{"react-native-tts":"^4.1.0","@react-native-async-storage/async-storage":"^1.19.0","react-native-draggable":"^3.3.0","@miblanchard/react-native-slider":"^2.3.1","react-native-element-dropdown":"^2.10.0"},"devDependencies":{"@babel/core":"^7.20.0","@babel/preset-env":"^7.20.0","@babel/runtime":"^7.20.0","eslint":"^8.19.0","jest":"^29.2.1"},"_id":"@accessibility-rn-js/react-native-accessibility-toolkit@1.0.2","gitHead":"5b2aa831ebbb45607bd9244790db3a1377a929fa","_nodeVersion":"22.19.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-7LZaw45f0SwDciVOsE6HThBqQuJZYiVMSghk/oSLS7Nr5ujWV3g82tWsaaOJpzlnKOhBuS/oGziFbONMfSEYuA==","shasum":"39633c4a758f79414ee24e21fe6b3035c12e3bdd","tarball":"https://registry.npmjs.org/@accessibility-rn-js/react-native-accessibility-toolkit/-/react-native-accessibility-toolkit-1.0.2.tgz","fileCount":19,"unpackedSize":63249,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGyBYTV5u78gX0u88F0cp0/3UgfGNOzNvz2mSuxbB61IAiAN6BhcQFJvol6JxdYsL4Qcsk6YfnqDv10zdCXpcYEOZA=="}]},"_npmUser":{"name":"easy-rn-js","email":"jayeshgupta3502@gmail.com"},"directories":{},"maintainers":[{"name":"easy-rn-js","email":"jayeshgupta3502@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-accessibility-toolkit_1.0.2_1769758224192_0.49077499081379194"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-30T06:32:01.342Z","modified":"2026-01-30T07:30:24.459Z","1.0.0":"2026-01-30T06:32:01.551Z","1.0.1":"2026-01-30T07:18:00.101Z","1.0.2":"2026-01-30T07:30:24.336Z"},"bugs":{"url":"https://github.com/jayeshgupta3502/react-native-accessibility-toolkit/issues"},"author":{"name":"Jayesh Gupta","email":"jayeshgupta3502@gmail.com"},"license":"MIT","homepage":"https://github.com/jayeshgupta3502/react-native-accessibility-toolkit#readme","keywords":["react-native","accessibility","a11y","screen-reader","tts","text-to-speech","wcag","inclusive-design"],"repository":{"type":"git","url":"git+https://github.com/jayeshgupta3502/react-native-accessibility-toolkit.git"},"description":"A comprehensive accessibility toolkit for React Native applications with TTS, screen reader, color adjustments, and more","maintainers":[{"name":"easy-rn-js","email":"jayeshgupta3502@gmail.com"}],"readme":"# React Native Accessibility Toolkit\r\n\r\nA 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.\r\n\r\n## ✨ Features\r\n\r\n- **🔊 Text-to-Speech (TTS)** - Read content aloud with customizable voice controls\r\n- **📱 Native Accessibility** - TalkBack (Android) & VoiceOver (iOS) integration\r\n- **🎨 Dynamic Colors** - High contrast, grayscale, color inversion, saturation controls\r\n- **📏 Text Controls** - Font scaling, line height, letter spacing adjustments\r\n- **👁️ Visual Aids** - Hide images, enlarge buttons, reduced motion\r\n- **📖 Reading Features** - Text alignment, reading guides, text magnification\r\n- **🎯 Accessibility Profiles** - Pre-configured settings for specific needs\r\n- **💾 Persistent Storage** - Automatically saves user preferences\r\n- **🌐 Cross-Platform** - Works on both iOS and Android\r\n\r\n## 📦 Installation\r\n\r\n```bash\r\nnpm install @accessibility-rn-js/react-native-accessibility-toolkit\r\n# or\r\nyarn add @accessibility-rn-js/react-native-accessibility-toolkit\r\n```\r\n\r\n### Install Peer Dependencies\r\n\r\n```bash\r\nnpm install react-native-tts @react-native-async-storage/async-storage react-native-vector-icons\r\n```\r\n\r\n### iOS Setup\r\n\r\n```bash\r\ncd ios && pod install\r\n```\r\n\r\nAdd to your `Info.plist`:\r\n```xml\r\n<key>NSSpeechRecognitionUsageDescription</key>\r\n<string>This app uses speech recognition for accessibility features</string>\r\n```\r\n\r\n### Android Setup\r\n\r\nFor react-native-vector-icons, add to `android/app/build.gradle`:\r\n```gradle\r\napply from: \"../../node_modules/react-native-vector-icons/fonts.gradle\"\r\n```\r\n\r\n## 🚀 Quick Start\r\n\r\n### 1. Wrap Your App\r\n\r\n```javascript\r\nimport { AccessibilityProvider } from '@accessibility-rn-js/react-native-accessibility-toolkit';\r\n\r\nexport default function App() {\r\n  return (\r\n    <AccessibilityProvider>\r\n      {/* Your app content */}\r\n    </AccessibilityProvider>\r\n  );\r\n}\r\n```\r\n\r\n### 2. Add Accessibility Button\r\n\r\n```javascript\r\nimport { AccessibilityButton } from '@accessibility-rn-js/react-native-accessibility-toolkit';\r\n\r\nfunction MyScreen() {\r\n  return (\r\n    <View>\r\n      {/* Your content */}\r\n      <AccessibilityButton />\r\n    </View>\r\n  );\r\n}\r\n```\r\n\r\n### 3. Use Accessible Components\r\n\r\n```javascript\r\nimport { AccessibleText, useAccessibility } from '@accessibility-rn-js/react-native-accessibility-toolkit';\r\n\r\nfunction MyComponent() {\r\n  const { fontScale, textColor } = useAccessibility();\r\n  \r\n  return (\r\n    <AccessibleText baseFontSize={16}>\r\n      This text respects accessibility settings!\r\n    </AccessibleText>\r\n  );\r\n}\r\n```\r\n\r\n## 📖 API Documentation\r\n\r\n### Core Hooks\r\n\r\n#### `useAccessibility()`\r\n```javascript\r\nconst {\r\n  fontScale,              // Current font scale (1.0 - 2.0)\r\n  textColor,              // Custom text color\r\n  backgroundColor,        // Custom background color\r\n  updateSetting,          // Update single setting\r\n  setProfile,             // Apply accessibility profile\r\n  openModal,              // Open accessibility settings\r\n} = useAccessibility();\r\n```\r\n\r\n#### `useDynamicColors()`\r\n```javascript\r\nconst colors = useDynamicColors();\r\n// Returns: { primaryTextColor, defaultBackground, primaryButtonColor, etc. }\r\n```\r\n\r\n#### `usePageRead(textContent)`\r\n```javascript\r\nconst { start, pause, resume, stop, isSpeaking } = usePageRead(\"Text to read\");\r\n```\r\n\r\n### Components\r\n\r\n- **`<AccessibleText>`** - Auto-scales and styles text\r\n- **`<AccessibilityButton>`** - Floating accessibility menu button\r\n\r\n### Services\r\n\r\n- **`TTSService`** - Text-to-speech functionality\r\n- **`NativeAccessibilityBridge`** - Native platform integration\r\n\r\n### Profiles\r\n\r\n```javascript\r\nimport { ACCESSIBILITY_PROFILES } from '@accessibility-rn-js/react-native-accessibility-toolkit';\r\n\r\n// Available profiles:\r\nACCESSIBILITY_PROFILES.BLIND          // Screen reader optimized\r\nACCESSIBILITY_PROFILES.DYSLEXIA       // Increased spacing, reading aids\r\nACCESSIBILITY_PROFILES.LOW_VISION     // Maximum text, high contrast\r\nACCESSIBILITY_PROFILES.COGNITIVE      // Simplified, clear layout\r\nACCESSIBILITY_PROFILES.EPILEPSY_SAFE  // No animations, reduced saturation\r\nACCESSIBILITY_PROFILES.ADHD_FOCUS     // Reading mask, minimal distractions\r\n```\r\n\r\n## 🎨 Customization\r\n\r\n### Update Individual Settings\r\n\r\n```javascript\r\nconst { updateSetting } = useAccessibility();\r\n\r\nupdateSetting('fontScale', 1.5);\r\nupdateSetting('colorTheme', 'dark');\r\nupdateSetting('textColor', '#FF0000');\r\n```\r\n\r\n### Apply Complete Profile\r\n\r\n```javascript\r\nconst { setProfile } = useAccessibility();\r\n\r\nsetProfile(ACCESSIBILITY_PROFILES.DYSLEXIA);\r\n```\r\n\r\n## 🛠️ Advanced Usage\r\n\r\n### Custom Styling with Accessibility\r\n\r\n```javascript\r\nimport { useAccessibility, getAdjustedFontSize } from '@accessibility-rn-js/react-native-accessibility-toolkit';\r\n\r\nfunction CustomComponent() {\r\n  const { fontScale, backgroundColor, textColor } = useAccessibility();\r\n  \r\n  const styles = StyleSheet.create({\r\n    container: {\r\n      backgroundColor: backgroundColor || '#FFFFFF',\r\n    },\r\n    text: {\r\n      fontSize: getAdjustedFontSize(16, fontScale),\r\n      color: textColor || '#000000',\r\n    },\r\n  });\r\n  \r\n  return <View style={styles.container}>...</View>;\r\n}\r\n```\r\n\r\n### Screen Reader Announcements\r\n\r\n```javascript\r\nimport { NativeAccessibilityBridge } from '@accessibility-rn-js/react-native-accessibility-toolkit';\r\n\r\n// Announce important messages\r\nNativeAccessibilityBridge.announce(\"Form submitted successfully\");\r\n```\r\n\r\n## 📱 Platform Support\r\n\r\n- **iOS**: 12.4+\r\n- **Android**: API 21+  \r\n- **React Native**: 0.60.0+\r\n\r\n## 📄 License\r\n\r\nMIT\r\n\r\n## 🙏 Acknowledgments\r\n\r\nBuilt following WCAG 2.1 accessibility guidelines to ensure apps work for everyone.\r\n\r\n## 📞 Support\r\n\r\n- Issues: https://github.com/jayeshgupta3502/react-native-accessibility-toolkit/issues\r\n- Documentation: Full API docs available in the repository\r\n\r\n---\r\n\r\nMade with ❤️ for accessibility\r\n","readmeFilename":"README.md"}