如何将 bottomsheet 放在屏幕前面？

Question

In ReactNative, the bottomsheet is displayed overlaid on the fragment. Is there a way to make the bottomsheet rise to the top of the screenenter image description here

The bottom sheet looks opaque as in the picture, so the bottom sheet cannot be touched Please help

The code below is a shortened version

enter image description here

enter image description here

     import React, { FC , Component, useState, useEffect, Fragment,useCallback, useMemo, useRef } from "react"
        import { FlatList, ViewStyle, StyleSheet, View, Platform, TextInput, TouchableOpacity} from "react-native"
        import {
          BottomSheetModal,
          BottomSheetModalProvider,
          BottomSheetBackdrop,
        } from '@gorhom/bottom-sheet';

        const ROOT: ViewStyle = {
          backgroundColor: DefaultTheme.colors.background,
          flex: 1,
        }

        export const ChecklookupScreen: FC<StackScreenProps<NavigatorParamList, "checklookup">> = observer(function ChecklookupScreen() {
      
          const bottomSheetModalRef = useRef<BottomSheetModal>(null);

          // variables
          const snapPoints = useMemo(() => ['25%', '50%'], []);
          
          // callbacks
          const handlePresentModalPress = useCallback((index: string) => {
            LOG.info('handlePresentModalPress', index);
          
            bottomSheetModalRef.current?.present();
          }, []);
          const handleSheetChanges = useCallback((index: number) => {
            LOG.info
            console.log('handleSheetChanges', index);
          }, []);

      

          const renderItem = ({ item, index }) => (
            <TouchableOpacity
              
              key={index + item.inspNo + item.spvsNo}
              //style={listContainer}
              onPress={throttle(() => {
                onClickItem(item.inspNo,item.spvsNo);
              })}
            >
              <View>
                <Fragment>

              
                    </View>
                    <Button icon="magnify-expand"
                            mode="elevated"
                            style={styles.detailButton}
                            onPress={throttle(() => {
                              onClickItem(item.inspNo,item.spvsNo);
                            })}
                            // onPress={() => navigation.navigate("checkdetail")} 
                            >
                    </Button> 
                  </View>

                </Fragment>
              </View>
            </TouchableOpacity>
          );

          const fetchChecklookups = async (offset: number) => {
            LOG.debug('fetchChecklookups:' + offset);
            setRefreshing(true);
            await checklookupStore.getChecklookups(offset)
            setRefreshing(false);
          };

          const onEndReached = () => {
            if (checklookupStore?.checklookupsTotalRecord <= checklookups?.length) {
              LOG.debug('onEndReached555555555');
            } else {
              setPage(page + 1)
              fetchChecklookups(page + 1);
            }
          
          };
          const [searchQuery, setSearchQuery] = React.useState('');

          const onChangeSearch = query => setSearchQuery(query);

          return (
            <Screen preset="fixed" style={{ backgroundColor: colors.background, flex: 1, padding: 10,}}>
            <View style={{ flex: 1,}}>
            <View style={{ flex: 1, }}>
          
            <Searchbar
                    placeholder="조회조건을 입력해주세요"
                    onChangeText={onChangeSearch}
                    value={searchQuery}
                    onPressIn={() => handlePresentModalPress('touch on')}
                  />
                <BottomSheetModalProvider>
                      <BottomSheetModal
                              backgroundStyle={{ backgroundColor: "gray" }}
                              style={styles.bottomSheet}
                              ref={bottomSheetModalRef}
                              index={1}
                              snapPoints={snapPoints}
                              onChange={handleSheetChanges}
                            >
                            <View style={{ marginTop: 10, marginLeft: 50, marginRight: 50, flexDirection: "row"}}>
                            <View style={{ flex: 1, }}>
                          <Button 
                          mode="outlined"
                          >소속을 입력하세요
                          </Button>
                      </View>
                      </View>
                    </BottomSheetModal>
                    </BottomSheetModalProvider>

              </Screen>
              )
            })

Answer 1

You can try with portal, wrap you bottom sheet to from another package.