diff --git a/Libraries/Components/Switch/Switch.js b/Libraries/Components/Switch/Switch.js index c585c7d6f75bc3..237519a5e0b579 100644 --- a/Libraries/Components/Switch/Switch.js +++ b/Libraries/Components/Switch/Switch.js @@ -78,21 +78,6 @@ export type Props = $ReadOnly<{| * Identifier used to find this view in tests. */ testID?: ?string, - - /** - * @deprecated See `thumbColor`. - */ - thumbTintColor?: ?ColorValue, - - /** - * @deprecated See `trackColor.false`. - */ - tintColor?: ?ColorValue, - - /** - * @deprecated See `trackColor.true`. - */ - onTintColor?: ?ColorValue, |}>; // @see ReactSwitchManager.java @@ -146,13 +131,10 @@ class Switch extends React.Component { disabled, ios_backgroundColor, onChange, - onTintColor, onValueChange, style, testID, thumbColor, - thumbTintColor, - tintColor, trackColor, value, ...props @@ -163,15 +145,31 @@ class Switch extends React.Component { let _trackColorForFalse = trackColor?.false; let _trackColorForTrue = trackColor?.true; - // TODO: Add a warning when used. + // TODO: Remove support for these props after a couple releases. + const {thumbTintColor, tintColor, onTintColor} = (props: $FlowFixMe); if (thumbTintColor != null) { _thumbColor = thumbTintColor; + if (__DEV__) { + console.warn( + 'Switch: `thumbTintColor` is deprecated, use `_thumbColor` instead.', + ); + } } if (tintColor != null) { _trackColorForFalse = tintColor; + if (__DEV__) { + console.warn( + 'Switch: `tintColor` is deprecated, use `trackColor` instead.', + ); + } } if (onTintColor != null) { _trackColorForTrue = onTintColor; + if (__DEV__) { + console.warn( + 'Switch: `onTintColor` is deprecated, use `trackColor` instead.', + ); + } } const platformProps = diff --git a/RNTester/js/SwitchExample.js b/RNTester/js/SwitchExample.js index a8116ff243cf18..2b9988bf8a057d 100644 --- a/RNTester/js/SwitchExample.js +++ b/RNTester/js/SwitchExample.js @@ -59,17 +59,21 @@ class ColorSwitchExample extends React.Component<{}, $FlowFixMeState> { this.setState({colorFalseSwitchIsOn: value})} - onTintColor="#00ff00" style={{marginBottom: 10}} - thumbTintColor="#0000ff" - tintColor="#ff0000" + thumbColor="#0000ff" + trackColor={{ + false: '#ff0000', + true: '#00ff00', + }} value={this.state.colorFalseSwitchIsOn} /> this.setState({colorTrueSwitchIsOn: value})} - onTintColor="#00ff00" - thumbTintColor="#0000ff" - tintColor="#ff0000" + thumbColor="#0000ff" + trackColor={{ + false: '#ff0000', + true: '#00ff00', + }} value={this.state.colorTrueSwitchIsOn} />