diff --git a/packages/rn-tester/js/examples/Animated/ColorStylesExample.js b/packages/rn-tester/js/examples/Animated/ColorStylesExample.js index 7b44870e6c2d..5abcded22ea8 100644 --- a/packages/rn-tester/js/examples/Animated/ColorStylesExample.js +++ b/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 ( diff --git a/packages/rn-tester/js/examples/Animated/CombineExample.js b/packages/rn-tester/js/examples/Animated/CombineExample.js index 700dfcab2306..8ee9a8120854 100644 --- a/packages/rn-tester/js/examples/Animated/CombineExample.js +++ b/packages/rn-tester/js/examples/Animated/CombineExample.js @@ -24,7 +24,7 @@ export default ({ render: () => , }: 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 = () => { setAnimation(mod)}>Modulo ); -}; +} const styles = StyleSheet.create({ content: { diff --git a/packages/rn-tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js b/packages/rn-tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js index 5b72071a3110..6808f10382fd 100644 --- a/packages/rn-tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js +++ b/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); diff --git a/packages/rn-tester/js/examples/Animated/ComposingExample.js b/packages/rn-tester/js/examples/Animated/ComposingExample.js index ecb6b3093fd4..e94c5b4d3fca 100644 --- a/packages/rn-tester/js/examples/Animated/ComposingExample.js +++ b/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,12 +127,7 @@ const items = [ }, ]; -function ComposingExampleItem({ - title, - description, - compositeAnimation, - useNativeDriver, -}: { +component ComposingExampleItem( title: string, description: string, compositeAnimation: ( @@ -141,7 +135,7 @@ function ComposingExampleItem({ 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 ( diff --git a/packages/rn-tester/js/examples/Animated/ContinuousInteractionsExample.js b/packages/rn-tester/js/examples/Animated/ContinuousInteractionsExample.js index 2c4fea2dc5ab..b0e7b0e1bfe2 100644 --- a/packages/rn-tester/js/examples/Animated/ContinuousInteractionsExample.js +++ b/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 ( diff --git a/packages/rn-tester/js/examples/Animated/EasingExample.js b/packages/rn-tester/js/examples/Animated/EasingExample.js index ad2c7500024d..386e12f15e4c 100644 --- a/packages/rn-tester/js/examples/Animated/EasingExample.js +++ b/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 ( diff --git a/packages/rn-tester/js/examples/Animated/FadeInViewExample.js b/packages/rn-tester/js/examples/Animated/FadeInViewExample.js index 56b8d4028054..08bfe01d79ff 100644 --- a/packages/rn-tester/js/examples/Animated/FadeInViewExample.js +++ b/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 ( diff --git a/packages/rn-tester/js/examples/Animated/LoopingExample.js b/packages/rn-tester/js/examples/Animated/LoopingExample.js index 4e24cf3f28e2..22a6acff3892 100644 --- a/packages/rn-tester/js/examples/Animated/LoopingExample.js +++ b/packages/rn-tester/js/examples/Animated/LoopingExample.js @@ -24,13 +24,7 @@ export default ({ render: () => , }: 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); diff --git a/packages/rn-tester/js/examples/Animated/MovingBoxExample.js b/packages/rn-tester/js/examples/Animated/MovingBoxExample.js index 84c8e0c48c44..c4044e8e06a6 100644 --- a/packages/rn-tester/js/examples/Animated/MovingBoxExample.js +++ b/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 ( diff --git a/packages/rn-tester/js/examples/Animated/PanGestureExample.js b/packages/rn-tester/js/examples/Animated/PanGestureExample.js index d9745ad76779..f01b2da85608 100644 --- a/packages/rn-tester/js/examples/Animated/PanGestureExample.js +++ b/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 ( @@ -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>(); + // $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); diff --git a/packages/rn-tester/js/examples/Animated/PressabilityWithNativeDrivers.js b/packages/rn-tester/js/examples/Animated/PressabilityWithNativeDrivers.js index 1b76cf8e3a2f..a16d35211615 100644 --- a/packages/rn-tester/js/examples/Animated/PressabilityWithNativeDrivers.js +++ b/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); diff --git a/packages/rn-tester/js/examples/Animated/RotatingImagesExample.js b/packages/rn-tester/js/examples/Animated/RotatingImagesExample.js index 670ab20dff36..1db3dc145ad0 100644 --- a/packages/rn-tester/js/examples/Animated/RotatingImagesExample.js +++ b/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 ( diff --git a/packages/rn-tester/js/examples/Animated/TransformBounceExample.js b/packages/rn-tester/js/examples/Animated/TransformBounceExample.js index bed883301640..151b0ce5aa92 100644 --- a/packages/rn-tester/js/examples/Animated/TransformBounceExample.js +++ b/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 ( diff --git a/packages/rn-tester/js/examples/Animated/TransformStylesExample.js b/packages/rn-tester/js/examples/Animated/TransformStylesExample.js index 4168e877a578..3da1dda0421f 100644 --- a/packages/rn-tester/js/examples/Animated/TransformStylesExample.js +++ b/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, - useNativeDriver: boolean, -}) { +component AnimatedView(properties: Array, 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) =>