refactor(rn-tester): removed usages of Slider

Summary: # Changelog: [Internal][Removed] - removed usages of Slider inside rn-tester package Reviewed By: lunaleaps Differential Revision: D40984396 fbshipit-source-id: 6c623c0972bfdac624368506401cf3200340069f
facebook · Jan 5, 2023 · 06cf36b · 06cf36b
1 parent 55db1b2
commit 06cf36b
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 86 deletions.
diff --git a/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js b/packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js
@@ -26,7 +26,6 @@ const {
   TouchableWithoutFeedback,
   Alert,
   StyleSheet,
-  Slider,
   Platform,
   Switch,
   ScrollView,
@@ -1026,38 +1025,6 @@ class AccessibilityActionsExample extends React.Component<{}> {
   }
 }
 
-function SliderAccessibilityExample(): React.Node {
-  return (
-    <View>
-      <RNTesterBlock
-        title="Disabled Slider via disabled"
-        description="Verify with TalkBack/VoiceOver announces Slider as disabled">
-        <Slider value={25} maximumValue={100} minimumValue={0} disabled />
-      </RNTesterBlock>
-      <RNTesterBlock
-        title="Disabled Slider via accessibilityState"
-        description="Verify with TalkBack/VoiceOver announces Slider as disabled">
-        <Slider
-          value={75}
-          maximumValue={100}
-          minimumValue={0}
-          accessibilityState={{disabled: true}}
-        />
-      </RNTesterBlock>
-      <RNTesterBlock
-        title="Selected Slider"
-        description="Verify with TalkBack/VoiceOver announces Slider as selected">
-        <Slider
-          value={75}
-          maximumValue={100}
-          minimumValue={0}
-          accessibilityState={{selected: true}}
-        />
-      </RNTesterBlock>
-    </View>
-  );
-}
-
 type FakeSliderExampleState = {
   current: number,
   textualValue: 'center' | 'left' | 'right',
@@ -1663,12 +1630,6 @@ exports.examples = [
       return <AccessibilityActionsExample />;
     },
   },
-  {
-    title: 'Slider Accessibility Examples',
-    render(): React.Element<typeof SliderAccessibilityExample> {
-      return <SliderAccessibilityExample />;
-    },
-  },
   {
     title: 'Fake Slider Example',
     render(): React.Element<typeof FakeSliderExample> {

diff --git a/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js b/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js
@@ -23,11 +23,8 @@ const {
   Animated,
   StyleSheet,
   TouchableWithoutFeedback,
-  Slider,
 } = require('react-native');
 
-const AnimatedSlider = Animated.createAnimatedComponent(Slider);
-
 class Tester extends React.Component<$FlowFixMeProps, $FlowFixMeState> {
   state: any | {js: AnimatedValue, native: AnimatedValue} = {
     native: new Animated.Value(0),
@@ -237,13 +234,6 @@ class EventExample extends React.Component<{...}, $FlowFixMeState> {
             <Text>Scroll me sideways!</Text>
           </View>
         </Animated.ScrollView>
-        <AnimatedSlider
-          maximumValue={200}
-          onValueChange={Animated.event(
-            [{nativeEvent: {value: this.state.anim}}],
-            {useNativeDriver: true},
-          )}
-        />
       </View>
     );
   }
@@ -637,16 +627,6 @@ exports.examples = [
       );
     },
   },
-  {
-    title: 'Drive custom property (tap to animate)',
-    render: function (): React.Node {
-      return (
-        <Tester type="timing" config={{duration: 1000}}>
-          {anim => <AnimatedSlider style={{}} value={anim} />}
-        </Tester>
-      );
-    },
-  },
   {
     title: 'Animated value listener',
     render: function (): React.Node {

diff --git a/packages/rn-tester/js/examples/TextInput/TextInputExample.android.js b/packages/rn-tester/js/examples/TextInput/TextInputExample.android.js
@@ -12,14 +12,7 @@
 
 const React = require('react');
 
-const {
-  Text,
-  TextInput,
-  View,
-  StyleSheet,
-  Slider,
-  Switch,
-} = require('react-native');
+const {Text, TextInput, View, StyleSheet, Switch} = require('react-native');
 
 const TextInputSharedExamples = require('./TextInputSharedExamples.js');
 
@@ -57,8 +50,8 @@ class AutogrowingTextInputExample extends React.Component<{...}> {
     /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
      * when making Flow check .android.js files. */
     this.state = {
-      width: 100,
       multiline: true,
+      fullWidth: true,
       text: '',
       contentSize: {
         width: 0,
@@ -85,16 +78,16 @@ class AutogrowingTextInputExample extends React.Component<{...}> {
     const {style, multiline, ...props} = this.props;
     return (
       <View>
-        <Text>Width:</Text>
-        <Slider
-          value={100}
-          minimumValue={0}
-          maximumValue={100}
-          step={10}
+        <Text>Full width:</Text>
+        <Switch
+          /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
+           * found when making Flow check .android.js files. */
+          value={this.state.fullWidth}
           /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
            * found when making Flow check .android.js files. */
-          onValueChange={value => this.setState({width: value})}
+          onValueChange={value => this.setState({fullWidth: value})}
         />
+
         <Text>Multiline:</Text>
         <Switch
           /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
@@ -104,6 +97,7 @@ class AutogrowingTextInputExample extends React.Component<{...}> {
            * found when making Flow check .android.js files. */
           onValueChange={value => this.setState({multiline: value})}
         />
+
         <Text>TextInput:</Text>
         {/* $FlowFixMe(>=0.122.0 site=react_native_android_fb) This comment
          * suppresses an error found when Flow v0.122.0 was deployed. To see
@@ -114,7 +108,7 @@ class AutogrowingTextInputExample extends React.Component<{...}> {
           multiline={this.state.multiline}
           /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
            * found when making Flow check .android.js files. */
-          style={[style, {width: this.state.width + '%'}]}
+          style={[style, {width: this.state.fullWidth ? '100%' : '50%'}]}
           /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was
            * found when making Flow check .android.js files. */
           onChangeText={value => this.setState({text: value})}

diff --git a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js b/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js
@@ -19,7 +19,6 @@ const {
   TextInput,
   View,
   StyleSheet,
-  Slider,
   Switch,
   Alert,
 } = require('react-native');
@@ -214,8 +213,8 @@ class AutogrowingTextInputExample extends React.Component<
     super(props);
 
     this.state = {
-      width: 100,
       multiline: true,
+      fullWidth: true,
       text: '',
       contentSize: {
         width: 0,
@@ -234,24 +233,23 @@ class AutogrowingTextInputExample extends React.Component<
     const {style, multiline, ...props} = this.props;
     return (
       <View>
-        <Text>Width:</Text>
-        <Slider
-          value={100}
-          minimumValue={0}
-          maximumValue={100}
-          step={10}
-          onValueChange={value => this.setState({width: value})}
+        <Text>Full width:</Text>
+        <Switch
+          value={this.state.fullWidth}
+          onValueChange={value => this.setState({fullWidth: value})}
         />
+
         <Text>Multiline:</Text>
         <Switch
           value={this.state.multiline}
           onValueChange={value => this.setState({multiline: value})}
         />
+
         <Text>TextInput:</Text>
         <TextInput
           value="prop"
           multiline={this.state.multiline}
-          style={[style, {width: this.state.width + '%'}]}
+          style={[style, {width: this.state.fullWidth ? '100%' : '50%'}]}
           onChangeText={value => this.setState({text: value})}
           onContentSizeChange={event =>
             this.setState({contentSize: event.nativeEvent.contentSize})