From 200497ffd571808eefb9e9b92d21ded94f258e91 Mon Sep 17 00:00:00 2001
From: Fabrizio Cucci <fabriziocucci@meta.com>
Date: Mon, 13 Jan 2025 12:12:32 -0800
Subject: [PATCH] Migrate rn-tester/js/components/RNTesterTitle.js to function
 components (#48649)

Summary:

As per title.

Changelog: [Internal]

Reviewed By: rshest

Differential Revision: D68099051
---
 .../rn-tester/js/components/RNTesterPage.js   |  2 +-
 .../rn-tester/js/components/RNTesterTitle.js  | 53 ++++++++++---------
 2 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/packages/rn-tester/js/components/RNTesterPage.js b/packages/rn-tester/js/components/RNTesterPage.js
index c3bcd4ba633633..71342f255ba630 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 948a0e89ca6188..d5955fd2b21039 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;