BottomSheetUnresponsiveBug/App.tsx at main · Ripul01/BottomSheetUnresponsiveBug · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import {
  BottomSheetModal,
  BottomSheetModalProvider,
} from "@gorhom/bottom-sheet";
import React, { useEffect, useRef, useState } from "react";
import {
  BackHandler,
  Dimensions,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";
const { width, height } = Dimensions.get("window");

export default function App() {
  const bottomSheetRef = useRef<BottomSheetModal>(null);
  const modal2Ref = useRef<BottomSheetModal>(null);
  const snapPoints = ["50%", "50%"];

  const [bottomModalOpen, setBottomModalOpen] = useState(false);
  const [Modal2Open, setModal2Open] = useState(false);

  useEffect(() => {
    const backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      () => {
        if (bottomModalOpen) {
          bottomSheetRef.current?.close();
          return true;
        }

        if (Modal2Open) {
          modal2Ref.current?.close();
          return true;
        }

        return false;
      }
    );

    return () => backHandler.remove();
  }, [Modal2Open, bottomModalOpen]);

  const bottomModals = (
    <>
      <BottomSheetModal
        snapPoints={snapPoints}
        ref={bottomSheetRef}
        onDismiss={() => {
          setBottomModalOpen(false);
        }}
      >
        <View style={styles.bottomSheet}>
          <TextInput placeholder="Some Text" style={styles.text} />
        </View>
      </BottomSheetModal>
      <BottomSheetModal
        snapPoints={snapPoints}
        ref={modal2Ref}
        onDismiss={() => {
          setModal2Open(false);
        }}
      >
        <View style={styles.bottomSheet}>
          <TextInput placeholder="modal 2 Text" style={styles.text} />
        </View>
      </BottomSheetModal>
    </>
  );

  return (
    <BottomSheetModalProvider>
      <View style={styles.screen}>
        {bottomModals}
        <TouchableOpacity
          onPress={() => {
            bottomSheetRef.current?.present();
            setBottomModalOpen(true);
          }}
        >
          <Text style={styles.text}>Open Modal</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {
            modal2Ref.current?.present();
            setModal2Open(true);
          }}
        >
          <Text style={styles.text}>Open Modal 2</Text>
        </TouchableOpacity>
      </View>
    </BottomSheetModalProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    fontSize: 25,
  },
  screen: { flex: 1, alignItems: "center", justifyContent: "center" },
  bottomSheet: {
    flex: 1,
    backgroundColor: "lightgrey",
    paddingHorizontal: width * 0.05,
    paddingVertical: height * 0.02,
  },
});