[RN] gorhom 바텀시트 사용하기

📱테스트 환경

"react": "19.0.0",
"react-native": "0.79.2"

---

gorhom 이 가장 많은 바텀시트 사용량을 보이길래 이걸로 작업을 진행했다.다른곳에서도 사용하기에 컴포넌트 분리시켜놓고 커스텀가능하게끔 만들어놨다.

import React, {forwardRef, useMemo} from 'react';
import {default as GorhomBottomSheet} from '@gorhom/bottom-sheet';
import {SHADOWS} from '~styles/shadows';

export type BottomSheetProps = {
  children: React.ReactNode;
  snapPoints?: (string | number)[];
  enablePanDownToClose?: boolean;
  onChange?: (index: number) => void;
};

/*
 * 반드시 사용하는 부모 뷰에서
 * <GestureHandlerRootView style={{ flex: 1 }}></GestureHandlerRootView>
 * 로 감싸줄 것
 */

export const BottomSheet = forwardRef<GorhomBottomSheet, BottomSheetProps>(({children, snapPoints, onChange, enablePanDownToClose}, ref) => {
  const memoizedSnapPoints = useMemo(() => snapPoints ?? ['80%'], [snapPoints]);

  return (
    <GorhomBottomSheet
      ref={ref}
      snapPoints={memoizedSnapPoints}
      onChange={onChange}
      enablePanDownToClose={enablePanDownToClose}
      style={SHADOWS.BOTTOM_SHEET}
      containerStyle={{
        zIndex: 2,
      }}
      activeOffsetX={[-999, 999]} activeOffsetY={[-5, 5]}
    >
      {children}
    </GorhomBottomSheet>
  );
});

여기서 가장 중요한게 activeOffsetX activeOffsetY 다 ....

진짜 애들때문에 고생이란 고생은 다했는데 ..

저거 없으면 바텀시트안에서 안드로이드에서 횡스크롤 ( 가로스크롤 )이 안된다.

이유는 바텀시트가 터치이벤트를 가져가버리기 때문에 안의 요소의 스크롤 터치가

안먹는 이유인데 저걸 통해서 터치이벤트를 구분해서 작업하는것이다 ..

바텀시트쪽 사용 방법은 다음과 같다.

<BottomSheet
      ref={ref}
      snapPoints={['13%', '60%']}
      onChange={onChange}
    >
      <Category />
      <Switch options={['おすすめ順', '口コミ数順', '距離順']} selected={'おすすめ順'} setSelected={() => {}}/>
      <Divider />
      <BottomSheetScrollView
        contentContainerStyle={styles.container}
        showsVerticalScrollIndicator={true}
        keyboardShouldPersistTaps="handled"
        style={styles.container}
      >
        <Title />
        {
          Array.from({length: 10}).map((_, i) => (
            <Contents key={i}/>
          ))
        }
      </BottomSheetScrollView>
    </BottomSheet>

snapPoints 를 통해서 바텀시트의 높이를 지정해줄수있는데

const onChange = (index: number) => {
    console.log(index)
  }

를 통해서 바텀시트의 높이값을 트래킹 할 수 있다.

0 : 초기상태

1 : 살짝 올라온상태 ( 코드상으론 13% 이 될것이다. )

2 : 최대 상태 ( 코드상으론 60% 이상이 될것이다. )