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;