diff --git a/packages/examples/pages/switch/index.js b/packages/examples/pages/switch/index.js
index 6223b816..a6b8a565 100644
--- a/packages/examples/pages/switch/index.js
+++ b/packages/examples/pages/switch/index.js
@@ -24,6 +24,14 @@ export default function SwitchPage() {
+
+
+
+
+
+
+
+
diff --git a/packages/react-native-web/src/exports/Switch/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Switch/__tests__/__snapshots__/index-test.js.snap
new file mode 100644
index 00000000..bec819f2
--- /dev/null
+++ b/packages/react-native-web/src/exports/Switch/__tests__/__snapshots__/index-test.js.snap
@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/Switch disabled when "true" and value="false", a disabled checkbox is rendered with provided false value of trackColor 1`] = `
+
+`;
+
+exports[`components/Switch disabled when "true" and value="false", a disabled checkbox is rendered with provided thumbColor 1`] = `
+
+`;
+
+exports[`components/Switch disabled when "true" and value="false", a disabled checkbox is rendered with provided trackColor 1`] = `
+
+`;
+
+exports[`components/Switch disabled when "true" and value="true", a disabled checkbox is rendered with provided activeThumbColor 1`] = `
+
+`;
+
+exports[`components/Switch disabled when "true" and value="true", a disabled checkbox is rendered with provided activeTrackColor 1`] = `
+
+`;
+
+exports[`components/Switch disabled when "true" and value="true", a disabled checkbox is rendered with provided true value of trackColor 1`] = `
+
+`;
diff --git a/packages/react-native-web/src/exports/Switch/__tests__/index-test.js b/packages/react-native-web/src/exports/Switch/__tests__/index-test.js
index 0435cfb9..92b17310 100644
--- a/packages/react-native-web/src/exports/Switch/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Switch/__tests__/index-test.js
@@ -8,6 +8,14 @@ function findCheckbox(container) {
return container.firstChild.querySelector('input');
}
+function findSwitchTrack(container) {
+ return container.firstChild.querySelector('div');
+}
+
+function findSwitchThumb(container) {
+ return container.firstChild.childNodes[1];
+}
+
describe('components/Switch', () => {
test('accessibilityLabel is applied to native checkbox', () => {
const { container } = render();
@@ -24,6 +32,40 @@ describe('components/Switch', () => {
const { container } = render();
expect(findCheckbox(container).disabled).toBe(true);
});
+
+ test('when "true" and value="true", a disabled checkbox is rendered with provided activeTrackColor', () => {
+ const { container } = render();
+ expect(findSwitchTrack(container)).toMatchSnapshot();
+ });
+
+ test('when "true" and value="true", a disabled checkbox is rendered with provided activeThumbColor', () => {
+ const { container } = render();
+ expect(findSwitchThumb(container)).toMatchSnapshot();
+ });
+
+ test('when "true" and value="false", a disabled checkbox is rendered with provided trackColor', () => {
+ const { container } = render();
+ expect(findSwitchTrack(container)).toMatchSnapshot();
+ });
+
+ test('when "true" and value="false", a disabled checkbox is rendered with provided thumbColor', () => {
+ const { container } = render();
+ expect(findSwitchThumb(container)).toMatchSnapshot();
+ });
+
+ test('when "true" and value="true", a disabled checkbox is rendered with provided true value of trackColor', () => {
+ const { container } = render(
+
+ );
+ expect(findSwitchTrack(container)).toMatchSnapshot();
+ });
+
+ test('when "true" and value="false", a disabled checkbox is rendered with provided false value of trackColor', () => {
+ const { container } = render(
+
+ );
+ expect(findSwitchTrack(container)).toMatchSnapshot();
+ });
});
describe('onValueChange', () => {
diff --git a/packages/react-native-web/src/exports/Switch/index.js b/packages/react-native-web/src/exports/Switch/index.js
index dbcca6f9..8ed7be98 100644
--- a/packages/react-native-web/src/exports/Switch/index.js
+++ b/packages/react-native-web/src/exports/Switch/index.js
@@ -31,19 +31,27 @@ const emptyObject = {};
const thumbDefaultBoxShadow = '0px 1px 3px rgba(0,0,0,0.5)';
const thumbFocusedBoxShadow = `${thumbDefaultBoxShadow}, 0 0 0 10px rgba(0,0,0,0.1)`;
+const defaultActiveTrackColor = '#A3D3CF';
+const defaultTrackColor = '#939393';
+const defaultDisabledTrackColor = '#D5D5D5';
+
+const defaultActiveThumbColor = '#009688';
+const defaultThumbColor = '#FAFAFA';
+const defaultDisabledThumbColor = '#BDBDBD';
+
const Switch: React.AbstractComponent<
SwitchProps,
React.ElementRef
> = React.forwardRef((props, forwardedRef) => {
const {
accessibilityLabel,
- activeThumbColor = '#009688',
- activeTrackColor = '#A3D3CF',
+ activeThumbColor,
+ activeTrackColor,
disabled = false,
onValueChange,
style = emptyObject,
- thumbColor = '#FAFAFA',
- trackColor = '#939393',
+ thumbColor,
+ trackColor,
value = false,
...other
} = props;
@@ -69,31 +77,74 @@ const Switch: React.AbstractComponent<
const minWidth = multiplyStyleLengthValue(height, 2);
const width = styleWidth > minWidth ? styleWidth : minWidth;
const trackBorderRadius = multiplyStyleLengthValue(height, 0.5);
+
const trackCurrentColor = (function () {
if (value === true) {
if (trackColor != null && typeof trackColor === 'object') {
return trackColor.true;
} else {
- return activeTrackColor;
+ return activeTrackColor ?? defaultActiveTrackColor;
}
} else {
if (trackColor != null && typeof trackColor === 'object') {
return trackColor.false;
} else {
- return trackColor;
+ return trackColor ?? defaultTrackColor;
}
}
})();
- const thumbCurrentColor = value ? activeThumbColor : thumbColor;
+
+ const thumbCurrentColor = value
+ ? activeThumbColor ?? defaultActiveThumbColor
+ : thumbColor ?? defaultThumbColor;
+
const thumbHeight = height;
const thumbWidth = thumbHeight;
const rootStyle = [styles.root, style, disabled && styles.cursorDefault, { height, width }];
+ const disabledTrackColor = (function () {
+ if (value === true) {
+ if (
+ (typeof activeTrackColor === 'string' && activeTrackColor != null) ||
+ (typeof trackColor === 'object' && trackColor?.true)
+ ) {
+ return trackCurrentColor;
+ } else {
+ return defaultDisabledTrackColor;
+ }
+ } else {
+ if (
+ (typeof trackColor === 'string' && trackColor != null) ||
+ (typeof trackColor === 'object' && trackColor?.false)
+ ) {
+ return trackCurrentColor;
+ } else {
+ return defaultDisabledTrackColor;
+ }
+ }
+ })();
+
+ const disabledThumbColor = (function () {
+ if (value === true) {
+ if (activeThumbColor == null) {
+ return defaultDisabledThumbColor;
+ } else {
+ return thumbCurrentColor;
+ }
+ } else {
+ if (thumbColor == null) {
+ return defaultDisabledThumbColor;
+ } else {
+ return thumbCurrentColor;
+ }
+ }
+ })();
+
const trackStyle = [
styles.track,
{
- backgroundColor: disabled ? '#D5D5D5' : trackCurrentColor,
+ backgroundColor: disabled ? disabledTrackColor : trackCurrentColor,
borderRadius: trackBorderRadius
}
];
@@ -102,7 +153,7 @@ const Switch: React.AbstractComponent<
styles.thumb,
value && styles.thumbActive,
{
- backgroundColor: disabled ? '#BDBDBD' : thumbCurrentColor,
+ backgroundColor: disabled ? disabledThumbColor : thumbCurrentColor,
height: thumbHeight,
marginStart: value ? multiplyStyleLengthValue(thumbWidth, -1) : 0,
width: thumbWidth