Migrate Animated examples to Flow component syntax

packages/rn-tester/js/examples/Animated/ColorStylesExample.js

@@ -17,7 +17,7 @@ import * as React from 'react';
 import {useState} from 'react';
 import {Animated, StyleSheet, Text, View} from 'react-native';
 
-function AnimatedView({useNativeDriver}: {useNativeDriver: boolean}) {
+component AnimatedView(useNativeDriver: boolean) {
   const animations = [];
 
   const animatedViewStyle = {
@@ -123,7 +123,7 @@ function AnimatedView({useNativeDriver}: {useNativeDriver: boolean}) {
   );
 }
 
-function AnimatedColorStyleExample(): React.Node {
+component AnimatedColorStyleExample() {
   const [useNativeDriver, setUseNativeDriver] = useState(false);
 
   return (

packages/rn-tester/js/examples/Animated/CombineExample.js

@@ -24,7 +24,7 @@ export default ({
   render: () => <CombineExample />,
 }: RNTesterModuleExample);
 
-const CombineExample = () => {
+component CombineExample() {
   const [aValue, setAValue] = useState('0.4');
   const [bValue, setBValue] = useState('0.5');
   const a = new Animated.Value(parseFloat(aValue));
@@ -69,7 +69,7 @@ const CombineExample = () => {
       <RNTesterButton onPress={() => setAnimation(mod)}>Modulo</RNTesterButton>
     </View>
   );
-};
+}
 
 const styles = StyleSheet.create({
   content: {

packages/rn-tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js

@@ -29,7 +29,7 @@ const styles = StyleSheet.create({
   },
 });
 
-function CompositeAnimationsWithEasingExample(): React.Node {
+component CompositeAnimationsWithEasingExample() {
   const anims = [1, 2, 3].map(() => new Animated.Value(0));
   const theme = useContext(RNTesterThemeContext);
 

packages/rn-tester/js/examples/Animated/ComposingExample.js

@@ -27,7 +27,6 @@ import {
   useWindowDimensions,
 } from 'react-native';
 
-type Props = Readonly<{}>;
 const boxSize = 12;
 const padding = 8;
 const leftToRightTimingConfig = (useNativeDriver: boolean) => ({
@@ -128,20 +127,15 @@ const items = [
   },
 ];
 
-function ComposingExampleItem({
-  title,
-  description,
-  compositeAnimation,
-  useNativeDriver,
-}: {
+component ComposingExampleItem(
   title: string,
   description: string,
   compositeAnimation: (
     values: Animated.Value[],
     useNativeDriver: boolean,
   ) => CompositeAnimation,
   useNativeDriver: boolean,
-}): React.Node {
+) {
   const {width: windowWidth} = useWindowDimensions();
 
   // Figure out how far along the x axis we should translate the box by taking into
@@ -150,6 +144,7 @@ function ComposingExampleItem({
   const boxIndexes = useMemo(() => [0, 1, 2, 3, 4], []);
   const xTranslations = useRef(boxIndexes.map(() => new Animated.Value(0)));
   const animation = useRef(
+    // $FlowFixMe[react-rule-unsafe-ref]
     compositeAnimation(xTranslations.current, useNativeDriver),
   );
   const theme = useContext(RNTesterThemeContext);
@@ -206,7 +201,7 @@ function ComposingExampleItem({
   );
 }
 
-function ComposingExample(props: Props): React.Node {
+component ComposingExample() {
   const [useNativeDriver, setUseNativeDriver] = useState(false);
 
   return (

packages/rn-tester/js/examples/Animated/ContinuousInteractionsExample.js

@@ -15,7 +15,7 @@ import * as React from 'react';
 import {useContext} from 'react';
 import {Text} from 'react-native';
 
-function AnimatedContinuousInteractionsExample(): React.Node {
+component AnimatedContinuousInteractionsExample() {
   const theme = useContext(RNTesterThemeContext);
   return (
     <Text style={{color: theme.SecondaryLabelColor}}>

packages/rn-tester/js/examples/Animated/EasingExample.js

@@ -26,8 +26,6 @@ import {
   useAnimatedValue,
 } from 'react-native';
 
-type Props = Readonly<{}>;
-
 type EasingListItem = {
   title: string,
   easing: (value: number) => number,
@@ -81,13 +79,7 @@ const easingSections = [
   },
 ];
 
-function EasingItem({
-  item,
-  useNativeDriver,
-}: {
-  item: EasingListItem,
-  useNativeDriver: boolean,
-}): React.Node {
+component EasingItem(item: EasingListItem, useNativeDriver: boolean) {
   const opacityAndScale = useAnimatedValue(1);
   const animation = useRef(
     Animated.timing(opacityAndScale, {
@@ -129,7 +121,7 @@ function EasingItem({
   );
 }
 
-function EasingExample(props: Props): React.Node {
+component EasingExample() {
   const [useNativeDriver, setUseNativeDriver] = useState(false);
 
   return (

packages/rn-tester/js/examples/Animated/FadeInViewExample.js

@@ -29,13 +29,7 @@ const styles = StyleSheet.create({
   },
 });
 
-function FadeInView({
-  useNativeDriver,
-  children,
-}: {
-  useNativeDriver: boolean,
-  children: React.Node,
-}) {
+component FadeInView(useNativeDriver: boolean, children: React.Node) {
   //opacity 0
   const [fadeAnim] = useState(() => new Animated.Value(0));
   useEffect(() => {
@@ -64,7 +58,7 @@ function FadeInView({
   );
 }
 
-function FadeInExample(): React.Node {
+component FadeInExample() {
   const [show, setShow] = useState(true);
   const [useNativeDriver, setUseNativeDriver] = useState(false);
   return (

packages/rn-tester/js/examples/Animated/LoopingExample.js

@@ -24,13 +24,7 @@ export default ({
   render: () => <LoopingExample />,
 }: RNTesterModuleExample);
 
-function LoopingView({
-  useNativeDriver,
-  running,
-}: {
-  useNativeDriver: boolean,
-  running: boolean,
-}) {
+component LoopingView(useNativeDriver: boolean, running: boolean) {
   const opacity = useMemo(() => new Animated.Value(1), []);
   const scale = useMemo(() => new Animated.Value(1), []);
 
@@ -64,7 +58,7 @@ function LoopingView({
   );
 }
 
-function LoopingExample(props: {}): React.Node {
+component LoopingExample() {
   const [running, setRunning] = useState(false);
   const [useNativeDriver, setUseNativeDriver] = useState(false);
 

packages/rn-tester/js/examples/Animated/MovingBoxExample.js

@@ -56,9 +56,7 @@ const styles = StyleSheet.create({
   },
 });
 
-type Props = Readonly<{}>;
-
-function MovingBoxView({useNativeDriver}: {useNativeDriver: boolean}) {
+component MovingBoxView(useNativeDriver: boolean) {
   const x = useAnimatedValue(0);
   const [update, setUpdate] = useState(0);
   const [boxVisible, setBoxVisible] = useState(true);
@@ -107,7 +105,7 @@ function MovingBoxView({useNativeDriver}: {useNativeDriver: boolean}) {
   );
 }
 
-function MovingBoxExample(props: Props): React.Node {
+component MovingBoxExample() {
   const [useNativeDriver, setUseNativeDriver] = useState(false);
 
   return (

packages/rn-tester/js/examples/Animated/PanGestureExample.js

@@ -22,7 +22,7 @@ import {
   View,
 } from 'react-native';
 
-function TextBox({children}: Readonly<{children: React.Node}>): React.Node {
+component TextBox(children: React.Node) {
   // Prevent touch from being hijacked by Text
   return (
     <View pointerEvents="none">
@@ -31,15 +31,13 @@ function TextBox({children}: Readonly<{children: React.Node}>): React.Node {
   );
 }
 
-function AnimatedEventExample({
-  containerPageXY,
-  useNativeDriver,
-}: Readonly<{
+component AnimatedEventExample(
   containerPageXY: Readonly<{x: number, y: number}>,
   useNativeDriver: boolean,
-}>): React.Node {
+) {
   const boxRef = useRef<?React.ElementRef<typeof Animated.View>>();
 
+  // $FlowFixMe[react-rule-unsafe-ref]
   const pointerPageXY = useRef(
     new Animated.ValueXY(
       {
@@ -50,6 +48,7 @@ function AnimatedEventExample({
     ),
   ).current;
 
+  // $FlowFixMe[react-rule-unsafe-ref]
   const dragStartOffsetXY = useRef(
     new Animated.ValueXY({x: 0, y: 0}, {useNativeDriver}),
   ).current;
@@ -126,13 +125,14 @@ function AnimatedEventExample({
   );
 }
 
-function PanResponderExample({
-  useNativeDriver,
-}: Readonly<{useNativeDriver: boolean}>): React.Node {
+component PanResponderExample(useNativeDriver: boolean) {
+  // $FlowFixMe[react-rule-unsafe-ref]
   const finalOffsetXY = useRef(
     new Animated.ValueXY({x: 0, y: 0}, {useNativeDriver}),
   ).current;
+  // $FlowFixMe[react-rule-unsafe-ref]
   const dragStartOffsetXY = useRef({x: 0, y: 0}).current;
+  // $FlowFixMe[react-rule-unsafe-ref]
   const panResponder = useRef(
     PanResponder.create({
       onMoveShouldSetPanResponder: (pressEvent, gestureState) => {
@@ -177,7 +177,7 @@ function PanResponderExample({
   );
 }
 
-function PanGestureExample(): React.Node {
+component PanGestureExample() {
   const [busy, setBusy] = useState(false);
   const [useNativeDriver, setUseNativeDriver] = useState(false);
 

packages/rn-tester/js/examples/Animated/PressabilityWithNativeDrivers.js

@@ -16,7 +16,7 @@ import {Animated, Button, Text, View, useAnimatedValue} from 'react-native';
 
 const componentList: number[] = Array.from({length: 100}, (_, i) => i + 1);
 
-function PressableWithNativeDriver() {
+component PressableWithNativeDriver() {
   const currScroll = useAnimatedValue(0);
   const [count, setCount] = useState(0);
 

packages/rn-tester/js/examples/Animated/RotatingImagesExample.js

@@ -24,7 +24,7 @@ const styles = StyleSheet.create({
   },
 });
 
-function RotatingImagesView({useNativeDriver}: {useNativeDriver: boolean}) {
+component RotatingImagesView(useNativeDriver: boolean) {
   const anim = new Animated.Value(0);
   const rotatingAnimation = Animated.spring(anim, {
     // Returns to the start
@@ -84,7 +84,7 @@ function RotatingImagesView({useNativeDriver}: {useNativeDriver: boolean}) {
   );
 }
 
-function RotatingImagesExample(): React.Node {
+component RotatingImagesExample() {
   const [useNativeDriver, setUseNativeDriver] = useState(false);
 
   return (

packages/rn-tester/js/examples/Animated/TransformBounceExample.js

@@ -29,7 +29,7 @@ const styles = StyleSheet.create({
   },
 });
 
-function TransformBounceView({useNativeDriver}: {useNativeDriver: boolean}) {
+component TransformBounceView(useNativeDriver: boolean) {
   const anim = new Animated.Value(0);
   const bounceAnimation = Animated.spring(anim, {
     // Returns to the start
@@ -91,7 +91,7 @@ function TransformBounceView({useNativeDriver}: {useNativeDriver: boolean}) {
   );
 }
 
-function TransformBounceExample(): React.Node {
+component TransformBounceExample() {
   const [useNativeDriver, setUseNativeDriver] = useState(false);
 
   return (

packages/rn-tester/js/examples/Animated/TransformStylesExample.js

@@ -34,13 +34,7 @@ const transformProperties = {
   translateY: {outputRange: [0, 100], selected: false},
 };
 
-function AnimatedView({
-  properties,
-  useNativeDriver,
-}: {
-  properties: Array<string>,
-  useNativeDriver: boolean,
-}) {
+component AnimatedView(properties: Array<string>, useNativeDriver: boolean) {
   const animatedValue = new Animated.Value(0);
   const transformStyles = properties.map(property => ({
     [property]: animatedValue.interpolate({
@@ -78,7 +72,7 @@ function AnimatedView({
   );
 }
 
-function AnimatedTransformStyleExample(): React.Node {
+component AnimatedTransformStyleExample() {
   const [properties, setProperties] = useState(transformProperties);
   const [useNativeDriver, setUseNativeDriver] = useState(false);
   const onToggle = (property: string) =>