software-mansion / react-freeze

Prevent React component subtrees from rendering.
MIT License
1.54k stars 33 forks source link

[Android] first onLayout dimensions are 0 #7

Closed Freddy03h closed 2 years ago

Freddy03h commented 2 years ago

Hello, I'm testing this lib on my project, thought react-native-screen and react-navigation.

I noticed a small regression on Android, the first onLayout event on a view inside a react-navigation is fired with a width and height to 0 (and then, immediately after, a new event with correct dimensions) with enableFreeze(true)

{"height": 0, "width": 0, "x": 0, "y": 0}
{"height": 710.1818237304688, "width": 392.7272644042969, "x": 0, "y": 0}

and by removing enableFreeze, it trigger only one event with the correct dimensions:

{"height": 710.1818237304688, "width": 392.7272644042969, "x": 0, "y": 0}

Tested on react-native@0.66.3 && react-native-screens@3.9.0 with a <View> with a flex: 1 style. Android only (emulator Android 11 and device Android 8.1), I can't reproduce it on iOS.

Thank you.

kacperkapusciak commented 2 years ago

Hi @Freddy03h,

Could you check if https://github.com/software-mansion/react-native-screens/pull/1208 fixes this problem?

Freddy03h commented 2 years ago

It seems to fix the issue, thanks 👍

enahum commented 2 years ago

This stills happens on Android, as soon as I freeze the screen. In my case I have a FlatList inside the screen and as the layout changes from {"height": 640.3636474609375, "width": 392.7272644042969, "x": 0, "y": 0} to {"height": 0, "width": 0, "x": 0, "y": 0} the list will not maintain position. on iOS it works just fine

 <NavigationContainer>
        <Stack.Navigator
            screenOptions={{
                headerShown: false,
            }}
        >
            <Stack.Screen
                name='FlatList'
            >
                {() => <FlatList {...props}/>}
            </Stack.Screen>
        </Stack.Navigator>
    </NavigationContainer>