From d95909ea1507f390ae200ad582ad80ef2ed384fa Mon Sep 17 00:00:00 2001
From: Fabrizio Cucci <fabriziocucci@meta.com>
Date: Tue, 14 Jan 2025 03:20:05 -0800
Subject: [PATCH] Migrate rn-tester/js/components/RNTesterTitle.js to function
 components (#48649)

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

As per title.

Changelog: [Internal]

Reviewed By: rshest

Differential Revision: D68099051

fbshipit-source-id: 867010b692e6d71e4683cc12b4455be730413268
---
 .../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 c3bcd4ba633..71342f255ba 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 948a0e89ca6..d5955fd2b21 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;