[v4] | [v2] BottomSheetModal with FlatList android vertical scroll NOT working?

[KJ-GM]

Bug

Case: I am using BottomSheetModal for a phone country picker, inside the BottomSheetModal we have a FlatList with a bunch of TouchableOpacity(buttons) rendered, when user clicks on one of the buttons inside the FlatList I will get callingCode of the country he pressed on and use it on the screen.

Problem:

• I think everything is done properly in my code and it works fine on IOS, However, with Android there are some issues, when the BottomSheetModal is opened, it presents the FlatList with data fine but, can NOT vertically scroll down and throws this warning:
  Warning: Cannot record touch end without a touch start. Touch End: {"identifier":0,"pageX":0,"pageY":0,"timestamp":3142039} Touch Bank: [null,null,null,{"touchActive":true,"startPageX":237.98269653320312,"startPageY":209.98660278320312,"startTimeStamp":3141861,"currentPageX":237.98269653320312,"currentPageY":220.90757751464844,"currentTimeStamp":3142031,"previousPageX":237.98269653320312,"previousPageY":209.98660278320312,"previousTimeStamp":3141861}]

• I tried the same FlatList without the BottomSheetModal and it worked perfectly with no issues, I tried to keep it and use TouchableOpacity from '@gorhom/bottom-sheet' or 'react-native-gesture-handler' still did NOT work and got same warning.

Environment info

Library	Version
@gorhom/bottom-sheet	^4.5.1
react-native	0.72.6
react-native-reanimated	^3.5.4
react-native-gesture-handler	^2.13.3

Steps To Reproduce

Describe what you expected to happen:

Reproducible sample code

import {
  View,
  ViewStyle,
  StyleProp,
  TextStyle,
  Text,
  FlatList,
} from 'react-native';
import React, {useCallback, useMemo, useRef, useState} from 'react';

// Custom stuff
import {colors, spacing} from '../../theme';
import {Button} from '../Button';

// Data
import {countries} from './countries';

// Modal
import {BottomSheetModal, TouchableOpacity} from '@gorhom/bottom-sheet';
//import {TouchableOpacity} from 'react-native-gesture-handler';

const PhoneInput = () => {
  // label state
  const [code, setCode] = useState<string>('995');
  // ref
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
  // variables
  const snapPoints = useMemo(() => ['75%'], []);

  // callbacks
  const handlePresentModalPress = useCallback(() => {
    bottomSheetModalRef.current?.present();
  }, []);

  const handleCloseModalPress = useCallback(() => {
    bottomSheetModalRef.current?.close();
  }, []);

  // handle code label state
  const handleState = (callingCode: string): void | undefined => {
    setCode(callingCode);
  };

  return (
    <View style={$phoneInputContainer}>
      {/* Country picker button */}
      <Button
        text={code}
        textStyle={$codeText}
        style={$pickerButton}
        onPress={handlePresentModalPress}
      />
      {/* Bottom sheet modal country picker */}
      <BottomSheetModal
        ref={bottomSheetModalRef}
        index={0}
        animateOnMount={true}
        snapPoints={snapPoints}>
        <View style={{flex: 1}}>
          <FlatList
            data={countries} // string[] example {flag:'🇰🇬' ,name:'Kyrgyzstan' ,callingCode:'+996'}
            renderItem={({item}) => (
              <TouchableOpacity
                onPress={() => {
                  handleState(item.callingCode);
                  handleCloseModalPress();
                }}
                style={$countryButton}>
                <View style={$countryWrapper}>
                  <Text>{item.flag}</Text>
                  <Text>{item.name}</Text>
                  <Text>{item.callingCode}</Text>
                </View>
              </TouchableOpacity>
            )}
            keyExtractor={item => item.flag}
            showsVerticalScrollIndicator={false}
            horizontal={false}
            style={{width: '100%'}}
            contentContainerStyle={{paddingBottom: 20}}
          />
        </View>
      </BottomSheetModal>
    </View>
  );
};

export default PhoneInput;

// Custom style
const $phoneInputContainer: ViewStyle = {
  height: 55,
  width: '100%',
  display: 'flex',
  flexDirection: 'row',
  alignItems: 'flex-start',
  paddingHorizontal: spacing.xs,
  marginTop: spacing.md,
};

const $codeText: TextStyle = {
  color: colors.palette.neutral700,
};

const $countryWrapper: ViewStyle = {
  display: 'flex',
  flexDirection: 'row',
  alignItems: 'center',
  justifyContent: 'space-between',
  paddingHorizontal: spacing.md,
  width: '100%',
  height: '100%',
};

const $countryButton: StyleProp<any> = {
  backgroundColor: colors.palette.neutral200,
  width: '100%',
  height: 50,
  borderRadius: 15,
  marginTop: 8,
};

const $pickerButton: StyleProp<any> = {
  width: '20%',
  height: '100%',
  minHeight: 10,
  borderRadius: 15,
  borderColor: colors.transparent,
  backgroundColor: colors.palette.neutral200,
  marginRight: spacing.xs,
};

[sashansk3]

HI! I think you should use pre-integrated Flatlist from BottomSheet. More info here.

[KJ-GM]

HI! I think you should use pre-integrated Flatlist from BottomSheet. More info here.

I tried using it now but then I get his error: TypeError: Cannot determine default value of object

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions]

This issue was closed because it has been stalled for 5 days with no activity.