diff --git a/packages/rn-tester/js/components/ExamplePage.js b/packages/rn-tester/js/components/ExamplePage.js index ff9bf7f6f3ac..09ed2bc33f8e 100644 --- a/packages/rn-tester/js/components/ExamplePage.js +++ b/packages/rn-tester/js/components/ExamplePage.js @@ -78,6 +78,7 @@ const styles = StyleSheet.create({ examplesContainer: { width: ScreenWidth, flexGrow: 1, + flex: 1, }, description: { marginVertical: 8, diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js index f9e8e6c12e50..b5e0d4a1c2ee 100644 --- a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js +++ b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js @@ -18,8 +18,10 @@ const { View, TouchableOpacity, TouchableWithoutFeedback, + findNodeHandle, Alert, StyleSheet, + Platform, } = require('react-native'); const RNTesterBlock = require('../../components/RNTesterBlock'); @@ -27,6 +29,7 @@ const RNTesterBlock = require('../../components/RNTesterBlock'); const checkImageSource = require('./check.png'); const uncheckImageSource = require('./uncheck.png'); const mixedCheckboxImageSource = require('./mixed.png'); +const {createRef} = require('react'); const styles = StyleSheet.create({ image: { @@ -692,58 +695,158 @@ class FakeSliderExample extends React.Component { } } -class ScreenReaderStatusExample extends React.Component<{}> { - state = { - screenReaderEnabled: false, - }; - - componentDidMount() { - AccessibilityInfo.addEventListener( - 'change', - this._handleScreenReaderToggled, - ); - AccessibilityInfo.fetch().done(isEnabled => { - this.setState({ - screenReaderEnabled: isEnabled, - }); - }); - } +class AnnounceForAccessibility extends React.Component<{}> { + _handleOnPress = () => + AccessibilityInfo.announceForAccessibility('Announcement Test'); - componentWillUnmount() { - AccessibilityInfo.removeEventListener( - 'change', - this._handleScreenReaderToggled, + render() { + return ( + +