[React-native] react-native bottom-sheet 모달

HongDuHyeon·2024년 8월 5일

react native

클라이밍 앱 만들기 개꿀잼...

오늘은 기획자와 간단한 스크럼을 통해 메인 페이지에 Bottom Sheet Modal이 필요하다는걸 들었다 !

구글링구글링.....

구현이 잘되어있고 관리도 잘되고 있는 라이브러리를 발견했다.
(링크)

오늘도 한번 해보자

💡 Install

yarn add @gorhom/bottom-sheet@^4
yarn add react-native-reanimated react-native-gesture-handler

라이브러리의 동작을 위해 reanimated가 필요하니 만약 설치가 안되어있다면 위에 두개도 챙겨주기

💡 Setting

전부 install을 한 뒤 앱을 켜면 띠용

Error: Reanimated failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?

이라는 에러가 뜬다.
하지만 겁낼거 없다.

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

bable.config.js에 plugins에 'react-native-reanimated/plugin'를 안넣어줬기 때문에 나는 에러여서 저것만 추가해주면 끝 !
혹시 모를 개발자들을 위해 더 추가할게 있다면 쉼표를 넣어서 추가해주자

💡 App Code

(...import 생략)
import BottomSheet from '@gorhom/bottom-sheet';

export const HomeScreen: React.FC = () => {
	const bottomSheetRef = useRef<BottomSheet>(null);
	const [bottomSheetIndex, setBottomSheetIndex] = useState<number>(-1);

    const handlePressBottomSheetOpen = useCallback(() => {
      setBottomSheetIndex(1);
      bottomSheetRef.current?.collapse();
    }, []);
  
    const handlePressBottomSheetClose = useCallback(() => {
    	bottomSheetRef.current?.close();
  	}, []);
  	
  	const handlePressAction  = useCallback(() => {
    	setBottomSheetIndex(0)
  	}, []);
  
  (...다른 코드 생략)
  
    return (
          <BottomSheet ref={bottomSheetRef} index={bottomSheetIndex} snapPoints={snapPoints}>
            <TouchableOpacity
              onPress={handlePressBottomSheetClose}
              style={{ position: 'absolute', top: 10, right: 20, padding: 8, zIndex: 9 }}
            >
              <Text>닫기</Text>
            </TouchableOpacity>
            <View style={{ flex: 1 }}>
              <Text style={{ fontSize: 16, fontWeight: '700', textAlign: 'center' }}>
				바텀시트 모달 어렵지 않아요 !
			  </Text>    
            </View>
          </BottomSheet>
	  )
}

BottomSheet를 import 해준 뒤 ref를 null값으로 설정해주고, 생성한 ref를 BottomSheet에 ref에 넣어준다.
snapPoints를 지정해줘야한다. snapPoints란 bottom-sheet의 크기를 지정할 수 있는 배열이다. 아주 요긴하게 쓰이니 꼭 추가해주자 추가 안하면 바로 에러가 뜨니...
index를 지정해줘야 하는데 내가 이해한건 snapPoints 배열의 번호를 불러주는 것이라고 판단했다.
index가 0일땐 내가 만든 snapPoints의 0번째 배열의 인자, 1번째는 1번째 배열의 인자를 받아온다.
핸들링 함수 작성을 해준다. ref값으로 collapse, close, expend,snapToIndex, snapToPosition, forceClose 등등 있지만 지금 구현을 해야하는건 collapse, close 이 두가지이다.
- collapse는 Snap to the minimum provided point from snapPoints.라고 적혀있다. 말 그대로 snapPoints의 최소값으로 모달이 열린다.
- close는 Close the bottom sheet.이다. 더 이상 설명은 생략한다.
그리고 추가로 index값에 1이나 2를 넣으면 뭘 어떻게 하든 그 사이즈로 열린다. 처음엔 왜그런지 몰라 잔뜩 화가 나있었지만 ^^... state로 관리해주기로 헀다.
bottomSheetIndex는 초기값을 -1로 해서 화면의 첫 렌더링 땐 아무것도 보이지 않고 유저가 특정 액션을 했을 때 setBottomSheetIndex(0)을 해줌으로써 snapPoints의 0번째 원소인 25%만큼 열리게 된다. 더 커스텀이 가능하지만 내가 원하는 기능은 이정도면 되기 때문에 스톱 !