From d6794dddc5788aeef0487da152ccee261a0d3223 Mon Sep 17 00:00:00 2001 From: M-i-k-e-l Date: Tue, 16 Sep 2025 21:57:33 +0300 Subject: [PATCH 1/4] AnimatedImage - use useEffect instead of onLoadStart --- src/components/animatedImage/index.tsx | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/components/animatedImage/index.tsx b/src/components/animatedImage/index.tsx index defc4ea8a0..7c5767e03a 100644 --- a/src/components/animatedImage/index.tsx +++ b/src/components/animatedImage/index.tsx @@ -1,5 +1,5 @@ // TODO: consider unify this component functionality with our Image component -import React, {useState, useCallback, useMemo} from 'react'; +import React, {useState, useCallback, useMemo, useEffect} from 'react'; import {StyleSheet, StyleProp, ViewStyle, NativeSyntheticEvent, ImageLoadEventData} from 'react-native'; import Animated, {useSharedValue, useAnimatedStyle, withTiming} from 'react-native-reanimated'; import View from '../../components/view'; @@ -51,6 +51,12 @@ const AnimatedImage = (props: AnimatedImageProps) => { } }, [loader]); + useEffect(() => { + setIsLoading(true); + propsOnLoadStart?.(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [source]); + const onLoad = useCallback((event: NativeSyntheticEvent) => { setIsLoading(false); propsOnLoad?.(event); @@ -62,10 +68,11 @@ const AnimatedImage = (props: AnimatedImageProps) => { // eslint-disable-next-line react-hooks/exhaustive-deps [setIsLoading, propsOnLoad, animationDuration]); - const onLoadStart = useCallback(() => { - setIsLoading(true); - propsOnLoadStart?.(); - }, [setIsLoading, propsOnLoadStart, animationDuration]); + // TODO: revert to this solution when iOS is fixed (RN77 bug) + // const onLoadStart = useCallback(() => { + // setIsLoading(true); + // propsOnLoadStart?.(); + // }, [setIsLoading, propsOnLoadStart, animationDuration]); const fadeInStyle = useAnimatedStyle(() => { return {opacity: opacity.value}; @@ -81,7 +88,7 @@ const AnimatedImage = (props: AnimatedImageProps) => { style={_style} source={source} onLoad={onLoad} - onLoadStart={onLoadStart} + // onLoadStart={onLoadStart} testID={testID} imageStyle={undefined} /> From a480f0c10fd3568a26f735acfe706a0f49c374da Mon Sep 17 00:00:00 2001 From: M-i-k-e-l Date: Wed, 17 Sep 2025 09:37:30 +0300 Subject: [PATCH 2/4] Fix snapshot --- .../screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap | 1 - 1 file changed, 1 deletion(-) diff --git a/demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap b/demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap index 3dda40d4bd..8b41344551 100644 --- a/demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap +++ b/demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap @@ -1466,7 +1466,6 @@ exports[`AvatarScreen renders screen 1`] = ` assetGroup="icons" onError={[Function]} onLoad={[Function]} - onLoadStart={[Function]} source={ { "uri": "https://static.pexels.com/photos/60628/flower-garden-blue-sky-hokkaido-japan-60628.jpeg", From bb617348d389b27c9163cb10bac218f14de00d66 Mon Sep 17 00:00:00 2001 From: M-i-k-e-l Date: Wed, 17 Sep 2025 09:40:08 +0300 Subject: [PATCH 3/4] Replace nonexistent image --- .../screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap | 2 +- demo/src/screens/componentScreens/AvatarsScreen.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap b/demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap index 8b41344551..b416eb5cff 100644 --- a/demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap +++ b/demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap @@ -1468,7 +1468,7 @@ exports[`AvatarScreen renders screen 1`] = ` onLoad={[Function]} source={ { - "uri": "https://static.pexels.com/photos/60628/flower-garden-blue-sky-hokkaido-japan-60628.jpeg", + "uri": "https://lh3.googleusercontent.com/-CMM0GmT5tiI/AAAAAAAAAAI/AAAAAAAAAAA/-o9gKbC6FVo/s181-c/111308920004613908895.jpg", } } style={ diff --git a/demo/src/screens/componentScreens/AvatarsScreen.tsx b/demo/src/screens/componentScreens/AvatarsScreen.tsx index 37d9cbe627..2a699a6146 100644 --- a/demo/src/screens/componentScreens/AvatarsScreen.tsx +++ b/demo/src/screens/componentScreens/AvatarsScreen.tsx @@ -43,7 +43,7 @@ const examples = [ size: 60, animate: true, imageProps: {animationDuration: 1000}, - source: {uri: 'https://static.pexels.com/photos/60628/flower-garden-blue-sky-hokkaido-japan-60628.jpeg'} + source: {uri: 'https://lh3.googleusercontent.com/-CMM0GmT5tiI/AAAAAAAAAAI/AAAAAAAAAAA/-o9gKbC6FVo/s181-c/111308920004613908895.jpg'} }, { title: 'Big pimple', From d20b86e24170e3e53f4fe986639f2f9918223f50 Mon Sep 17 00:00:00 2001 From: M-i-k-e-l Date: Wed, 17 Sep 2025 09:53:04 +0300 Subject: [PATCH 4/4] Fix test --- demo/src/screens/__tests__/AvatarScreen.spec.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/demo/src/screens/__tests__/AvatarScreen.spec.js b/demo/src/screens/__tests__/AvatarScreen.spec.js index a4d3be50bb..76db71181a 100644 --- a/demo/src/screens/__tests__/AvatarScreen.spec.js +++ b/demo/src/screens/__tests__/AvatarScreen.spec.js @@ -1,5 +1,5 @@ import React from 'react'; -import renderer from 'react-test-renderer'; +import renderer, {act} from 'react-test-renderer'; describe('AvatarScreen', () => { let AvatarScreen; @@ -9,7 +9,14 @@ describe('AvatarScreen', () => { }); it('renders screen', () => { - const tree = renderer.create().toJSON(); + let testRenderer; + act(() => { + testRenderer = renderer.create(); + }); + const tree = testRenderer.toJSON(); expect(tree).toMatchSnapshot(); + act(() => { + testRenderer.unmount(); + }); }); });