diff --git a/Libraries/Components/Switch/AndroidSwitchNativeComponent.js b/Libraries/Components/Switch/AndroidSwitchNativeComponent.js index 7d7b8dd36820c3..90f56c05d8c490 100644 --- a/Libraries/Components/Switch/AndroidSwitchNativeComponent.js +++ b/Libraries/Components/Switch/AndroidSwitchNativeComponent.js @@ -39,6 +39,7 @@ type NativeProps = $ReadOnly<{| on?: WithDefault, thumbTintColor?: ?ColorValue, trackTintColor?: ?ColorValue, + android_minWidth?: number, // Events onChange?: BubblingEventHandler, diff --git a/Libraries/Components/Switch/Switch.js b/Libraries/Components/Switch/Switch.js index 4135959bb43710..6c0146f01490cd 100644 --- a/Libraries/Components/Switch/Switch.js +++ b/Libraries/Components/Switch/Switch.js @@ -71,6 +71,12 @@ export type Props = $ReadOnly<{| */ ios_backgroundColor?: ?ColorValue, + /** + * Only Android, custom switch minimum width size. + * Switch width should be also separately specified in the style prop. + **/ + android_minWidth?: number, + /** Invoked when the user tries to change the value of the switch. Receives the change event as an argument. If you want to only receive the new @@ -143,6 +149,7 @@ class Switch extends React.Component { thumbColor, trackColor, value, + android_minWidth, ...props } = this.props; @@ -157,6 +164,7 @@ class Switch extends React.Component { thumbTintColor: thumbColor, trackColorForFalse: trackColorForFalse, trackColorForTrue: trackColorForTrue, + android_minWidth, trackTintColor: value === true ? trackColorForTrue : trackColorForFalse, }; diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitchManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitchManager.java index e1a20562ae1032..8401684b78b05d 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitchManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitchManager.java @@ -178,6 +178,12 @@ public void setTrackTintColor(ReactSwitch view, @Nullable Integer color) { view.setTrackColor(color); } + @ReactProp(name = "android_minWidth") + public void setSwitchMinWidth(ReactSwitch view, float dp) { + Integer pixels = Math.round(PixelUtil.toPixelFromDIP(dp)); + view.setSwitchMinWidth(pixels); + } + @Override public void setNativeValue(ReactSwitch view, boolean value) { setValueInternal(view, value); diff --git a/packages/rn-tester/js/examples/Switch/SwitchExample.js b/packages/rn-tester/js/examples/Switch/SwitchExample.js index 1acbb65c765608..0915d50f74765b 100644 --- a/packages/rn-tester/js/examples/Switch/SwitchExample.js +++ b/packages/rn-tester/js/examples/Switch/SwitchExample.js @@ -11,7 +11,7 @@ 'use strict'; const React = require('react'); -const {Switch, Text, View} = require('react-native'); +const {Button, Switch, Text, View} = require('react-native'); type OnOffIndicatorProps = $ReadOnly<{|on: boolean, testID: string|}>; function OnOffIndicator({on, testID}: OnOffIndicatorProps) { @@ -202,6 +202,56 @@ class EventSwitchExample extends React.Component<{...}, $FlowFixMeState> { } } +type CustomSizeSwitchExampleState = $ReadOnly<{| + trueSwitchIsOn: boolean, + falseSwitchIsOn: boolean, + width: number, +|}>; + +class CustomSizeSwitchExample extends React.Component< + {||}, + CustomSizeSwitchExampleState, +> { + state = { + trueSwitchIsOn: true, + falseSwitchIsOn: false, + width: 50, + }; + + render() { + const {width} = this.state; + return ( + <> + + this.setState({falseSwitchIsOn: value})} + trackColor={{ + true: 'yellow', + false: 'purple', + }} + value={this.state.falseSwitchIsOn} + android_minWidth={width} + style={{width}} + /> + +