focusHook causes list to become unscrollable

Bug

There is an issue when using the focusHook prop on a BottomSheetFlatList. Opening the bottom sheet works fine and the list is scrollable, however when the BottomSheet component re-renders it locks the scrolling of the list.

Some investigation reveals that the re-rendering of BottomSheet causes ContentWrapper to also re-render, re-setting maxDeltaY. I can see that without focusHook, the function refreshUIElements is usually called which sets the maxDeltaY to 0 and enables scrolling. For some reason this is not happening with focusHook.

Environment info

Both iOS and Android

Library	Version
@gorhom/bottom-sheet	1.4.1
react-native	0.63.3
react-native-reanimated	2.0.0-alpha.7
react-native-gesture-handler	1.8.0

Steps To Reproduce

1. Load the example
2. Open the bottom sheet and scroll the list
3. Tap on a list item which triggers a re-render of the parent component.
4. Attempt to scroll the list

Reproducible sample code

import React from 'react';
import BottomSheet, { BottomSheetFlatList, TouchableOpacity } from '@gorhom/bottom-sheet';
import { useFocusEffect, NavigationContainer } from '@react-navigation/native';

import { View, AppRegistry, LogBox } from 'react-native';
import { useState } from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function Test() {
    const [, reRender] = useState(-1);

    return (
        <SafeAreaProvider>
            <BottomSheet snapPoints={[100, 600]}>
                <NavigationContainer>
                    <Stack.Navigator>
                        <Stack.Screen name="List">
                            {(props) => (
                                <BottomSheetFlatList
                                    focusHook={useFocusEffect}
                                    data={[...new Array(20)]}
                                    keyExtractor={(_, i) => i.toString()}
                                    renderItem={({ index }) => (
                                        <TouchableOpacity onPress={() => reRender(index)}>
                                            <View
                                                style={{
                                                    backgroundColor: 'red',
                                                    height: 50,
                                                    marginTop: 10
                                                }}
                                            />
                                        </TouchableOpacity>
                                    )}
                                />
                            )}
                        </Stack.Screen>
                    </Stack.Navigator>
                </NavigationContainer>
            </BottomSheet>
        </SafeAreaProvider>
    );
}

AppRegistry.registerComponent('Test', () => Test);

Thanks!

[fcandi]

@tankers746 thx!

I have the same problem with a BottomSheetFlatList inside a Navigator inside the Sheet. “Most” of the times (but not always), the FlatList is not scrollable. In my case, it does not make any difference, if I pass on focusHook to the List or not. I am not sure if I experience the same bug or if I maybe made some other mistake using the component…

Andreas

[tankers746]

Fixed in V2