From 560f69f11fc713bad6679676af0b9fbd58de6a48 Mon Sep 17 00:00:00 2001 From: Fabrizio Cucci Date: Mon, 13 Jan 2025 12:12:32 -0800 Subject: [PATCH 1/3] [skip ci] Migrate rn-tester/js/components/RNTesterButton.js to function components (#48645) Summary: As per title. Changelog: [Internal] Reviewed By: cortinico Differential Revision: D68098118 --- .../rn-tester/js/components/RNTesterButton.js | 26 +++++++++---------- 1 file changed, 12 insertions(+), 14 deletions(-) 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 { - render(): React.Node { - return ( - [styles.button, pressed && styles.pressed]}> - {this.props.children} - - ); - } +function RNTesterButton(props: Props): React.Node { + return ( + [styles.button, pressed && styles.pressed]}> + {props.children} + + ); } const styles = StyleSheet.create({ @@ -51,4 +49,4 @@ const styles = StyleSheet.create({ }, }); -module.exports = RNTesterButton; +export default RNTesterButton; From 31df8a063eef3aa2a3fbaf2044508f6a400cf3d6 Mon Sep 17 00:00:00 2001 From: Fabrizio Cucci Date: Mon, 13 Jan 2025 12:12:32 -0800 Subject: [PATCH 2/3] [skip ci] Migrate rn-tester/js/examples/Layout/LayoutExample.js to function components (#48646) Summary: As per title. Changelog: [Internal] Differential Revision: D68098856 --- .../js/examples/Layout/LayoutExample.js | 324 +++++++++--------- 1 file changed, 163 insertions(+), 161 deletions(-) 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 ( - - ); - } +type CicleProps = $ReadOnly<{ + backgroundColor?: string, + size?: number, +}>; + +function Circle({ + backgroundColor = '#527fe4', + size = 20, +}: CicleProps): React.Node { + return ( + + ); } -class CircleBlock extends React.Component<$FlowFixMeProps> { - render(): React.Node { - const circleStyle = { - flexDirection: 'row', - backgroundColor: '#f6f7f8', - borderWidth: 0.5, - borderColor: '#d6d7da', - marginBottom: 2, - }; - return ( - {this.props.children} - ); - } +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 {children}; } -class LayoutExample extends React.Component<$FlowFixMeProps> { - render(): React.Node { - const fiveColoredCircles = [ - , - , - , - , - , - ]; +function LayoutExample(): React.Node { + const fiveColoredCircles = [ + , + , + , + , + , + ]; - return ( - - - row - - {fiveColoredCircles} - - row-reverse - - {fiveColoredCircles} - - column - - {fiveColoredCircles} - - column-reverse - - {fiveColoredCircles} - - - - {'top: 15, left: 160'} - - - + return ( + + + row + + {fiveColoredCircles} + + row-reverse + + {fiveColoredCircles} + + column + + {fiveColoredCircles} + + column-reverse + + {fiveColoredCircles} + + + + {'top: 15, left: 160'} + + + - - flex-start - - {fiveColoredCircles} - - center - - {fiveColoredCircles} - - flex-end - - {fiveColoredCircles} - - space-between - - {fiveColoredCircles} - - space-around - - {fiveColoredCircles} - - - - flex-start - - - - - - - - - - - - - - - - - - - - center - - - - - - - - - - - - - - - - - - - - flex-end - - - - - - - - - - - - - - - - - - - - - - - {'oooooooooooooooo'.split('').map((char, i) => ( - - ))} - - - - ); - } + + flex-start + + {fiveColoredCircles} + + center + + {fiveColoredCircles} + + flex-end + + {fiveColoredCircles} + + space-between + + {fiveColoredCircles} + + space-around + + {fiveColoredCircles} + + + + flex-start + + + + + + + + + + + + + + + + + + + + center + + + + + + + + + + + + + + + + + + + + flex-end + + + + + + + + + + + + + + + + + + + + + + + {'oooooooooooooooo'.split('').map((char, i) => ( + + ))} + + + + ); } const styles = StyleSheet.create({ From 200497ffd571808eefb9e9b92d21ded94f258e91 Mon Sep 17 00:00:00 2001 From: Fabrizio Cucci Date: Mon, 13 Jan 2025 12:12:32 -0800 Subject: [PATCH 3/3] 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 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 ( - - {theme => { - return ( - - - {this.props.title} - - - ); - }} - - ); - } +function RNTesterTitle({title}: Props): React.Node { + return ( + + {theme => { + return ( + + + {title} + + + ); + }} + + ); } const styles = StyleSheet.create({ @@ -53,4 +54,4 @@ const styles = StyleSheet.create({ }, }); -module.exports = RNTesterTitle; +export default RNTesterTitle;