rn의 bottom-sheet 사용법

bottom-sheet

RN 프로젝트를 진행하면서 해당 UI를 구성을 하게 되었고 제스처를 통해서 움직임을 줘야했습니다.

bottom-sheet 라이브러리

gorhom에서 제작한 bottom-sheet 패키지를 통해서 구성하게 되었습니다.

yarn add @gorhom/bottom-sheet@^5를 설치해야하고

그리고 종속성을 가진 패캐지도 설치해줘야합니다.

저는 expo를 사용하기에 expo 기준으로 설치했습니다.

npx expo install react-native-reanimated react-native-gesture-handler

bottom-sheet를 만들기 앞서 react-native-gesture-handler의 GestureHandlerRootView를 사용합니다.

그리고 @gorhom/bottom-sheet 에는 기본적으로 <BottomSheet> 와 <BottomSheetView>라는 컴포넌트를 지원해주는데 이것을 같이 활용해주면 제스처를 통한 애니메이션이 들어간 BottomSheet를 만들 수 있습니다.

import { GestureHandlerRootView } from 'react-native-gesture-handler';
import BottomSheet, { BottomSheetView } from '@gorhom/bottom-sheet';

const App = ()=>{

    const bottomSheetRef = useRef<BottomSheet>(null);

    return (
        <GestureHandlerRootView>
            <BottomSheet
                ref={bottomSheetRef}
            >
                <BottomSheetView>
                    <Text>난 텍스트야</Text>
                </BottomSheetView>
            </BottomSheet>
        </GestureHandlerRootView>
    )

}

Ref도 꼭 연결해야 합니다.

BottomSheet 위에 따라다니는 버튼 만들기

이 이미지처럼 위에 따라다니는 버튼이 필요했습니다.

검색을 해도 잘 나오지 않고 여러번 해매다가 겨우 방법을 찾았습니다.

props부분을 읽어보다 animatedPosition 라는것을 발견했습니다.

animatedPosition는 내부의 위치 값을 기반으로 콜백되는 애니메이션 값을 가져올 수 있습니다.

저는 해당 animatedPosition을 버튼이 자연스럽게 따라올 수 있게 react-native-reanimated의 useSharedValue를 사용해서 작업했습니다.

    const buttonPosition = useSharedValue<number>(0);
    const bottomSheetRef = useRef<BottomSheet>(null);

    const animatedButtonStyle = useAnimatedStyle(() => ({
        transform: [{ translateY: buttonPosition.value }],
    }));

    return (
        <GestureHandlerRootView>
            <Animated.View style={animatedButtonStyle}>
                <Text>따라녀요</Text>
            </Animated.View>
            <BottomSheet
                ref={bottomSheetRef}
                animatedPosition={buttonPosition}
            >
                <BottomSheetView>
                    <Text>난 텍스트야</Text>
                </BottomSheetView>
            </BottomSheet>
        </GestureHandlerRootView>
    )

이렇게 작성해서 BottomSheet와 BottomSheet의 따라다니는 버튼을 만들 수 있었습니다.

후기

native 프로젝트에서 BottomSheet는 생각보다 많이 사용될것 같아서 집중적으로 좀더 docs를 읽어볼려고 합니다. props에 굉장히 많은 부분들이 담겨있어 도움이 많이 될것 같고 Modal로도 사용할 수 있기 때문에 확장성이 좋은것 같습니다.