Fix elements measuring after animations

packages/app-harness/src/screens/tests/index.ts

@@ -16,6 +16,7 @@ import complexTabs from './complexTabs';
 import hideAllElements from './hideAllElements';
 import dynamicRows from './dynamicRows';
 import remoteHandler from './remoteHandler';
+import measureWithAnimations from './measureWithAnimations';
 
 export default {
     viewGroup,
@@ -36,4 +37,5 @@ export default {
     hideAllElements,
     dynamicRows,
     remoteHandler,
+    measureWithAnimations,
 };

packages/app-harness/src/screens/tests/measureWithAnimations.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useRef } from 'react';
+import { StyleSheet } from 'react-native';
+import { ScrollView, View, withParentContextMapper, Animated } from '@flexn/create';
+import { getScaledValue } from '@rnv/renative';
+import Screen from '../screen';
+import { Button } from '../../components/Button';
+import { Ratio } from '../../utils';
+
+const AnimatedView = withParentContextMapper(Animated.createAnimatedComponent(View));
+
+const MeasureWithAnimations = () => {
+    const moveAnimation = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+        Animated.timing(moveAnimation, {
+            toValue: 400,
+            duration: 5000,
+            useNativeDriver: false,
+        }).start();
+    }, []);
+
+    const onButton1Press = () => {
+        Animated.timing(moveAnimation, {
+            toValue: 0,
+            duration: 1000,
+            useNativeDriver: false,
+        }).start();
+    };
+
+    return (
+        <Screen style={{ backgroundColor: '#222222' }}>
+            <ScrollView>
+                <View style={{ top: Ratio(20) }}>
+                    <Button
+                        style={{ ...styles.button }}
+                        title="Animate button 2"
+                        textStyle={styles.buttonTextStyle}
+                        onPress={onButton1Press}
+                    />
+                    <AnimatedView
+                        style={{
+                            transform: [{ translateX: moveAnimation }],
+                            // left: moveAnimation,
+                        }}
+                    >
+                        <Button style={{ ...styles.button }} title="Button2" textStyle={styles.buttonTextStyle} />
+                    </AnimatedView>
+                </View>
+            </ScrollView>
+        </Screen>
+    );
+};
+
+const styles = StyleSheet.create({
+    button: {
+        marginHorizontal: getScaledValue(20),
+        borderWidth: getScaledValue(2),
+        borderRadius: getScaledValue(25),
+        borderColor: '#62DBFB',
+        height: getScaledValue(50),
+        width: Ratio(500),
+        marginTop: getScaledValue(20),
+    },
+    buttonTextStyle: {
+        color: '#ffffff',
+        fontSize: Ratio(20),
+    },
+    packshot: {
+        width: Ratio(200),
+        height: Ratio(200),
+        margin: Ratio(5),
+    },
+    image: {
+        width: '100%',
+        height: '100%',
+    },
+    button1Pos: {},
+    button2Pos: {
+        left: Ratio(400),
+    },
+});
+
+MeasureWithAnimations.id = 'MWA1';
+MeasureWithAnimations.platform = ['androidtv', 'firetv', 'tvos', 'tizen', 'webos'];
+MeasureWithAnimations.route = 'MeasureWithAnimations';
+MeasureWithAnimations.title = 'MeasureWithAnimations';
+MeasureWithAnimations.description = '';
+
+export default MeasureWithAnimations;

packages/create/src/apis/Animated/index.ts

@@ -1,3 +1,74 @@
 import { Animated } from 'react-native';
+import FocusModel from '../../focusManager/model/abstractFocusModel';
 
-export default Animated;
+type EndResult = { finished: boolean };
+type EndCallback = (result: EndResult) => void;
+
+const onAnimationEnds = (focusContext?: FocusModel) => {
+    if (focusContext) {
+        focusContext.remeasureChildrenLayouts(focusContext);
+    }
+};
+
+const getPropsFromAnimatableValue = (value: Animated.Value | Animated.ValueXY) => {
+    // @ts-ignore it's internal property not intended to be used outside, but now it's only why
+    // to determine which component we're animating
+    const focusContext = value._children?.[0]?._children?.[0]?._children?.[0]?._props?.focusContext;
+
+    return focusContext;
+};
+
+export const spring = (
+    value: Animated.Value | Animated.ValueXY,
+    config: Animated.SpringAnimationConfig
+): Animated.CompositeAnimation => {
+    return {
+        start: (callback?: EndCallback) => {
+            Animated.spring(value, config).start(({ finished }) => {
+                callback?.({ finished });
+                onAnimationEnds(getPropsFromAnimatableValue(value));
+            });
+        },
+        stop: Animated.spring(value, config).stop,
+        reset: Animated.spring(value, config).reset,
+    };
+};
+
+export const decay = (
+    value: Animated.Value | Animated.ValueXY,
+    config: Animated.DecayAnimationConfig
+): Animated.CompositeAnimation => {
+    return {
+        start: (callback?: EndCallback) => {
+            Animated.decay(value, config).start(({ finished }) => {
+                callback?.({ finished });
+                onAnimationEnds(getPropsFromAnimatableValue(value));
+            });
+        },
+        stop: Animated.decay(value, config).stop,
+        reset: Animated.decay(value, config).reset,
+    };
+};
+
+export const timing = (
+    value: Animated.Value | Animated.ValueXY,
+    config: Animated.TimingAnimationConfig
+): Animated.CompositeAnimation => {
+    return {
+        start: (callback?: EndCallback) => {
+            Animated.timing(value, config).start(({ finished }) => {
+                callback?.({ finished });
+                onAnimationEnds(getPropsFromAnimatableValue(value));
+            });
+        },
+        stop: Animated.timing(value, config).stop,
+        reset: Animated.timing(value, config).reset,
+    };
+};
+
+export default {
+    ...Animated,
+    timing,
+    decay,
+    spring,
+};

packages/create/src/components/FlashList/index.tsx

@@ -1,4 +1,4 @@
-import React, { ForwardedRef, useEffect, useRef, useState } from 'react';
+import React, { ForwardedRef, useEffect, useRef, useState, LegacyRef } from 'react';
 import { View as RNView, Platform } from 'react-native';
 import { FlashList as FlashListComp, ListRenderItemInfo, CellContainer } from '@flexn/shopify-flash-list';
 import BaseScrollComponent from '@flexn/recyclerlistview/dist/reactnative/core/scrollcomponent/BaseScrollComponent';
@@ -14,9 +14,9 @@ import { Ratio } from '../../helpers';
 import View from '../../focusManager/model/view';
 import { CoreManager } from '../..';
 
-const FlashList = (props: FlashListProps<any>) => {
+const FlashList = React.forwardRef((props: FlashListProps<any>, ref: LegacyRef<FlashListComp<any>>) => {
     if (!CoreManager.isFocusManagerEnabled()) {
-        return <FlashListComp {...props} />;
+        return <FlashListComp {...props} ref={ref} />;
     }
 
     const {
@@ -205,6 +205,6 @@ const FlashList = (props: FlashListProps<any>) => {
             )}
         </RNView>
     );
-};
+});
 
 export default FlashList;

packages/create/src/hooks/useOnLayout.ts

@@ -1,40 +1,28 @@
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import { InteractionManager } from 'react-native';
 import CoreManager from '../focusManager/service/core';
 import Event, { EVENT_TYPES } from '../focusManager/events';
 import FocusModel from '../focusManager/model/abstractFocusModel';
 
 export default function useOnLayout(model: FocusModel | null, callback?: (() => void) | (() => Promise<void>)) {
-    const interactionPromise = useRef<Promise<any>>();
-    const pendingCallbacks = useRef<{ (): void | Promise<void> }[]>([]).current;
-
     useEffect(() => {
-        interactionPromise.current = InteractionManager.runAfterInteractions(() => {
-            if (pendingCallbacks.length) {
-                for (let index = 0; index < pendingCallbacks.length; index++) {
-                    pendingCallbacks[index]();
-                }
-                pendingCallbacks.splice(0, pendingCallbacks.length);
-            }
-
-            return true;
-        }).then(() => Promise.resolve());
+        InteractionManager.runAfterInteractions(() => {
+            sendOnLayoutEvent();
+        });
     }, []);
 
     const onLayout = () => {
-        if (interactionPromise.current) {
-            interactionPromise.current.then(() => {
-                if (model) {
-                    CoreManager.setPendingLayoutMeasurement(model, () => {
-                        Event.emit(model.getType(), model.getId(), EVENT_TYPES.ON_LAYOUT);
-                        callback?.();
-                    });
-                } else {
-                    callback?.();
-                }
+        sendOnLayoutEvent();
+    };
+
+    const sendOnLayoutEvent = () => {
+        if (model) {
+            CoreManager.setPendingLayoutMeasurement(model, () => {
+                Event.emit(model.getType(), model.getId(), EVENT_TYPES.ON_LAYOUT);
+                callback?.();
             });
         } else {
-            if (callback) pendingCallbacks.push(callback);
+            callback?.();
         }
     };