diff --git a/src/components/OpacityView.js b/src/components/OpacityView.js
index 1592befdf127..241d83973cf8 100644
--- a/src/components/OpacityView.js
+++ b/src/components/OpacityView.js
@@ -21,7 +21,7 @@ const propTypes = {
* @default []
*/
// eslint-disable-next-line react/forbid-prop-types
- style: PropTypes.arrayOf(PropTypes.object),
+ style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
/**
* The value to use for the opacity when the view is dimmed
diff --git a/src/components/Switch.js b/src/components/Switch.js
index e4de23650556..f0fd20f7af48 100644
--- a/src/components/Switch.js
+++ b/src/components/Switch.js
@@ -1,7 +1,8 @@
import React, {Component} from 'react';
-import {TouchableOpacity, Animated} from 'react-native';
+import {Animated} from 'react-native';
import PropTypes from 'prop-types';
import styles from '../styles/styles';
+import * as Pressables from './Pressable';
const propTypes = {
/** Whether the switch is toggled to the on position */
@@ -9,8 +10,12 @@ const propTypes = {
/** Callback to fire when the switch is toggled */
onToggle: PropTypes.func.isRequired,
+
+ /** Accessibility label for the switch */
+ accessibilityLabel: PropTypes.string.isRequired,
};
+const PressableWithFeedback = Pressables.PressableWithFeedback;
class Switch extends Component {
constructor(props) {
super(props);
@@ -19,6 +24,7 @@ class Switch extends Component {
this.offsetX = new Animated.Value(props.isOn ? this.onPosition : this.offPosition);
this.toggleSwitch = this.toggleSwitch.bind(this);
+ this.toggleAction = this.toggleAction.bind(this);
}
componentDidUpdate(prevProps) {
@@ -29,6 +35,7 @@ class Switch extends Component {
this.toggleSwitch();
}
+ // animates the switch to the on or off position
toggleSwitch() {
Animated.timing(this.offsetX, {
toValue: this.props.isOn ? this.onPosition : this.offPosition,
@@ -37,16 +44,28 @@ class Switch extends Component {
}).start();
}
+ // executes the callback passed in as a prop
+ toggleAction() {
+ this.props.onToggle(!this.props.isOn);
+ }
+
render() {
const switchTransform = {transform: [{translateX: this.offsetX}]};
return (
- this.props.onToggle(!this.props.isOn)}
+ onPress={this.toggleAction}
+ onLongPress={this.toggleAction}
+ accessibilityRole="switch"
+ accessibilityState={{checked: this.props.isOn}}
+ aria-checked={this.props.isOn}
+ accessibilityLabel={this.props.accessibilityLabel}
+ // disable hover dim for switch
+ hoverDimmingValue={1}
+ pressDimmingValue={0.8}
>
-
+
);
}
}
diff --git a/src/components/TestToolMenu.js b/src/components/TestToolMenu.js
index acf9a426d54f..2e9c7fd4027c 100644
--- a/src/components/TestToolMenu.js
+++ b/src/components/TestToolMenu.js
@@ -51,6 +51,7 @@ const TestToolMenu = (props) => (
{!CONFIG.IS_USING_LOCAL_WEB && (
User.setShouldUseStagingServer(!lodashGet(props, 'user.shouldUseStagingServer', ApiUtils.isUsingStagingApi()))}
/>
@@ -60,6 +61,7 @@ const TestToolMenu = (props) => (
{/* When toggled the app will be forced offline. */}
Network.setShouldForceOffline(!props.network.shouldForceOffline)}
/>
@@ -68,6 +70,7 @@ const TestToolMenu = (props) => (
{/* When toggled all network requests will fail. */}
Network.setShouldFailAllRequests(!props.network.shouldFailAllRequests)}
/>
diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js
index 4fdcef95d07e..03b79d2dcae2 100755
--- a/src/pages/settings/Preferences/PreferencesPage.js
+++ b/src/pages/settings/Preferences/PreferencesPage.js
@@ -71,6 +71,7 @@ const PreferencesPage = (props) => {
diff --git a/src/pages/settings/Profile/TimezoneInitialPage.js b/src/pages/settings/Profile/TimezoneInitialPage.js
index 7c5e68106d5d..1cf7a06f7e95 100644
--- a/src/pages/settings/Profile/TimezoneInitialPage.js
+++ b/src/pages/settings/Profile/TimezoneInitialPage.js
@@ -55,6 +55,7 @@ const TimezoneInitialPage = (props) => {
{props.translate('timezonePage.getLocationAutomatically')}