React Native AccessibilityInfo !!
Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The AccessibilityInfo API is designed for this purpose. You can use it to query the current state of the screen reader as well as to register to be notified when the state of the screen reader changes.
Example
import React, {useState, useEffect} from 'react';
import {AccessibilityInfo, View, Text, StyleSheet} from 'react-native';
const App = () => {
const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
useEffect(() => {
const reduceMotionChangedSubscription = AccessibilityInfo.addEventListener(
'reduceMotionChanged',
isReduceMotionEnabled => {
setReduceMotionEnabled(isReduceMotionEnabled);
},
);
const screenReaderChangedSubscription = AccessibilityInfo.addEventListener(
'screenReaderChanged',
isScreenReaderEnabled => {
setScreenReaderEnabled(isScreenReaderEnabled);
},
);
AccessibilityInfo.isReduceMotionEnabled().then(isReduceMotionEnabled => {
setReduceMotionEnabled(isReduceMotionEnabled);
});
AccessibilityInfo.isScreenReaderEnabled().then(isScreenReaderEnabled => {
setScreenReaderEnabled(isScreenReaderEnabled);
});
return () => {
reduceMotionChangedSubscription.remove();
screenReaderChangedSubscription.remove();
};
}, []);
return (
<View style={styles.container}>
<Text style={styles.status}>
The reduce motion is {reduceMotionEnabled ? 'enabled' : 'disabled'}.
</Text>
<Text style={styles.status}>
The screen reader is {screenReaderEnabled ? 'enabled' : 'disabled'}.
</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
status: {
margin: 30,
},
});
export default App;
This is in Expo Go Version But will Work in CLI Version too.