diff --git a/packages/rn-tester/js/components/RNTesterButton.js b/packages/rn-tester/js/components/RNTesterButton.js
index d760b3a00ea2..686301af6156 100644
--- a/packages/rn-tester/js/components/RNTesterButton.js
+++ b/packages/rn-tester/js/components/RNTesterButton.js
@@ -12,8 +12,8 @@
 
 import type {PressEvent} from 'react-native/Libraries/Types/CoreEventTypes';
 
-const React = require('react');
-const {Pressable, StyleSheet, Text} = require('react-native');
+import React from 'react';
+import {Pressable, StyleSheet, Text} from 'react-native';
 
 type Props = $ReadOnly<{|
   testID?: string,
@@ -22,17 +22,15 @@ type Props = $ReadOnly<{|
   onPress?: ?(event: PressEvent) => mixed,
 |}>;
 
-class RNTesterButton extends React.Component<Props> {
-  render(): React.Node {
-    return (
-      <Pressable
-        testID={this.props.testID}
-        onPress={this.props.onPress}
-        style={({pressed}) => [styles.button, pressed && styles.pressed]}>
-        <Text testID={this.props.textTestID}>{this.props.children}</Text>
-      </Pressable>
-    );
-  }
+function RNTesterButton(props: Props): React.Node {
+  return (
+    <Pressable
+      testID={props.testID}
+      onPress={props.onPress}
+      style={({pressed}) => [styles.button, pressed && styles.pressed]}>
+      <Text testID={props.textTestID}>{props.children}</Text>
+    </Pressable>
+  );
 }
 
 const styles = StyleSheet.create({
@@ -51,4 +49,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = RNTesterButton;
+export default RNTesterButton;
diff --git a/packages/rn-tester/js/components/RNTesterPage.js b/packages/rn-tester/js/components/RNTesterPage.js
index c3bcd4ba6336..71342f255ba6 100644
--- a/packages/rn-tester/js/components/RNTesterPage.js
+++ b/packages/rn-tester/js/components/RNTesterPage.js
@@ -9,9 +9,9 @@
  */
 
 import {RNTesterThemeContext} from './RNTesterTheme';
+import RNTesterTitle from './RNTesterTitle';
 import {useContext} from 'react';
 
-const RNTesterTitle = require('./RNTesterTitle');
 const React = require('react');
 const {SafeAreaView, ScrollView, StyleSheet, View} = require('react-native');
 
diff --git a/packages/rn-tester/js/components/RNTesterTitle.js b/packages/rn-tester/js/components/RNTesterTitle.js
index 948a0e89ca61..d5955fd2b210 100644
--- a/packages/rn-tester/js/components/RNTesterTitle.js
+++ b/packages/rn-tester/js/components/RNTesterTitle.js
@@ -9,33 +9,34 @@
  */
 
 import {RNTesterThemeContext} from './RNTesterTheme';
+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
 
-const React = require('react');
-const {StyleSheet, Text, View} = require('react-native');
+type Props = $ReadOnly<{
+  title: string,
+}>;
 
-class RNTesterTitle extends React.Component<$FlowFixMeProps> {
-  render(): React.Node {
-    return (
-      <RNTesterThemeContext.Consumer>
-        {theme => {
-          return (
-            <View
-              style={[
-                styles.container,
-                {
-                  borderColor: theme.SeparatorColor,
-                  backgroundColor: theme.TertiaryGroupedBackgroundColor,
-                },
-              ]}>
-              <Text style={[styles.text, {color: theme.LabelColor}]}>
-                {this.props.title}
-              </Text>
-            </View>
-          );
-        }}
-      </RNTesterThemeContext.Consumer>
-    );
-  }
+function RNTesterTitle({title}: Props): React.Node {
+  return (
+    <RNTesterThemeContext.Consumer>
+      {theme => {
+        return (
+          <View
+            style={[
+              styles.container,
+              {
+                borderColor: theme.SeparatorColor,
+                backgroundColor: theme.TertiaryGroupedBackgroundColor,
+              },
+            ]}>
+            <Text style={[styles.text, {color: theme.LabelColor}]}>
+              {title}
+            </Text>
+          </View>
+        );
+      }}
+    </RNTesterThemeContext.Consumer>
+  );
 }
 
 const styles = StyleSheet.create({
@@ -53,4 +54,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = RNTesterTitle;
+export default RNTesterTitle;
diff --git a/packages/rn-tester/js/examples/Layout/LayoutExample.js b/packages/rn-tester/js/examples/Layout/LayoutExample.js
index 67ae250b9a8d..039d62cd3ef8 100644
--- a/packages/rn-tester/js/examples/Layout/LayoutExample.js
+++ b/packages/rn-tester/js/examples/Layout/LayoutExample.js
@@ -10,179 +10,181 @@
 
 'use strict';
 
+import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
+
 import RNTesterBlock from '../../components/RNTesterBlock';
 import RNTesterPage from '../../components/RNTesterPage';
 import RNTesterText from '../../components/RNTesterText';
 import React from 'react';
 import {StyleSheet, View} from 'react-native';
 
-class Circle extends React.Component<$FlowFixMeProps> {
-  render(): React.Node {
-    const size = this.props.size || 20;
-    const backgroundColor = this.props.bgColor || '#527fe4';
-    return (
-      <View
-        style={{
-          borderRadius: size / 2,
-          backgroundColor: backgroundColor,
-          width: size,
-          height: size,
-          margin: 1,
-        }}
-      />
-    );
-  }
+type CicleProps = $ReadOnly<{
+  backgroundColor?: string,
+  size?: number,
+}>;
+
+function Circle({
+  backgroundColor = '#527fe4',
+  size = 20,
+}: CicleProps): React.Node {
+  return (
+    <View
+      style={{
+        borderRadius: size / 2,
+        backgroundColor: backgroundColor,
+        width: size,
+        height: size,
+        margin: 1,
+      }}
+    />
+  );
 }
 
-class CircleBlock extends React.Component<$FlowFixMeProps> {
-  render(): React.Node {
-    const circleStyle = {
-      flexDirection: 'row',
-      backgroundColor: '#f6f7f8',
-      borderWidth: 0.5,
-      borderColor: '#d6d7da',
-      marginBottom: 2,
-    };
-    return (
-      <View style={[circleStyle, this.props.style]}>{this.props.children}</View>
-    );
-  }
+type CircleBlockProps = $ReadOnly<{
+  children: React.Node,
+  style: ViewStyleProp,
+}>;
+
+function CircleBlock({children, style}: CircleBlockProps): React.Node {
+  const circleStyle = {
+    flexDirection: 'row',
+    backgroundColor: '#f6f7f8',
+    borderWidth: 0.5,
+    borderColor: '#d6d7da',
+    marginBottom: 2,
+  };
+  return <View style={[circleStyle, style]}>{children}</View>;
 }
 
-class LayoutExample extends React.Component<$FlowFixMeProps> {
-  render(): React.Node {
-    const fiveColoredCircles = [
-      <Circle bgColor="#527fe4" key="blue" />,
-      <Circle bgColor="#D443E3" key="violet" />,
-      <Circle bgColor="#FF9049" key="orange" />,
-      <Circle bgColor="#FFE649" key="yellow" />,
-      <Circle bgColor="#7FE040" key="green" />,
-    ];
+function LayoutExample(): React.Node {
+  const fiveColoredCircles = [
+    <Circle backgroundColor="#527fe4" key="blue" />,
+    <Circle backgroundColor="#D443E3" key="violet" />,
+    <Circle backgroundColor="#FF9049" key="orange" />,
+    <Circle backgroundColor="#FFE649" key="yellow" />,
+    <Circle backgroundColor="#7FE040" key="green" />,
+  ];
 
-    return (
-      <RNTesterPage title={this.props.navigator ? null : 'Layout'}>
-        <RNTesterBlock title="Flex Direction">
-          <RNTesterText>row</RNTesterText>
-          <CircleBlock style={{flexDirection: 'row'}}>
-            {fiveColoredCircles}
-          </CircleBlock>
-          <RNTesterText>row-reverse</RNTesterText>
-          <CircleBlock style={{flexDirection: 'row-reverse'}}>
-            {fiveColoredCircles}
-          </CircleBlock>
-          <RNTesterText>column</RNTesterText>
-          <CircleBlock style={{flexDirection: 'column'}}>
-            {fiveColoredCircles}
-          </CircleBlock>
-          <RNTesterText>column-reverse</RNTesterText>
-          <CircleBlock style={{flexDirection: 'column-reverse'}}>
-            {fiveColoredCircles}
-          </CircleBlock>
-          <View
-            style={[
-              styles.overlay,
-              {position: 'absolute', top: 15, left: 160},
-            ]}>
-            <RNTesterText style={{color: 'black'}}>
-              {'top: 15, left: 160'}
-            </RNTesterText>
-          </View>
-        </RNTesterBlock>
+  return (
+    <RNTesterPage title={'Layout'}>
+      <RNTesterBlock title="Flex Direction">
+        <RNTesterText>row</RNTesterText>
+        <CircleBlock style={{flexDirection: 'row'}}>
+          {fiveColoredCircles}
+        </CircleBlock>
+        <RNTesterText>row-reverse</RNTesterText>
+        <CircleBlock style={{flexDirection: 'row-reverse'}}>
+          {fiveColoredCircles}
+        </CircleBlock>
+        <RNTesterText>column</RNTesterText>
+        <CircleBlock style={{flexDirection: 'column'}}>
+          {fiveColoredCircles}
+        </CircleBlock>
+        <RNTesterText>column-reverse</RNTesterText>
+        <CircleBlock style={{flexDirection: 'column-reverse'}}>
+          {fiveColoredCircles}
+        </CircleBlock>
+        <View
+          style={[styles.overlay, {position: 'absolute', top: 15, left: 160}]}>
+          <RNTesterText style={{color: 'black'}}>
+            {'top: 15, left: 160'}
+          </RNTesterText>
+        </View>
+      </RNTesterBlock>
 
-        <RNTesterBlock title="Justify Content - Main Direction">
-          <RNTesterText>flex-start</RNTesterText>
-          <CircleBlock style={{justifyContent: 'flex-start'}}>
-            {fiveColoredCircles}
-          </CircleBlock>
-          <RNTesterText>center</RNTesterText>
-          <CircleBlock style={{justifyContent: 'center'}}>
-            {fiveColoredCircles}
-          </CircleBlock>
-          <RNTesterText>flex-end</RNTesterText>
-          <CircleBlock style={{justifyContent: 'flex-end'}}>
-            {fiveColoredCircles}
-          </CircleBlock>
-          <RNTesterText>space-between</RNTesterText>
-          <CircleBlock style={{justifyContent: 'space-between'}}>
-            {fiveColoredCircles}
-          </CircleBlock>
-          <RNTesterText>space-around</RNTesterText>
-          <CircleBlock style={{justifyContent: 'space-around'}}>
-            {fiveColoredCircles}
-          </CircleBlock>
-        </RNTesterBlock>
-        <RNTesterBlock title="Align Items - Other Direction">
-          <RNTesterText>flex-start</RNTesterText>
-          <CircleBlock style={{alignItems: 'flex-start', height: 30}}>
-            <Circle size={15} />
-            <Circle size={10} />
-            <Circle size={20} />
-            <Circle size={17} />
-            <Circle size={12} />
-            <Circle size={15} />
-            <Circle size={10} />
-            <Circle size={20} />
-            <Circle size={17} />
-            <Circle size={12} />
-            <Circle size={15} />
-            <Circle size={10} />
-            <Circle size={20} />
-            <Circle size={17} />
-            <Circle size={12} />
-            <Circle size={15} />
-            <Circle size={8} />
-          </CircleBlock>
-          <RNTesterText>center</RNTesterText>
-          <CircleBlock style={{alignItems: 'center', height: 30}}>
-            <Circle size={15} />
-            <Circle size={10} />
-            <Circle size={20} />
-            <Circle size={17} />
-            <Circle size={12} />
-            <Circle size={15} />
-            <Circle size={10} />
-            <Circle size={20} />
-            <Circle size={17} />
-            <Circle size={12} />
-            <Circle size={15} />
-            <Circle size={10} />
-            <Circle size={20} />
-            <Circle size={17} />
-            <Circle size={12} />
-            <Circle size={15} />
-            <Circle size={8} />
-          </CircleBlock>
-          <RNTesterText>flex-end</RNTesterText>
-          <CircleBlock style={{alignItems: 'flex-end', height: 30}}>
-            <Circle size={15} />
-            <Circle size={10} />
-            <Circle size={20} />
-            <Circle size={17} />
-            <Circle size={12} />
-            <Circle size={15} />
-            <Circle size={10} />
-            <Circle size={20} />
-            <Circle size={17} />
-            <Circle size={12} />
-            <Circle size={15} />
-            <Circle size={10} />
-            <Circle size={20} />
-            <Circle size={17} />
-            <Circle size={12} />
-            <Circle size={15} />
-            <Circle size={8} />
-          </CircleBlock>
-        </RNTesterBlock>
-        <RNTesterBlock title="Flex Wrap">
-          <CircleBlock style={{flexWrap: 'wrap'}}>
-            {'oooooooooooooooo'.split('').map((char, i) => (
-              <Circle key={i} />
-            ))}
-          </CircleBlock>
-        </RNTesterBlock>
-      </RNTesterPage>
-    );
-  }
+      <RNTesterBlock title="Justify Content - Main Direction">
+        <RNTesterText>flex-start</RNTesterText>
+        <CircleBlock style={{justifyContent: 'flex-start'}}>
+          {fiveColoredCircles}
+        </CircleBlock>
+        <RNTesterText>center</RNTesterText>
+        <CircleBlock style={{justifyContent: 'center'}}>
+          {fiveColoredCircles}
+        </CircleBlock>
+        <RNTesterText>flex-end</RNTesterText>
+        <CircleBlock style={{justifyContent: 'flex-end'}}>
+          {fiveColoredCircles}
+        </CircleBlock>
+        <RNTesterText>space-between</RNTesterText>
+        <CircleBlock style={{justifyContent: 'space-between'}}>
+          {fiveColoredCircles}
+        </CircleBlock>
+        <RNTesterText>space-around</RNTesterText>
+        <CircleBlock style={{justifyContent: 'space-around'}}>
+          {fiveColoredCircles}
+        </CircleBlock>
+      </RNTesterBlock>
+      <RNTesterBlock title="Align Items - Other Direction">
+        <RNTesterText>flex-start</RNTesterText>
+        <CircleBlock style={{alignItems: 'flex-start', height: 30}}>
+          <Circle size={15} />
+          <Circle size={10} />
+          <Circle size={20} />
+          <Circle size={17} />
+          <Circle size={12} />
+          <Circle size={15} />
+          <Circle size={10} />
+          <Circle size={20} />
+          <Circle size={17} />
+          <Circle size={12} />
+          <Circle size={15} />
+          <Circle size={10} />
+          <Circle size={20} />
+          <Circle size={17} />
+          <Circle size={12} />
+          <Circle size={15} />
+          <Circle size={8} />
+        </CircleBlock>
+        <RNTesterText>center</RNTesterText>
+        <CircleBlock style={{alignItems: 'center', height: 30}}>
+          <Circle size={15} />
+          <Circle size={10} />
+          <Circle size={20} />
+          <Circle size={17} />
+          <Circle size={12} />
+          <Circle size={15} />
+          <Circle size={10} />
+          <Circle size={20} />
+          <Circle size={17} />
+          <Circle size={12} />
+          <Circle size={15} />
+          <Circle size={10} />
+          <Circle size={20} />
+          <Circle size={17} />
+          <Circle size={12} />
+          <Circle size={15} />
+          <Circle size={8} />
+        </CircleBlock>
+        <RNTesterText>flex-end</RNTesterText>
+        <CircleBlock style={{alignItems: 'flex-end', height: 30}}>
+          <Circle size={15} />
+          <Circle size={10} />
+          <Circle size={20} />
+          <Circle size={17} />
+          <Circle size={12} />
+          <Circle size={15} />
+          <Circle size={10} />
+          <Circle size={20} />
+          <Circle size={17} />
+          <Circle size={12} />
+          <Circle size={15} />
+          <Circle size={10} />
+          <Circle size={20} />
+          <Circle size={17} />
+          <Circle size={12} />
+          <Circle size={15} />
+          <Circle size={8} />
+        </CircleBlock>
+      </RNTesterBlock>
+      <RNTesterBlock title="Flex Wrap">
+        <CircleBlock style={{flexWrap: 'wrap'}}>
+          {'oooooooooooooooo'.split('').map((char, i) => (
+            <Circle key={i} />
+          ))}
+        </CircleBlock>
+      </RNTesterBlock>
+    </RNTesterPage>
+  );
 }
 
 const styles = StyleSheet.create({