/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
'use strict';
const React = require('react');
const {
AccessibilityInfo,
Button,
Image,
Text,
View,
TouchableOpacity,
TouchableWithoutFeedback,
Alert,
StyleSheet,
} = require('react-native');
const RNTesterBlock = require('../../components/RNTesterBlock');
const checkImageSource = require('./check.png');
const uncheckImageSource = require('./uncheck.png');
const mixedCheckboxImageSource = require('./mixed.png');
const styles = StyleSheet.create({
image: {
width: 20,
height: 20,
resizeMode: 'contain',
marginRight: 10,
},
});
class AccessibilityExample extends React.Component {
render() {
return (
Text's accessibilityLabel is the raw text itself unless it is set
explicitly.
This text component's accessibilityLabel is set explicitly.
This is text one.
This is text two.
This is text one.
This is text two.
This is text one.
This is text two.
{/* Android screen readers will say the accessibility hint instead of the text
since the view doesn't have a label. */}
This is text one.
This is text two.
This is text one.
This is text two.
This is a title.
Alert.alert('Link has been clicked!')}
accessibilityRole="link">
Click me
Alert.alert('Button has been pressed!')}
accessibilityRole="button">
Click me
Alert.alert('Button has been pressed!')}
accessibilityRole="button"
accessibilityState={{disabled: true}}
disabled={true}>
I am disabled. Clicking me will not trigger any action.
This view is selected and disabled.
Accessible view with label, hint, role, and state
);
}
}
class CheckboxExample extends React.Component {
state = {
checkboxState: true,
};
_onCheckboxPress = () => {
let checkboxState = false;
if (this.state.checkboxState === false) {
checkboxState = 'mixed';
} else if (this.state.checkboxState === 'mixed') {
checkboxState = true;
} else {
checkboxState = false;
}
this.setState({
checkboxState: checkboxState,
});
};
render() {
return (
Checkbox example
);
}
}
class SwitchExample extends React.Component {
state = {
switchState: true,
};
_onSwitchToggle = () => {
const switchState = !this.state.switchState;
this.setState({
switchState: switchState,
});
};
render() {
return (
Switch example
);
}
}
class SelectionExample extends React.Component {
constructor(props) {
super(props);
this.selectableElement = React.createRef();
}
state = {
isSelected: true,
isEnabled: false,
};
render() {
let accessibilityHint = 'click me to select';
if (this.state.isSelected) {
accessibilityHint = 'click me to unselect';
}
if (!this.state.isEnabled) {
accessibilityHint = 'use the button on the right to enable selection';
}
let buttonTitle = this.state.isEnabled
? 'Disable selection'
: 'Enable selection';
return (
{
if (this.state.isEnabled) {
this.setState({
isSelected: !this.state.isSelected,
});
}
}}
accessibilityLabel="element 19"
accessibilityState={{
selected: this.state.isSelected,
disabled: !this.state.isEnabled,
}}
accessibilityHint={accessibilityHint}>
Selectable element example
);
}
}
class ExpandableElementExample extends React.Component {
state = {
expandState: false,
};
_onElementPress = () => {
const expandState = !this.state.expandState;
this.setState({
expandState: expandState,
});
};
render() {
return (
Expandable element example
);
}
}
class NestedCheckBox extends React.Component {
state = {
checkbox1: false,
checkbox2: false,
checkbox3: false,
};
_onPress1 = () => {
let checkbox1 = false;
if (this.state.checkbox1 === false) {
checkbox1 = true;
} else if (this.state.checkbox1 === 'mixed') {
checkbox1 = false;
} else {
checkbox1 = false;
}
setTimeout(() => {
this.setState({
checkbox1: checkbox1,
checkbox2: checkbox1,
checkbox3: checkbox1,
});
}, 2000);
};
_onPress2 = () => {
const checkbox2 = !this.state.checkbox2;
this.setState({
checkbox2: checkbox2,
checkbox1:
checkbox2 && this.state.checkbox3
? true
: checkbox2 || this.state.checkbox3
? 'mixed'
: false,
});
};
_onPress3 = () => {
const checkbox3 = !this.state.checkbox3;
this.setState({
checkbox3: checkbox3,
checkbox1:
this.state.checkbox2 && checkbox3
? true
: this.state.checkbox2 || checkbox3
? 'mixed'
: false,
});
};
render() {
return (
Meat
Beef
Bacon
);
}
}
class AccessibilityRoleAndStateExample extends React.Component<{}> {
render() {
return (
Alert example
Combobox example
Menu example
Menu bar example
Menu item example
Progress bar example
Radio button example
Radio group example
Scrollbar example
Spin button example
Tab example
Tab list example
Timer example
Toolbar example
State busy example
);
}
}
class AccessibilityActionsExample extends React.Component {
render() {
return (
{
switch (event.nativeEvent.actionName) {
case 'activate':
Alert.alert('Alert', 'View is clicked');
break;
}
}}>
Click me
{
switch (event.nativeEvent.actionName) {
case 'cut':
Alert.alert('Alert', 'cut action success');
break;
case 'copy':
Alert.alert('Alert', 'copy action success');
break;
case 'paste':
Alert.alert('Alert', 'paste action success');
break;
}
}}>
This view supports many actions.
{
switch (event.nativeEvent.actionName) {
case 'increment':
Alert.alert('Alert', 'increment action success');
break;
case 'decrement':
Alert.alert('Alert', 'decrement action success');
break;
}
}}>
Slider
{
switch (event.nativeEvent.actionName) {
case 'cut':
Alert.alert('Alert', 'cut action success');
break;
case 'copy':
Alert.alert('Alert', 'copy action success');
break;
case 'paste':
Alert.alert('Alert', 'paste action success');
break;
}
}}
onPress={() => Alert.alert('Button has been pressed!')}
accessibilityRole="button">
Click me
);
}
}
class FakeSliderExample extends React.Component {
state = {
current: 50,
textualValue: 'center',
};
increment = () => {
let newValue = this.state.current + 2;
if (newValue > 100) {
newValue = 100;
}
this.setState({
current: newValue,
});
};
decrement = () => {
let newValue = this.state.current - 2;
if (newValue < 0) {
newValue = 0;
}
this.setState({
current: newValue,
});
};
render() {
return (
{
switch (event.nativeEvent.actionName) {
case 'increment':
this.increment();
break;
case 'decrement':
this.decrement();
break;
}
}}
accessibilityValue={{
min: 0,
now: this.state.current,
max: 100,
}}>
Fake Slider
{
switch (event.nativeEvent.actionName) {
case 'increment':
if (this.state.textualValue === 'center') {
this.setState({textualValue: 'right'});
} else if (this.state.textualValue === 'left') {
this.setState({textualValue: 'center'});
}
break;
case 'decrement':
if (this.state.textualValue === 'center') {
this.setState({textualValue: 'left'});
} else if (this.state.textualValue === 'right') {
this.setState({textualValue: 'center'});
}
break;
}
}}
accessibilityValue={{text: this.state.textualValue}}>
Equalizer
);
}
}
class ScreenReaderStatusExample extends React.Component<{}> {
state = {
screenReaderEnabled: false,
};
componentDidMount() {
AccessibilityInfo.addEventListener(
'change',
this._handleScreenReaderToggled,
);
AccessibilityInfo.fetch().done(isEnabled => {
this.setState({
screenReaderEnabled: isEnabled,
});
});
}
componentWillUnmount() {
AccessibilityInfo.removeEventListener(
'change',
this._handleScreenReaderToggled,
);
}
_handleScreenReaderToggled = isEnabled => {
this.setState({
screenReaderEnabled: isEnabled,
});
};
render() {
return (
The screen reader is{' '}
{this.state.screenReaderEnabled ? 'enabled' : 'disabled'}.
);
}
}
class AnnounceForAccessibility extends React.Component<{}> {
_handleOnPress = () =>
AccessibilityInfo.announceForAccessibility('Announcement Test');
render() {
return (
);
}
}
exports.title = 'Accessibility';
exports.description = 'Examples of using Accessibility APIs.';
exports.examples = [
{
title: 'Accessibility elements',
render(): React.Element {
return ;
},
},
{
title: 'New accessibility roles and states',
render(): React.Element {
return ;
},
},
{
title: 'Accessibility action examples',
render(): React.Element {
return ;
},
},
{
title: 'Fake Slider Example',
render(): React.Element {
return ;
},
},
{
title: 'Check if the screen reader is enabled',
render(): React.Element {
return ;
},
},
{
title: 'Check if the screen reader announces',
render(): React.Element {
return ;
},
},
];