diff --git a/packages/rn-tester/js/examples/Layout/LayoutExample.js b/packages/rn-tester/js/examples/Layout/LayoutExample.js
index 67ae250b9a8d0d..7f57c0b51adb65 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 '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({