Bugs with v3

[kickbk]

Bug

In this video we can see 3 bugs, however, I have a feeling they may be all related, and also related to my previous issue #401.

In the video you will see each time I refresh:

1. A normal load
2. BottomSheet is too low
3. SearchBottomSheetModal opens at 100% although I did not initiate it.
4. BottomSheet opens, closes, and reopens.

SeveralBugs.mp4

In my code I simulate an api call to fetch data with a setTimeout.

Environment info

Library	Version
@gorhom/bottom-sheet	^3
Expo	SDK 41 beta 3
react-native-reanimated	2.1.0
react-native-gesture-handler	1.10.2

Steps To Reproduce

Test the code below

Reproducible sample code

import React, {
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import { View, StyleSheet, Button, Text } from "react-native";
import BottomSheet, {
  BottomSheetModal,
  BottomSheetTextInput,
} from "@gorhom/bottom-sheet";
import withModalProvider from "./withModalProvider";
import { NativeViewGestureHandler } from "react-native-gesture-handler";

const SimpleExample = () => {
  // refs
  const searchModalRef = useRef<BottomSheetModal>(null);
  const resultsCarouselRef = useRef<BottomSheetModal>(null);

  // state
  const [
    currentSearchModalSnapPoint,
    setCurrentSearchModalSnapPoint,
  ] = useState(0);
  const [searchCompleted, setSearchCompleted] = useState(false);

  // variables
  const snapPoints = useMemo(() => [60, 250, "90%"], []);
  const resultsCarouselSnapPoints = useMemo(() => [0, 250], []);
  // Effects
  useLayoutEffect(() => {
    // On screen load, open the search modal
    searchModalRef.current!.present();
    setTimeout(() => {
      setSearchCompleted(true);
      resultsCarouselRef.current?.expand();
    }, 1000);
  }, []);

  // renders
  return (
    <View style={styles.container}>
      <Button
        title="Expand"
        onPress={() => {
          resultsCarouselRef.current!.expand();
        }}
      />
      <Button
        title="Hide"
        onPress={() => {
          resultsCarouselRef.current!.close();
        }}
      />
      <BottomSheetModal
        ref={searchModalRef}
        snapPoints={snapPoints}
        animationDuration={250}
        dismissOnPanDown={false}
        keyboardBehavior="interactive"
        keyboardBlurBehavior="restore"
        onDismiss={() => {
          console.log("bottomSheetRef dismissed");
        }}
        onChange={(snapPoint: number) => {
          setCurrentSearchModalSnapPoint(snapPoint);
          if (snapPoint === 0 && searchCompleted) {
            console.log("Expand results when at snap point 0");
            resultsCarouselRef.current?.expand();
          } else {
            console.log("close results when not at snap point 0");
            resultsCarouselRef.current?.collapse();
          }
        }}
      >
        <BottomSheetTextInput
          placeholder="Search"
          accessibilityComponentType
          accessibilityTraits
          style={styles.searchInput}
          clearButtonMode="while-editing"
          returnKeyType="search"
        />
        <View
          style={{
            backgroundColor: "blue",
            flex: 1,
          }}
        >
          <Text>Content</Text>
        </View>
      </BottomSheetModal>

      <BottomSheet
        ref={resultsCarouselRef}
        snapPoints={resultsCarouselSnapPoints}
        // topInset={topSafeArea}
        // animatedPosition={animatedModalPosition}
        handleComponent={() => <View />}
        backgroundComponent={null}
        onChange={(snapPoint: number) => {
          // Pull down the results carousel and show the search modal
          if (snapPoint === 0 && currentSearchModalSnapPoint !== 2) {
            // When we expand the search modal, it goes to snap point 2 and collapses the results sheet, which will run this event.
            // To avoid minimizing the search modal in this particular case, we check and make sure the search modal is not at snap point 2 (expanded).
            // We also use a stateful object to make sure we expand the search result only when manually collapsed. See https://github.com/gorhom/react-native-bottom-sheet/issues/356
            searchModalRef.current?.snapTo(1);
          }
        }}
      >
        {true && (
          <NativeViewGestureHandler disallowInterruption>
            <View style={{ flex: 1, backgroundColor: "green", height: 300 }}>
              <Text>Results</Text>
            </View>
          </NativeViewGestureHandler>
        )}
      </BottomSheet>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
  },
  buttonContainer: {
    marginBottom: 6,
  },
  // SearchBar
  searchContainer: {
    backgroundColor: "#eee",
    flex: 1,
    borderTopColor: "transparent",
    borderBottomColor: "transparent",
    paddingHorizontal: 0,
    paddingTop: 8,
    paddingBottom: 10,
  },
  searchInput: {
    backgroundColor: "#eee",
    padding: 20,
    fontSize: 16,
    color: "grey",
  },
});

export default withModalProvider(SimpleExample);

[gorhom]

hi @kickbk , i have tested this with latest v4 and it seems working fine, would you mind testing it again , thanks :)

import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
import { View, StyleSheet, Button, Text } from 'react-native';
import BottomSheet, {
  BottomSheetModal,
  BottomSheetTextInput,
} from '@gorhom/bottom-sheet';
import withModalProvider from './screens/withModalProvider';
import { NativeViewGestureHandler } from 'react-native-gesture-handler';

const SimpleExample = () => {
  // refs
  const searchModalRef = useRef<BottomSheetModal>(null);
  const resultsCarouselRef = useRef<BottomSheetModal>(null);

  // state
  const [currentSearchModalSnapPoint, setCurrentSearchModalSnapPoint] =
    useState(0);
  const [searchCompleted, setSearchCompleted] = useState(false);

  // variables
  const snapPoints = useMemo(() => [60, 250, '90%'], []);
  const resultsCarouselSnapPoints = useMemo(() => [0, 250], []);
  // Effects
  useLayoutEffect(() => {
    // On screen load, open the search modal
    searchModalRef.current!.present();
    setTimeout(() => {
      setSearchCompleted(true);
      resultsCarouselRef.current?.expand();
    }, 1000);
  }, []);

  // renders
  return (
    <View style={styles.container}>
      <Button
        title="Expand"
        onPress={() => {
          resultsCarouselRef.current!.expand();
        }}
      />
      <Button
        title="Hide"
        onPress={() => {
          resultsCarouselRef.current!.close();
        }}
      />
      <BottomSheetModal
        ref={searchModalRef}
        snapPoints={snapPoints}
        animationDuration={250}
        enableDismissOnClose={false}
        keyboardBehavior="interactive"
        keyboardBlurBehavior="restore"
        onDismiss={() => {
          console.log('bottomSheetRef dismissed');
        }}
        onChange={(snapPoint: number) => {
          setCurrentSearchModalSnapPoint(snapPoint);
          if (snapPoint === 0 && searchCompleted) {
            console.log('Expand results when at snap point 0');
            resultsCarouselRef.current?.expand();
          } else {
            console.log('close results when not at snap point 0');
            resultsCarouselRef.current?.collapse();
          }
        }}
      >
        <BottomSheetTextInput
          placeholder="Search"
          accessibilityComponentType
          accessibilityTraits
          style={styles.searchInput}
          clearButtonMode="while-editing"
          returnKeyType="search"
        />
        <View
          style={{
            backgroundColor: 'blue',
            flex: 1,
          }}
        >
          <Text>Content</Text>
        </View>
      </BottomSheetModal>

      <BottomSheet
        ref={resultsCarouselRef}
        snapPoints={resultsCarouselSnapPoints}
        // topInset={topSafeArea}
        // animatedPosition={animatedModalPosition}
        handleComponent={() => <View />}
        backgroundComponent={null}
        onChange={(snapPoint: number) => {
          // Pull down the results carousel and show the search modal
          if (snapPoint === 0 && currentSearchModalSnapPoint !== 2) {
            // When we expand the search modal, it goes to snap point 2 and collapses the results sheet, which will run this event.
            // To avoid minimizing the search modal in this particular case, we check and make sure the search modal is not at snap point 2 (expanded).
            // We also use a stateful object to make sure we expand the search result only when manually collapsed. See https://github.com/gorhom/react-native-bottom-sheet/issues/356
            searchModalRef.current?.snapTo(1);
          }
        }}
      >
        {true && (
          <NativeViewGestureHandler disallowInterruption>
            <View style={{ flex: 1, backgroundColor: 'green', height: 300 }}>
              <Text>Results</Text>
            </View>
          </NativeViewGestureHandler>
        )}
      </BottomSheet>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
  },
  buttonContainer: {
    marginBottom: 6,
  },
  // SearchBar
  searchContainer: {
    backgroundColor: '#eee',
    flex: 1,
    borderTopColor: 'transparent',
    borderBottomColor: 'transparent',
    paddingHorizontal: 0,
    paddingTop: 8,
    paddingBottom: 10,
  },
  searchInput: {
    backgroundColor: '#eee',
    padding: 20,
    fontSize: 16,
    color: 'grey',
  },
});

export default withModalProvider(SimpleExample);