skip to Main Content

I am using react-native-bottom-sheet with BottomSheetFlatList.

I want to open BottomSheetFlatList at initialPosition every time it opened but I am not able to achieve that. When I open it it’s always open at last scrolling position.

<BottomSheet
        ref={bottomSheetRef}
        index={0}
        snapPoints={snapPoints}
        enableDismissOnClose={true}
        handleIndicatorStyle={{display: 'none'}}
        handleStyle={{padding: 0}}>
        <View style={{backgroundColor: '#b2b2b2', alignItems: 'center'}}>
          {!isOpen && (
            <Pressable onPress={() => handleSnapPress(1)}>
              <Image
                source={IconCollapse}
                style={{width: 30, height: 20, backgroundColor: '#b2b2b2'}}
              />
            </Pressable>
          )}

          {isOpen && (
            <Pressable onPress={() => handleClosePress()}>
              <Image
                source={IconExpand}
                style={{width: 30, height: 20, backgroundColor: '#b2b2b2'}}
              />
            </Pressable>
          )}
        </View>
        <View style={{backgroundColor: '#b2b2b2'}}>
          <Text
            style={{
              color: 'white',
              fontSize: 20,
              textTransform: 'uppercase',
              paddingStart: 10,
            }}>
            Select Zone
          </Text>
          <View
            style={{
              borderBottomColor: '#fff',
              borderBottomWidth: 1,

              marginEnd: 10,
              marginStart: 10,
            }}
          />
        </View>
        <BottomSheetFlatList
          data={zoneList}

          keyExtractor={(item, index) => `${index}`}
          renderItem={renderItem}
          
         
                    contentContainerStyle={styles.contentContainer}
        />
      </BottomSheet>
    

3

Answers


  1. use Prop enableDismissOnClose

    as mentioned here

    Login or Signup to reply.
  2. you can try 
    this.flatListRef.scrollToOffset({ animated: true, offset: 0 });
    
    hope this is work
    
    Login or Signup to reply.
  3. As Mohammad Momin said you can try scrollToIndex({index: 0, offset: 0}).

    In order to do that you have to declare a ref for your FlatList and also specify the getItemLayout prop. Then you can call scrollToIndex.
    So every time that you open the bottomSheet you have to call scrollToIndex.

    The full working example I created is available in this github repositor which is something like this:

    export const CustomBottomSheet = forwardRef(({
        zoneList = [],
        selectedZone,
        onZoneSelected
    }, ref) => {
    
        const bottomSheetRef = useRef(null);
        const flatListRef = useRef(null);
    
        const scrollToItem = () => {
            if (!selectedZone) return;
            if (zoneList.length < 1) return;
            // find item index
            const index = zoneList.findIndex(value => value.id === selectedZone?.id);
            // scroll to destination index
            // it's better to set animated to true (experimental)
            flatListRef.current.scrollToIndex({
                animated: true,
                index: index, // 0
            })
            console.log('scrollToItem called by index:' + index)
        }
    
        const handleSnapPress = (index = 0) => {
            bottomSheetRef.current.snapToIndex(index);
            // call this method after each time user opens the bottom sheet
            scrollToItem();
        }
    
        const handleClosePress = () => {
            bottomSheetRef.current.snapToIndex(index);
        }
    
        const renderItem = ({ item }) => {
            return (
                <ListItem
                    {...item}
                    onPress={() => onZoneSelected(item)}
                    isSelected={item.id === selectedZone?.id}
                />
            )
        }
    
        const getItemLayout = (_, index) => (
            {
                length: ListItem.HEIGHT,
                offset: (ListItem.HEIGHT + ListItem.VERTICAL_SPACING) * index,
                index: index,
            }
        )
    
        // forwarding methods via ref
        useImperativeHandle(ref, () => ({
            open: handleSnapPress,
            close: handleClosePress,
            snapToIndex: handleSnapPress,
        }));
    
        return (
            <BottomSheet
                ref={bottomSheetRef}
                index={-1}
                snapPoints={SNAP_POINTS}
                enableDismissOnClose={true}
                // onChange={handleOnChange}
                enablePanDownToClose={true}
                >
                <View style={{ backgroundColor: '#b2b2b2', alignItems: 'center', marginTop: 16 }}>
                    <Text
                        style={{
                            color: 'white',
                            fontSize: 20,
                            textTransform: 'uppercase',
                            paddingStart: 10,
                        }}>
                        {'Select Zone'}
                    </Text>
                </View>
                <BottomSheetFlatList
                    // add ref and getItemLayout in order to use scrollToIndex method
                    ref={flatListRef}
                    getItemLayout={getItemLayout}
                    data={zoneList}
                    keyExtractor={(item) => item.id}
                    renderItem={renderItem}
                    contentContainerStyle={styles.contentContainer}
                />
            </BottomSheet>
        )
    })
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search