Migrate rn-tester/js/components/RNTesterTitle.js to function componen…

…ts (#48649) Summary: As per title. Changelog: [Internal] Reviewed By: rshest Differential Revision: D68099051
facebook · Jan 13, 2025 · 200497f · 200497f
1 parent 31df8a0
commit 200497f
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 27 deletions.
diff --git 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
@@ -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;