diff --git a/Examples/UIExplorer/AccessibilityAndroidExample.js b/Examples/UIExplorer/AccessibilityAndroidExample.js new file mode 100644 index 000000000..92a511bcc --- /dev/null +++ b/Examples/UIExplorer/AccessibilityAndroidExample.js @@ -0,0 +1,163 @@ +/** + * The examples provided by Facebook are for non-commercial testing and + * evaluation purposes only. + * + * Facebook reserves all rights not expressly granted. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS + * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL + * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN + * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN + * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + * + */ +'use strict'; + +var React = require('react-native'); +var { + StyleSheet, + Text, + View, + TouchableWithoutFeedback, +} = React; +var ToastAndroid = require('ToastAndroid'); +var AccessibilityInfo = require('AccessibilityInfo'); + +var UIExplorerBlock = require('./UIExplorerBlock'); +var UIExplorerPage = require('./UIExplorerPage'); + +var AccessibilityAndroidExample = React.createClass({ + + statics: { + title: 'Accessibility', + description: 'Examples of using Accessibility API.', + }, + + getInitialState: function() { + return { + count: 0, + talkbackEnabled: false, + }; + }, + + componentDidMount: function() { + AccessibilityInfo.addEventListener( + 'change', + this._handleTouchExplorationChange + ); + AccessibilityInfo.fetch().done((enabled) => { + this.setState({ + count: this.state.count, + talkbackEnabled: enabled}); } + ); + }, + + componentWillUnmount: function() { + AccessibilityInfo.removeEventListener( + 'change', + this._handleTouchExplorationChange + ); + }, + + _handleTouchExplorationChange: function(isEnabled) { + this.setState({ + count: this.state.count, + talkbackEnabled: isEnabled, + }); + }, + + _showAccessibilityToast: function() { + var text = 'TouchExploration is ' + (this.state.talkbackEnabled ? 'enabled' : 'disabled'); + ToastAndroid.show(text, ToastAndroid.SHORT); + }, + + _addOne: function() { + this.setState({ + count: ++this.state.count, + talkbackEnabled: this.state.talkbackEnabled, + }); + }, + + render: function() { + return ( + + + + + + This is + + + nontouchable normal view. + + + + + + + + This is + + + nontouchable accessible view without label. + + + + + + + + This is + + + nontouchable accessible view with label. + + + + + + ToastAndroid.show('Toasts work by default', ToastAndroid.SHORT)}> + + Click me + Or not + + + + + + + + Click me + + + + Clicked {this.state.count} times + + + + + + + + Click to check TouchExploration + + + + + + + ); + }, +}); + +var styles = StyleSheet.create({ + embedded: { + backgroundColor: 'yellow', + padding:10, + }, +}); + +module.exports = AccessibilityAndroidExample;