From 6958bbb28c0f735db6026f3500df2fbbf58e697f Mon Sep 17 00:00:00 2001
From: Luna Wei <luwe@fb.com>
Date: Fri, 22 Apr 2022 16:25:25 -0700
Subject: [PATCH] Fix up lint errors under react-native-github (#33622)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/33622

Changelog: [Internal] Clean up eslint errors

Reviewed By: yungsters

Differential Revision: D35599445

fbshipit-source-id: bbb9061a3cf9df32daacad9a9b44eba94d3ce48c
---
 Libraries/Lists/VirtualizedSectionList.js     |   1 +
 .../NativeComponentRegistry.js                |   2 -
 .../js/components/RNTesterModuleList.js       |   1 +
 .../examples/Appearance/AppearanceExample.js  | 127 ++--
 .../examples/Dimensions/DimensionsExample.js  |   9 +-
 .../examples/ScrollView/ScrollViewExample.js  | 327 +++++-----
 .../SectionList/SectionList-scrollable.js     |   2 +
 .../js/examples/Timer/TimerExample.js         |  91 ++-
 .../rn-tester/js/examples/View/ViewExample.js | 561 +++++++++---------
 scripts/bump-oss-version.js                   |  15 +-
 scripts/prepare-package-for-release.js        |   1 -
 11 files changed, 558 insertions(+), 579 deletions(-)

diff --git a/Libraries/Lists/VirtualizedSectionList.js b/Libraries/Lists/VirtualizedSectionList.js
index 8c031d54975..3420e17d926 100644
--- a/Libraries/Lists/VirtualizedSectionList.js
+++ b/Libraries/Lists/VirtualizedSectionList.js
@@ -338,6 +338,7 @@ class VirtualizedSectionList<
 
   _renderItem =
     (listItemCount: number) =>
+    // eslint-disable-next-line react/no-unstable-nested-components
     ({item, index}: {item: Item, index: number, ...}) => {
       const info = this._subExtractor(index);
       if (!info) {
diff --git a/Libraries/NativeComponent/NativeComponentRegistry.js b/Libraries/NativeComponent/NativeComponentRegistry.js
index e56021877f0..bcddcdaf6c8 100644
--- a/Libraries/NativeComponent/NativeComponentRegistry.js
+++ b/Libraries/NativeComponent/NativeComponentRegistry.js
@@ -23,8 +23,6 @@ import * as React from 'react';
 
 let getRuntimeConfig;
 
-let componentNameToExists: Map<string, boolean> = new Map();
-
 /**
  * Configures a function that is called to determine whether a given component
  * should be registered using reflection of the native component at runtime.
diff --git a/packages/rn-tester/js/components/RNTesterModuleList.js b/packages/rn-tester/js/components/RNTesterModuleList.js
index e7e6b2fc0f9..0ccbe6216fd 100644
--- a/packages/rn-tester/js/components/RNTesterModuleList.js
+++ b/packages/rn-tester/js/components/RNTesterModuleList.js
@@ -153,6 +153,7 @@ const RNTesterModuleList: React$AbstractComponent<any, void> = React.memo(
               automaticallyAdjustContentInsets={false}
               keyboardDismissMode="on-drag"
               renderSectionHeader={renderSectionHeader}
+              // eslint-disable-next-line react/no-unstable-nested-components
               ListFooterComponent={() => <View style={{height: 80}} />}
             />
           )}
diff --git a/packages/rn-tester/js/examples/Appearance/AppearanceExample.js b/packages/rn-tester/js/examples/Appearance/AppearanceExample.js
index 8c7e97588a2..d19d8a5832f 100644
--- a/packages/rn-tester/js/examples/Appearance/AppearanceExample.js
+++ b/packages/rn-tester/js/examples/Appearance/AppearanceExample.js
@@ -77,6 +77,70 @@ const ThemedText = props => (
   </RNTesterThemeContext.Consumer>
 );
 
+const AppearanceViaHook = () => {
+  const colorScheme = useColorScheme();
+  return (
+    <RNTesterThemeContext.Provider
+      value={colorScheme === 'dark' ? themes.dark : themes.light}>
+      <ThemedContainer>
+        <ThemedText>useColorScheme(): {colorScheme}</ThemedText>
+      </ThemedContainer>
+    </RNTesterThemeContext.Provider>
+  );
+};
+
+const ColorShowcase = props => (
+  <RNTesterThemeContext.Consumer>
+    {theme => {
+      return (
+        <View
+          style={{
+            marginVertical: 20,
+            backgroundColor: theme.SystemBackgroundColor,
+          }}>
+          <Text style={{fontWeight: '700', color: theme.LabelColor}}>
+            {props.themeName}
+          </Text>
+          {Object.keys(theme).map(key => (
+            <View style={{flexDirection: 'row'}} key={key}>
+              <View
+                style={{
+                  width: 50,
+                  height: 50,
+                  paddingHorizontal: 8,
+                  paddingVertical: 2,
+                  backgroundColor: theme[key],
+                }}
+              />
+              <View>
+                <Text
+                  style={{
+                    paddingHorizontal: 16,
+                    paddingVertical: 2,
+                    color: theme.LabelColor,
+                    fontWeight: '600',
+                  }}>
+                  {key}
+                </Text>
+                <Text
+                  style={{
+                    paddingHorizontal: 16,
+                    paddingVertical: 2,
+                    color: theme.LabelColor,
+                  }}>
+                  {typeof theme[key] === 'string'
+                    ? theme[key]
+                    : JSON.stringify(theme[key])}
+                </Text>
+              </View>
+            </View>
+          ))}
+        </View>
+      );
+    }}
+  </RNTesterThemeContext.Consumer>
+);
+
 exports.title = 'Appearance';
 exports.category = 'UI';
 exports.documentationURL = 'https://reactnative.dev/docs/appearance';
@@ -85,17 +149,6 @@ exports.examples = [
   {
     title: 'useColorScheme hook',
     render(): React.Node {
-      const AppearanceViaHook = () => {
-        const colorScheme = useColorScheme();
-        return (
-          <RNTesterThemeContext.Provider
-            value={colorScheme === 'dark' ? themes.dark : themes.light}>
-            <ThemedContainer>
-              <ThemedText>useColorScheme(): {colorScheme}</ThemedText>
-            </ThemedContainer>
-          </RNTesterThemeContext.Provider>
-        );
-      };
       return <AppearanceViaHook />;
     },
   },
@@ -155,58 +208,6 @@ exports.examples = [
     title: 'RNTester App Colors',
     description: 'A light and a dark theme based on standard iOS 13 colors.',
     render(): React.Element<any> {
-      const ColorShowcase = props => (
-        <RNTesterThemeContext.Consumer>
-          {theme => {
-            return (
-              <View
-                style={{
-                  marginVertical: 20,
-                  backgroundColor: theme.SystemBackgroundColor,
-                }}>
-                <Text style={{fontWeight: '700', color: theme.LabelColor}}>
-                  {props.themeName}
-                </Text>
-                {Object.keys(theme).map(key => (
-                  <View style={{flexDirection: 'row'}} key={key}>
-                    <View
-                      style={{
-                        width: 50,
-                        height: 50,
-                        paddingHorizontal: 8,
-                        paddingVertical: 2,
-                        backgroundColor: theme[key],
-                      }}
-                    />
-                    <View>
-                      <Text
-                        style={{
-                          paddingHorizontal: 16,
-                          paddingVertical: 2,
-                          color: theme.LabelColor,
-                          fontWeight: '600',
-                        }}>
-                        {key}
-                      </Text>
-                      <Text
-                        style={{
-                          paddingHorizontal: 16,
-                          paddingVertical: 2,
-                          color: theme.LabelColor,
-                        }}>
-                        {typeof theme[key] === 'string'
-                          ? theme[key]
-                          : JSON.stringify(theme[key])}
-                      </Text>
-                    </View>
-                  </View>
-                ))}
-              </View>
-            );
-          }}
-        </RNTesterThemeContext.Consumer>
-      );
-
       return (
         <View>
           <RNTesterThemeContext.Provider value={themes.light}>
diff --git a/packages/rn-tester/js/examples/Dimensions/DimensionsExample.js b/packages/rn-tester/js/examples/Dimensions/DimensionsExample.js
index 8aeae21e86e..e8b8554b2aa 100644
--- a/packages/rn-tester/js/examples/Dimensions/DimensionsExample.js
+++ b/packages/rn-tester/js/examples/Dimensions/DimensionsExample.js
@@ -42,6 +42,11 @@ class DimensionsSubscription extends React.Component<
   }
 }
 
+const DimensionsViaHook = () => {
+  const dims = useWindowDimensions();
+  return <Text>{JSON.stringify(dims, null, 2)}</Text>;
+};
+
 exports.title = 'Dimensions';
 exports.category = 'UI';
 exports.documentationURL = 'https://reactnative.dev/docs/dimensions';
@@ -50,10 +55,6 @@ exports.examples = [
   {
     title: 'useWindowDimensions hook',
     render(): React.Node {
-      const DimensionsViaHook = () => {
-        const dims = useWindowDimensions();
-        return <Text>{JSON.stringify(dims, null, 2)}</Text>;
-      };
       return <DimensionsViaHook />;
     },
   },
diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
index 27934da4b0b..b16cd20d5bf 100644
--- a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
+++ b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
@@ -28,6 +28,166 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import ScrollViewPressableStickyHeaderExample from './ScrollViewPressableStickyHeaderExample';
 
+class EnableDisableList extends React.Component<{}, {scrollEnabled: boolean}> {
+  state = {
+    scrollEnabled: true,
+  };
+  render() {
+    return (
+      <View>
+        <ScrollView
+          automaticallyAdjustContentInsets={false}
+          style={styles.scrollView}
+          scrollEnabled={this.state.scrollEnabled}>
+          {ITEMS.map(createItemRow)}
+        </ScrollView>
+        <Text>
+          {'Scrolling enabled = ' + this.state.scrollEnabled.toString()}
+        </Text>
+        <Button
+          label="Disable Scrolling"
+          onPress={() => {
+            this.setState({scrollEnabled: false});
+          }}
+        />
+        <Button
+          label="Enable Scrolling"
+          onPress={() => {
+            this.setState({scrollEnabled: true});
+          }}
+        />
+      </View>
+    );
+  }
+}
+
+let AppendingListItemCount = 6;
+class AppendingList extends React.Component<
+  {},
+  {items: Array<React.Element<typeof Item>>},
+> {
+  state = {
+    items: [...Array(AppendingListItemCount)].map((_, ii) => (
+      <Item msg={`Item ${ii}`} />
+    )),
+  };
+  render() {
+    return (
+      <View>
+        <ScrollView
+          automaticallyAdjustContentInsets={false}
+          maintainVisibleContentPosition={{
+            minIndexForVisible: 1,
+            autoscrollToTopThreshold: 10,
+          }}
+          style={styles.scrollView}>
+          {this.state.items.map(item =>
+            React.cloneElement(item, {key: item.props.msg}),
+          )}
+        </ScrollView>
+        <ScrollView
+          horizontal={true}
+          automaticallyAdjustContentInsets={false}
+          maintainVisibleContentPosition={{
+            minIndexForVisible: 1,
+            autoscrollToTopThreshold: 10,
+          }}
+          style={[styles.scrollView, styles.horizontalScrollView]}>
+          {this.state.items.map(item =>
+            React.cloneElement(item, {key: item.props.msg, style: null}),
+          )}
+        </ScrollView>
+        <View style={styles.row}>
+          <Button
+            label="Add to top"
+            onPress={() => {
+              this.setState(state => {
+                const idx = AppendingListItemCount++;
+                return {
+                  items: [
+                    <Item style={{paddingTop: idx * 5}} msg={`Item ${idx}`} />,
+                  ].concat(state.items),
+                };
+              });
+            }}
+          />
+          <Button
+            label="Remove top"
+            onPress={() => {
+              this.setState(state => ({
+                items: state.items.slice(1),
+              }));
+            }}
+          />
+          <Button
+            label="Change height top"
+            onPress={() => {
+              this.setState(state => ({
+                items: [
+                  React.cloneElement(state.items[0], {
+                    style: {paddingBottom: Math.random() * 40},
+                  }),
+                ].concat(state.items.slice(1)),
+              }));
+            }}
+          />
+        </View>
+        <View style={styles.row}>
+          <Button
+            label="Add to end"
+            onPress={() => {
+              this.setState(state => ({
+                items: state.items.concat(
+                  <Item msg={`Item ${AppendingListItemCount++}`} />,
+                ),
+              }));
+            }}
+          />
+          <Button
+            label="Remove end"
+            onPress={() => {
+              this.setState(state => ({
+                items: state.items.slice(0, -1),
+              }));
+            }}
+          />
+          <Button
+            label="Change height end"
+            onPress={() => {
+              this.setState(state => ({
+                items: state.items.slice(0, -1).concat(
+                  React.cloneElement(state.items[state.items.length - 1], {
+                    style: {paddingBottom: Math.random() * 40},
+                  }),
+                ),
+              }));
+            }}
+          />
+        </View>
+      </View>
+    );
+  }
+}
+
+function CenterContentList(): React.Node {
+  return (
+    <ScrollView style={styles.scrollView} centerContent={true}>
+      <Text>This should be in center.</Text>
+    </ScrollView>
+  );
+}
+
+function ContentOffsetList(): React.Node {
+  return (
+    <ScrollView
+      style={[styles.scrollView, {height: 100}]}
+      horizontal={true}
+      contentOffset={{x: 100, y: 0}}>
+      {ITEMS.map(createItemRow)}
+    </ScrollView>
+  );
+}
+
 exports.displayName = 'ScrollViewExample';
 exports.title = 'ScrollView';
 exports.documentationURL = 'https://reactnative.dev/docs/scrollview';
@@ -112,41 +272,6 @@ const examples = ([
     title: '<ScrollView> enable & disable\n',
     description: 'ScrollView scrolling behaviour can be disabled and enabled',
     render: function (): React.Node {
-      class EnableDisableList extends React.Component<
-        {},
-        {scrollEnabled: boolean},
-      > {
-        state = {
-          scrollEnabled: true,
-        };
-        render() {
-          return (
-            <View>
-              <ScrollView
-                automaticallyAdjustContentInsets={false}
-                style={styles.scrollView}
-                scrollEnabled={this.state.scrollEnabled}>
-                {ITEMS.map(createItemRow)}
-              </ScrollView>
-              <Text>
-                {'Scrolling enabled = ' + this.state.scrollEnabled.toString()}
-              </Text>
-              <Button
-                label="Disable Scrolling"
-                onPress={() => {
-                  this.setState({scrollEnabled: false});
-                }}
-              />
-              <Button
-                label="Enable Scrolling"
-                onPress={() => {
-                  this.setState({scrollEnabled: true});
-                }}
-              />
-            </View>
-          );
-        }
-      }
       return <EnableDisableList />;
     },
   },
@@ -275,119 +400,6 @@ if (Platform.OS === 'ios') {
       'The `maintainVisibleContentPosition` prop allows insertions to either end of the content ' +
       'without causing the visible content to jump. Re-ordering is not supported.',
     render: function () {
-      let itemCount = 6;
-      class AppendingList extends React.Component<
-        {},
-        {items: Array<React.Element<typeof Item>>},
-      > {
-        state = {
-          items: [...Array(itemCount)].map((_, ii) => (
-            <Item msg={`Item ${ii}`} />
-          )),
-        };
-        render() {
-          return (
-            <View>
-              <ScrollView
-                automaticallyAdjustContentInsets={false}
-                maintainVisibleContentPosition={{
-                  minIndexForVisible: 1,
-                  autoscrollToTopThreshold: 10,
-                }}
-                style={styles.scrollView}>
-                {this.state.items.map(item =>
-                  React.cloneElement(item, {key: item.props.msg}),
-                )}
-              </ScrollView>
-              <ScrollView
-                horizontal={true}
-                automaticallyAdjustContentInsets={false}
-                maintainVisibleContentPosition={{
-                  minIndexForVisible: 1,
-                  autoscrollToTopThreshold: 10,
-                }}
-                style={[styles.scrollView, styles.horizontalScrollView]}>
-                {this.state.items.map(item =>
-                  React.cloneElement(item, {key: item.props.msg, style: null}),
-                )}
-              </ScrollView>
-              <View style={styles.row}>
-                <Button
-                  label="Add to top"
-                  onPress={() => {
-                    this.setState(state => {
-                      const idx = itemCount++;
-                      return {
-                        items: [
-                          <Item
-                            style={{paddingTop: idx * 5}}
-                            msg={`Item ${idx}`}
-                          />,
-                        ].concat(state.items),
-                      };
-                    });
-                  }}
-                />
-                <Button
-                  label="Remove top"
-                  onPress={() => {
-                    this.setState(state => ({
-                      items: state.items.slice(1),
-                    }));
-                  }}
-                />
-                <Button
-                  label="Change height top"
-                  onPress={() => {
-                    this.setState(state => ({
-                      items: [
-                        React.cloneElement(state.items[0], {
-                          style: {paddingBottom: Math.random() * 40},
-                        }),
-                      ].concat(state.items.slice(1)),
-                    }));
-                  }}
-                />
-              </View>
-              <View style={styles.row}>
-                <Button
-                  label="Add to end"
-                  onPress={() => {
-                    this.setState(state => ({
-                      items: state.items.concat(
-                        <Item msg={`Item ${itemCount++}`} />,
-                      ),
-                    }));
-                  }}
-                />
-                <Button
-                  label="Remove end"
-                  onPress={() => {
-                    this.setState(state => ({
-                      items: state.items.slice(0, -1),
-                    }));
-                  }}
-                />
-                <Button
-                  label="Change height end"
-                  onPress={() => {
-                    this.setState(state => ({
-                      items: state.items.slice(0, -1).concat(
-                        React.cloneElement(
-                          state.items[state.items.length - 1],
-                          {
-                            style: {paddingBottom: Math.random() * 40},
-                          },
-                        ),
-                      ),
-                    }));
-                  }}
-                />
-              </View>
-            </View>
-          );
-        }
-      }
       return <AppendingList />;
     },
   });
@@ -396,13 +408,6 @@ if (Platform.OS === 'ios') {
     description:
       'ScrollView puts its content in the center if the content is smaller than scroll view',
     render: function (): React.Node {
-      function CenterContentList(): React.Node {
-        return (
-          <ScrollView style={styles.scrollView} centerContent={true}>
-            <Text>This should be in center.</Text>
-          </ScrollView>
-        );
-      }
       return <CenterContentList />;
     },
   });
@@ -410,17 +415,7 @@ if (Platform.OS === 'ios') {
     title: '<ScrollView> (contentOffset = {x: 100, y: 0})\n',
     description: 'Initial contentOffset can be set on ScrollView.',
     render: function (): React.Node {
-      function CenterContentList(): React.Node {
-        return (
-          <ScrollView
-            style={[styles.scrollView, {height: 100}]}
-            horizontal={true}
-            contentOffset={{x: 100, y: 0}}>
-            {ITEMS.map(createItemRow)}
-          </ScrollView>
-        );
-      }
-      return <CenterContentList />;
+      return <ContentOffsetList />;
     },
   });
   examples.push({
diff --git a/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js b/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js
index d478424f4c5..88fda4e8171 100644
--- a/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js
+++ b/packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js
@@ -271,9 +271,11 @@ export function SectionList_scrollable(Props: {
         ref={ref}
         ListHeaderComponent={HeaderComponent}
         ListFooterComponent={FooterComponent}
+        // eslint-disable-next-line react/no-unstable-nested-components
         SectionSeparatorComponent={info => (
           <CustomSeparatorComponent {...info} text="SECTION SEPARATOR" />
         )}
+        // eslint-disable-next-line react/no-unstable-nested-components
         ItemSeparatorComponent={info => (
           <CustomSeparatorComponent {...info} text="ITEM SEPARATOR" />
         )}
diff --git a/packages/rn-tester/js/examples/Timer/TimerExample.js b/packages/rn-tester/js/examples/Timer/TimerExample.js
index 5ad885959ec..e06b1cd227f 100644
--- a/packages/rn-tester/js/examples/Timer/TimerExample.js
+++ b/packages/rn-tester/js/examples/Timer/TimerExample.js
@@ -264,6 +264,50 @@ class TimerTester extends React.Component<TimerTesterProps> {
   };
 }
 
+class IntervalExample extends React.Component<
+  $ReadOnly<{||}>,
+  {|
+    showTimer: boolean,
+  |},
+> {
+  state = {
+    showTimer: true,
+  };
+
+  _timerTester: ?React.ElementRef<typeof TimerTester>;
+
+  render() {
+    return (
+      <View>
+        {this.state.showTimer && this._renderTimer()}
+        <RNTesterButton onPress={this._toggleTimer}>
+          {this.state.showTimer ? 'Unmount timer' : 'Mount new timer'}
+        </RNTesterButton>
+      </View>
+    );
+  }
+
+  _renderTimer = () => {
+    return (
+      <View>
+        <TimerTester
+          ref={ref => (this._timerTester = ref)}
+          dt={25}
+          type="setInterval"
+        />
+        <RNTesterButton
+          onPress={() => this._timerTester && this._timerTester.clear()}>
+          Clear interval
+        </RNTesterButton>
+      </View>
+    );
+  };
+
+  _toggleTimer = () => {
+    this.setState({showTimer: !this.state.showTimer});
+  };
+}
+
 exports.framework = 'React';
 exports.title = 'Timers';
 exports.category = 'UI';
@@ -323,53 +367,6 @@ exports.examples = [
     description: ('Execute function fn every t milliseconds until cancelled ' +
       'or component is unmounted.': string),
     render: function (): React.Node {
-      type IntervalExampleProps = $ReadOnly<{||}>;
-      type IntervalExampleState = {|
-        showTimer: boolean,
-      |};
-
-      class IntervalExample extends React.Component<
-        IntervalExampleProps,
-        IntervalExampleState,
-      > {
-        state = {
-          showTimer: true,
-        };
-
-        _timerTester: ?React.ElementRef<typeof TimerTester>;
-
-        render() {
-          return (
-            <View>
-              {this.state.showTimer && this._renderTimer()}
-              <RNTesterButton onPress={this._toggleTimer}>
-                {this.state.showTimer ? 'Unmount timer' : 'Mount new timer'}
-              </RNTesterButton>
-            </View>
-          );
-        }
-
-        _renderTimer = () => {
-          return (
-            <View>
-              <TimerTester
-                ref={ref => (this._timerTester = ref)}
-                dt={25}
-                type="setInterval"
-              />
-              <RNTesterButton
-                onPress={() => this._timerTester && this._timerTester.clear()}>
-                Clear interval
-              </RNTesterButton>
-            </View>
-          );
-        };
-
-        _toggleTimer = () => {
-          this.setState({showTimer: !this.state.showTimer});
-        };
-      }
-
       return <IntervalExample />;
     },
   },
diff --git a/packages/rn-tester/js/examples/View/ViewExample.js b/packages/rn-tester/js/examples/View/ViewExample.js
index 528e4ef91a2..2ea127b9df1 100644
--- a/packages/rn-tester/js/examples/View/ViewExample.js
+++ b/packages/rn-tester/js/examples/View/ViewExample.js
@@ -19,6 +19,285 @@ const {
   View,
 } = require('react-native');
 
+class ViewBorderStyleExample extends React.Component<
+  $ReadOnly<{||}>,
+  {|showBorder: boolean|},
+> {
+  state = {
+    showBorder: true,
+  };
+
+  render() {
+    return (
+      <TouchableWithoutFeedback onPress={this._handlePress}>
+        <View>
+          <View
+            style={[
+              {
+                borderWidth: 1,
+                padding: 5,
+              },
+              this.state.showBorder
+                ? {
+                    borderStyle: 'dashed',
+                  }
+                : null,
+            ]}>
+            <Text style={{fontSize: 11}}>Dashed border style</Text>
+          </View>
+          <View
+            style={[
+              {
+                marginTop: 5,
+                borderWidth: 1,
+                borderRadius: 5,
+                padding: 5,
+              },
+              this.state.showBorder
+                ? {
+                    borderStyle: 'dotted',
+                  }
+                : null,
+            ]}>
+            <Text style={{fontSize: 11}}>Dotted border style</Text>
+          </View>
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  }
+
+  _handlePress = () => {
+    this.setState({showBorder: !this.state.showBorder});
+  };
+}
+
+const offscreenAlphaCompositingStyles = StyleSheet.create({
+  alphaCompositing: {
+    justifyContent: 'space-around',
+    width: 100,
+    height: 50,
+    borderRadius: 100,
+  },
+});
+
+class OffscreenAlphaCompositing extends React.Component<
+  $ReadOnly<{||}>,
+  {|
+    active: boolean,
+  |},
+> {
+  state = {
+    active: false,
+  };
+
+  render() {
+    return (
+      <TouchableWithoutFeedback onPress={this._handlePress}>
+        <View>
+          <Text style={{paddingBottom: 10}}>Blobs</Text>
+          <View
+            style={{opacity: 1.0, paddingBottom: 30}}
+            needsOffscreenAlphaCompositing={this.state.active}>
+            <View
+              style={[
+                offscreenAlphaCompositingStyles.alphaCompositing,
+                {marginTop: 0, marginLeft: 0, backgroundColor: '#FF6F59'},
+              ]}
+            />
+            <View
+              style={[
+                offscreenAlphaCompositingStyles.alphaCompositing,
+                {
+                  marginTop: -50,
+                  marginLeft: 50,
+                  backgroundColor: '#F7CB15',
+                },
+              ]}
+            />
+          </View>
+          <Text style={{paddingBottom: 10}}>
+            Same blobs, but their shared container have 0.5 opacity
+          </Text>
+          <Text style={{paddingBottom: 10}}>
+            Tap to {this.state.active ? 'activate' : 'deactivate'}{' '}
+            needsOffscreenAlphaCompositing
+          </Text>
+          <View
+            style={{opacity: 0.8}}
+            needsOffscreenAlphaCompositing={this.state.active}>
+            <View
+              style={[
+                offscreenAlphaCompositingStyles.alphaCompositing,
+                {marginTop: 0, marginLeft: 0, backgroundColor: '#FF6F59'},
+              ]}
+            />
+            <View
+              style={[
+                offscreenAlphaCompositingStyles.alphaCompositing,
+                {
+                  marginTop: -50,
+                  marginLeft: 50,
+                  backgroundColor: '#F7CB15',
+                },
+              ]}
+            />
+          </View>
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  }
+
+  _handlePress = () => {
+    this.setState({active: !this.state.active});
+  };
+}
+
+const ZIndexExampleStyles = StyleSheet.create({
+  zIndex: {
+    justifyContent: 'space-around',
+    width: 100,
+    height: 50,
+    marginTop: -10,
+    position: 'relative',
+  },
+});
+
+class ZIndexExample extends React.Component<
+  $ReadOnly<{||}>,
+  {|
+    flipped: boolean,
+  |},
+> {
+  state = {
+    flipped: false,
+  };
+
+  render() {
+    const indices = this.state.flipped ? [-1, 0, 1, 2] : [2, 1, 0, -1];
+    return (
+      <TouchableWithoutFeedback onPress={this._handlePress}>
+        <View>
+          <Text style={{paddingBottom: 10}}>Tap to flip sorting order</Text>
+          <View
+            style={[
+              ZIndexExampleStyles.zIndex,
+              {
+                marginTop: 0,
+                backgroundColor: '#E57373',
+                zIndex: indices[0],
+              },
+            ]}>
+            <Text>ZIndex {indices[0]}</Text>
+          </View>
+          <View
+            style={[
+              ZIndexExampleStyles.zIndex,
+              {
+                marginLeft: 50,
+                backgroundColor: '#FFF176',
+                zIndex: indices[1],
+              },
+            ]}>
+            <Text>ZIndex {indices[1]}</Text>
+          </View>
+          <View
+            style={[
+              ZIndexExampleStyles.zIndex,
+              {
+                marginLeft: 100,
+                backgroundColor: '#81C784',
+                zIndex: indices[2],
+              },
+            ]}>
+            <Text>ZIndex {indices[2]}</Text>
+          </View>
+          <View
+            style={[
+              ZIndexExampleStyles.zIndex,
+              {
+                marginLeft: 150,
+                backgroundColor: '#64B5F6',
+                zIndex: indices[3],
+              },
+            ]}>
+            <Text>ZIndex {indices[3]}</Text>
+          </View>
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  }
+
+  _handlePress = () => {
+    this.setState({flipped: !this.state.flipped});
+  };
+}
+
+class DisplayNoneStyle extends React.Component<
+  $ReadOnly<{||}>,
+  {|
+    index: number,
+  |},
+> {
+  state = {
+    index: 0,
+  };
+
+  render() {
+    return (
+      <TouchableWithoutFeedback onPress={this._handlePress}>
+        <View>
+          <Text style={{paddingBottom: 10}}>
+            Press to toggle `display: none`
+          </Text>
+          <View
+            style={{
+              height: 50,
+              width: 50,
+              backgroundColor: 'red',
+              display: this.state.index % 2 === 0 ? 'none' : 'flex',
+            }}
+          />
+          <View
+            style={{
+              height: 50,
+              width: 50,
+              backgroundColor: 'blue',
+              display: this.state.index % 3 === 0 ? 'none' : 'flex',
+            }}
+          />
+          <View
+            style={{
+              height: 50,
+              width: 50,
+              backgroundColor: 'yellow',
+              display: this.state.index % 5 === 0 ? 'none' : 'flex',
+            }}>
+            <View
+              style={{
+                height: 30,
+                width: 30,
+                backgroundColor: 'salmon',
+                display: this.state.index % 11 === 0 ? 'none' : 'flex',
+              }}
+            />
+          </View>
+          <View
+            style={{
+              height: 50,
+              width: 50,
+              backgroundColor: 'magenta',
+              display: this.state.index % 7 === 0 ? 'none' : 'flex',
+            }}
+          />
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  }
+
+  _handlePress = () => {
+    this.setState({index: this.state.index + 1});
+  };
+}
 exports.title = 'View';
 exports.documentationURL = 'https://reactnative.dev/docs/view';
 exports.category = 'Basic';
@@ -93,59 +372,6 @@ exports.examples = [
   {
     title: 'Border Style',
     render(): React.Node {
-      type Props = $ReadOnly<{||}>;
-      type State = {|
-        showBorder: boolean,
-      |};
-
-      class ViewBorderStyleExample extends React.Component<Props, State> {
-        state = {
-          showBorder: true,
-        };
-
-        render() {
-          return (
-            <TouchableWithoutFeedback onPress={this._handlePress}>
-              <View>
-                <View
-                  style={[
-                    {
-                      borderWidth: 1,
-                      padding: 5,
-                    },
-                    this.state.showBorder
-                      ? {
-                          borderStyle: 'dashed',
-                        }
-                      : null,
-                  ]}>
-                  <Text style={{fontSize: 11}}>Dashed border style</Text>
-                </View>
-                <View
-                  style={[
-                    {
-                      marginTop: 5,
-                      borderWidth: 1,
-                      borderRadius: 5,
-                      padding: 5,
-                    },
-                    this.state.showBorder
-                      ? {
-                          borderStyle: 'dotted',
-                        }
-                      : null,
-                  ]}>
-                  <Text style={{fontSize: 11}}>Dotted border style</Text>
-                </View>
-              </View>
-            </TouchableWithoutFeedback>
-          );
-        }
-
-        _handlePress = () => {
-          this.setState({showBorder: !this.state.showBorder});
-        };
-      }
       return <ViewBorderStyleExample />;
     },
   },
@@ -273,247 +499,18 @@ exports.examples = [
   {
     title: 'Offscreen Alpha Compositing',
     render(): React.Node {
-      type Props = $ReadOnly<{||}>;
-      type State = {|
-        active: boolean,
-      |};
-
-      const styles = StyleSheet.create({
-        alphaCompositing: {
-          justifyContent: 'space-around',
-          width: 100,
-          height: 50,
-          borderRadius: 100,
-        },
-      });
-
-      class OffscreenAlphaCompositing extends React.Component<Props, State> {
-        state = {
-          active: false,
-        };
-
-        render() {
-          return (
-            <TouchableWithoutFeedback onPress={this._handlePress}>
-              <View>
-                <Text style={{paddingBottom: 10}}>Blobs</Text>
-                <View
-                  style={{opacity: 1.0, paddingBottom: 30}}
-                  needsOffscreenAlphaCompositing={this.state.active}>
-                  <View
-                    style={[
-                      styles.alphaCompositing,
-                      {marginTop: 0, marginLeft: 0, backgroundColor: '#FF6F59'},
-                    ]}
-                  />
-                  <View
-                    style={[
-                      styles.alphaCompositing,
-                      {
-                        marginTop: -50,
-                        marginLeft: 50,
-                        backgroundColor: '#F7CB15',
-                      },
-                    ]}
-                  />
-                </View>
-                <Text style={{paddingBottom: 10}}>
-                  Same blobs, but their shared container have 0.5 opacity
-                </Text>
-                <Text style={{paddingBottom: 10}}>
-                  Tap to {this.state.active ? 'activate' : 'deactivate'}{' '}
-                  needsOffscreenAlphaCompositing
-                </Text>
-                <View
-                  style={{opacity: 0.8}}
-                  needsOffscreenAlphaCompositing={this.state.active}>
-                  <View
-                    style={[
-                      styles.alphaCompositing,
-                      {marginTop: 0, marginLeft: 0, backgroundColor: '#FF6F59'},
-                    ]}
-                  />
-                  <View
-                    style={[
-                      styles.alphaCompositing,
-                      {
-                        marginTop: -50,
-                        marginLeft: 50,
-                        backgroundColor: '#F7CB15',
-                      },
-                    ]}
-                  />
-                </View>
-              </View>
-            </TouchableWithoutFeedback>
-          );
-        }
-
-        _handlePress = () => {
-          this.setState({active: !this.state.active});
-        };
-      }
-
       return <OffscreenAlphaCompositing />;
     },
   },
   {
     title: 'ZIndex',
     render(): React.Node {
-      type Props = $ReadOnly<{||}>;
-      type State = {|
-        flipped: boolean,
-      |};
-
-      const styles = StyleSheet.create({
-        zIndex: {
-          justifyContent: 'space-around',
-          width: 100,
-          height: 50,
-          marginTop: -10,
-          position: 'relative',
-        },
-      });
-
-      class ZIndexExample extends React.Component<Props, State> {
-        state = {
-          flipped: false,
-        };
-
-        render() {
-          const indices = this.state.flipped ? [-1, 0, 1, 2] : [2, 1, 0, -1];
-          return (
-            <TouchableWithoutFeedback onPress={this._handlePress}>
-              <View>
-                <Text style={{paddingBottom: 10}}>
-                  Tap to flip sorting order
-                </Text>
-                <View
-                  style={[
-                    styles.zIndex,
-                    {
-                      marginTop: 0,
-                      backgroundColor: '#E57373',
-                      zIndex: indices[0],
-                    },
-                  ]}>
-                  <Text>ZIndex {indices[0]}</Text>
-                </View>
-                <View
-                  style={[
-                    styles.zIndex,
-                    {
-                      marginLeft: 50,
-                      backgroundColor: '#FFF176',
-                      zIndex: indices[1],
-                    },
-                  ]}>
-                  <Text>ZIndex {indices[1]}</Text>
-                </View>
-                <View
-                  style={[
-                    styles.zIndex,
-                    {
-                      marginLeft: 100,
-                      backgroundColor: '#81C784',
-                      zIndex: indices[2],
-                    },
-                  ]}>
-                  <Text>ZIndex {indices[2]}</Text>
-                </View>
-                <View
-                  style={[
-                    styles.zIndex,
-                    {
-                      marginLeft: 150,
-                      backgroundColor: '#64B5F6',
-                      zIndex: indices[3],
-                    },
-                  ]}>
-                  <Text>ZIndex {indices[3]}</Text>
-                </View>
-              </View>
-            </TouchableWithoutFeedback>
-          );
-        }
-
-        _handlePress = () => {
-          this.setState({flipped: !this.state.flipped});
-        };
-      }
       return <ZIndexExample />;
     },
   },
   {
     title: '`display: none` style',
     render(): React.Node {
-      type Props = $ReadOnly<{||}>;
-      type State = {|
-        index: number,
-      |};
-
-      class DisplayNoneStyle extends React.Component<Props, State> {
-        state = {
-          index: 0,
-        };
-
-        render() {
-          return (
-            <TouchableWithoutFeedback onPress={this._handlePress}>
-              <View>
-                <Text style={{paddingBottom: 10}}>
-                  Press to toggle `display: none`
-                </Text>
-                <View
-                  style={{
-                    height: 50,
-                    width: 50,
-                    backgroundColor: 'red',
-                    display: this.state.index % 2 === 0 ? 'none' : 'flex',
-                  }}
-                />
-                <View
-                  style={{
-                    height: 50,
-                    width: 50,
-                    backgroundColor: 'blue',
-                    display: this.state.index % 3 === 0 ? 'none' : 'flex',
-                  }}
-                />
-                <View
-                  style={{
-                    height: 50,
-                    width: 50,
-                    backgroundColor: 'yellow',
-                    display: this.state.index % 5 === 0 ? 'none' : 'flex',
-                  }}>
-                  <View
-                    style={{
-                      height: 30,
-                      width: 30,
-                      backgroundColor: 'salmon',
-                      display: this.state.index % 11 === 0 ? 'none' : 'flex',
-                    }}
-                  />
-                </View>
-                <View
-                  style={{
-                    height: 50,
-                    width: 50,
-                    backgroundColor: 'magenta',
-                    display: this.state.index % 7 === 0 ? 'none' : 'flex',
-                  }}
-                />
-              </View>
-            </TouchableWithoutFeedback>
-          );
-        }
-
-        _handlePress = () => {
-          this.setState({index: this.state.index + 1});
-        };
-      }
-
       return <DisplayNoneStyle />;
     },
   },
diff --git a/scripts/bump-oss-version.js b/scripts/bump-oss-version.js
index 2cfd230fd73..a1ae79bc214 100755
--- a/scripts/bump-oss-version.js
+++ b/scripts/bump-oss-version.js
@@ -14,7 +14,7 @@
  * This script walks a releaser through bumping the version for a release
  * It will commit the appropriate tags to trigger the CircleCI jobs.
  */
-const {exec, exit} = require('shelljs');
+const {exit} = require('shelljs');
 const yargs = require('yargs');
 const inquirer = require('inquirer');
 const request = require('request');
@@ -56,19 +56,6 @@ function exitIfNotOnReleaseBranch(branch) {
   }
 }
 
-function getLatestTag(versionPrefix) {
-  const tags = exec(`git tag --list "v${versionPrefix}*" --sort=-refname`, {
-    silent: true,
-  })
-    .stdout.trim()
-    .split('\n')
-    .filter(tag => tag.length > 0);
-  if (tags.length > 0) {
-    return tags[0];
-  }
-  return null;
-}
-
 function triggerReleaseWorkflow(options) {
   return new Promise((resolve, reject) => {
     request(options, function (error, response, body) {
diff --git a/scripts/prepare-package-for-release.js b/scripts/prepare-package-for-release.js
index 6018ee816f9..845303ff8e0 100755
--- a/scripts/prepare-package-for-release.js
+++ b/scripts/prepare-package-for-release.js
@@ -38,7 +38,6 @@ const argv = yargs
     default: false,
   }).argv;
 
-const currentCommit = process.env.CIRCLE_SHA1;
 const branch = process.env.CIRCLE_BRANCH;
 const remote = argv.remote;
 const releaseVersion = argv.toVersion;