Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
Both Android and iOS provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
-
In addition to this documentation, you might find this blog post about React Native accessibility to be useful.
Both Android and iOS provide APIs for integrating apps with assistive technologies like the bundled screen readers VoiceOver (iOS) and Talkback (Android). React Native has complimentary APIs that let your app accommodate all users.
+
+
Android and iOS differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+
Accessibility properties
+
accessible (Android, iOS)
When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
On Android, accessible={true} property for a react-native View will be translated into native focusable={true}.
In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
-
accessibilityLabel (iOS, Android)
+
accessibilityLabel (Android, iOS)
When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
To use, set the accessibilityLabel property to a custom string on your View, Text or Touchable:
In the above example, the accessibilityLabel on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
-
accessibilityHint (iOS, Android)
-
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label.
+
accessibilityHint (Android, iOS)
+
An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
To use, set the accessibilityHint property to a custom string on your View, Text or Touchable:
<TouchableOpacityaccessible={true}accessibilityLabel="Go back"accessibilityHint="Navigates to the previous screen"
- onPress={this._onPress}>
+ onPress={onPress}><Viewstyle={styles.button}><Textstyle={styles.buttonText}>Back</Text></View>
@@ -110,9 +110,9 @@
iOS In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for accessibilityHint in the iOS Developer Docs
Android In the above example, Talkback will read the hint after the label. At this time, hints cannot be turned off on Android.
-
accessibilityIgnoresInvertColors(iOS)
+
accessibilityIgnoresInvertColors (iOS)
Inverting screen colors is an Accessibility feature that makes the iPhone and iPad easier on the eyes for some people with a sensitivity to brightness, easier to distinguish for some people with color blindness, and easier to make out for some people with low vision. However, sometimes you have views such as photos that you don't want to be inverted. In this case, you can set this property to be false so that these specific views won't have their colors inverted.
-
accessibilityRole (iOS, Android)
+
accessibilityRole (Android, iOS)
accessibilityRole communicates the purpose of a component to the user of an assistive technology.
accessibilityRole can be one of the following:
@@ -144,87 +144,68 @@
timer Used to represent a timer.
toolbar Used to represent a tool bar (a container of action buttons or components).
-
accessibilityState (iOS, Android)
+
accessibilityState (Android, iOS)
Describes the current state of a component to the user of an assistive technology.
accessibilityState is an object. It contains the following fields:
-
Name
Type
Required
-
-
-
disabled
boolean
No
-
selected
boolean
No
-
checked
boolean or 'mixed'
No
-
busy
boolean
No
-
expanded
boolean
No
-
-
-
-
disabled Used to indicate whether the element is disabled or not. When true, the element cannot be interacted with.
-
selected Used to indicate whether a selectable element is currently selected or not.
-
checked Used to indicate the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
-
busy Used to indicate whether an element is currently busy or not.
-
expanded Used to indicate whether an expandable element is currently expanded or collapsed.
-
-
To use, set the accessibilityState to an object with a specific definition.
-
accessibilityValue (iOS, Android)
-
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
-
accessibilityValue is an object. It contains the following fields:
-
-
Name
Description
Type
Required
-
min
The minimum value of this component's range.
integer
Required if now is set.
-
max
The maximum value of this component's range.
integer
Required if now is set.
-
now
The current value of this component's range.
integer
No
-
text
A textual description of this component's value. Will override min, now, and max if set.
string
No
+
disabled
Indicates whether the element is disabled or not.
boolean
No
+
selected
Indicates whether a selectable element is currently selected or not.
boolean
No
+
checked
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
boolean or 'mixed'
No
+
busy
Indicates whether an element is currently busy or not.
boolean
No
+
expanded
Indicates whether an expandable element is currently expanded or collapsed.
boolean
No
-
accessibilityViewIsModal (iOS)
+
To use, set the accessibilityState to an object with a specific definition.
+
accessibilityViewIsModal (iOS)
A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to true on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to true on view C, VoiceOver does not ignore the elements in view A.
-
accessibilityElementsHidden (iOS)
+
accessibilityElementsHidden (iOS)
A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".
-
onAccessibilityTap (iOS, Android)
+
onAccessibilityTap (Android, iOS)
Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
-
onMagicTap (iOS)
+
onMagicTap (iOS)
Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an onMagicTap function, the system will traverse up the view hierarchy until it finds a view that does.
-
onAccessibilityEscape (iOS)
+
onAccessibilityEscape (iOS)
Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an onAccessibilityEscape function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
-
accessibilityLiveRegion (Android)
-
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
accessibilityLiveRegion (Android)
+
When components dynamically change, we want TalkBack to alert the end user. This is made possible by the accessibilityLiveRegion property. It can be set to none, polite and assertive:
none Accessibility services should not announce changes to this view.
polite Accessibility services should announce changes to this view.
assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
<TouchableWithoutFeedbackonPress={addOne}><Viewstyle={styles.embedded}><Text>Click me</Text></View></TouchableWithoutFeedback><TextaccessibilityLiveRegion="polite">
- Clicked {this.state.count} times
+ Clicked {count} times
</Text>
-
In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
-
importantForAccessibility (Android)
-
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
In the above example method addOne changes the state variable count. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its accessibilityLiveRegion="polite" property.
+
importantForAccessibility (Android)
+
In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The importantForAccessibility property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to auto, yes, no and no-hide-descendants (the last value will force accessibility services to ignore the component and all of its children).
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
-
Accessibility Actions
+
In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
+
Accessibility Actions
Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. In order to support accessibility actions, a component must do two things:
Define the list of actions it supports via the accessibilityActions property.
@@ -274,17 +255,17 @@
}}
/>
-
Checking if a Screen Reader is Enabled
-
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
-
Sending Accessibility Events (Android)
+
Checking if a Screen Reader is Enabled
+
The AccessibilityInfo API allows you to determine whether or not a screen reader is currently active. See the AccessibilityInfo documentation for details.
+
Sending Accessibility Events (Android)
Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event. The supported event types are typeWindowStateChanged, typeViewFocused and typeViewClicked.
You can use the volume key shortcut to toggle TalkBack. To turn on the volume key shortcut, go to the Settings app, then Accessibility. At the top, turn on Volume key shortcut.
To use the volume key shortcut, press both volume keys for 3 seconds to start an accessibility tool.
Additionally, if you prefer, you can toggle TalkBack via command line with:
-
# disable
-adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
+
# disable
+adb shell settings put secure enabled_accessibility_services com.android.talkback/com.google.android.marvin.talkback.TalkBackService
-# enable
-adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
+# enable
+adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
React component that wraps the Android-only Toolbar widget. A Toolbar can display a logo, navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and subtitle are expanded so the logo and navigation icons are displayed on the left, title and subtitle in the middle and the actions on the right.
If the toolbar has an only child, it will be displayed between the title and actions.
-
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a packager URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
+
Although the Toolbar supports remote images for the logo, navigation and action icons, this should only be used in DEV mode where require('./some_icon.png') translates into a bundler URL. In release mode you should always use a drawable resource for these icons. Using require('./some_icon.png') will do this automatically for you, so as long as you don't explicitly use e.g. {uri: 'http://...'}, you will be good.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
Port already in use
-
The React Native packager runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the packager uses.
+
The Metro bundler runs on port 8081. If another process is already using that port, you can either terminate that process, or change the port that the bundler uses.
Terminating a process on port 8081
Run the following command to find the id for the process that is listening on port 8081:
$ sudo lsof -i :8081
@@ -80,7 +80,7 @@
On Windows you can find the process using port 8081 using Resource Monitor and stop it using Task Manager.
Using a port other than 8081
-
You can configure the packager to use a port other than 8081 by using the port parameter:
+
You can configure the bundler to use a port other than 8081 by using the port parameter:
$ react-native start--port=8088
You will also need to update your applications to load the JavaScript bundle from the new port. If running on device from Xcode, you can do this by updating occurrences of 8081 to your chosen port in the node_modules/react-native/React/React.xcodeproj/project.pbxproj file.
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
