앱 바텀시트 컴포넌트 만들기 (React Native)

🚀

들어가기 전에🔗

이 글은 기본적인 Expo 프로젝트가 생성되어 있다고 가정합니다. Expo 프로젝트를 생성하는 방법은 Expo 프로젝트 생성:윈도우, Mac을 참고해주세요.
또한 기본적인 React Native CLI 개발 환경에서도 추가 설정만으로 사용 가능합니다.

✅

바텀 시트란?🔗

바텀 시트는 모바일 앱에서 많이 사용되는 UI 패턴 중 하나로, 화면 하단에서 사용자에게 추가 정보를 제공하거나 추가 작업을 유도하는 데 사용됩니다. 바텀 시트는 모달과 비슷하지만, 화면 하단에서 나타나는 것이 특징입니다. 우리는 이 바텀시트를 모든 화면에서 재사용할 수 있는 컴포넌트로 만들어보겠습니다.

참고 이미지 출처: https://gorhom.dev/react-native-bottom-sheet

이 포스팅에서 사용할 파일 구조입니다. (Expo 기준)

📦 app
 ┣ 📜 _layout.tsx
 ┣ 📜 index.tsx
 📦 components
 ┣ 📂 ui
 ┗ ┗ 📜 CustomBottomSheet.tsx

🚀

gorhom/bottom-sheet 라이브러리 설치 및 설정🔗

본인 환경에 맞게 골라 라이브러리를 설치합니다. 추가적으로 dependencies도 설치해 줍니다.

✅

1. 라이브러리 설치🔗

npm

npm install @gorhom/bottom-sheet

yarn

yarn add @gorhom/bottom-sheet@^5

✅

2. dependencies 설치🔗

(Expo 환경은 이미 설치되어 있을 확률이 높긴 합니다.)

Expo

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

React Native CLI - npm

npm install react-native-reanimated react-native-gesture-handler

React Native CLI - yarn

yarn add react-native-reanimated react-native-gesture-handler

✅

3. babel.config.js 설정🔗

Expo 환경에 babel.config.js 파일이 없다면 다음 명령어를 입력해 생성합니다. 스페이스바를 눌러 babel.config.js를 선택 후 엔터로 생성합니다.

npx expo customize

Expo 환경이 아니라면 babel.config.js 파일을 프로젝트 루트 폴더에 생성하고 다음과 같이 react-native-reanimated/plugin을 플러그인에 추가합니다.

🖐️

플러그인 리스트의 마지막에 추가해야 합니다.

babel.config.js

module.exports = {
	presets: [
		... // don't add it here :)
	],
	plugins: [
		...
		'react-native-reanimated/plugin',
	],
};

✅

4. metro.config.js 설정🔗

없다면 위의 babel.config.js와 같은 방법으로 생성합니다. 그리고 다음과 같이 metro.config.js 파일에서 기존 Metro 구성을 wrapWithReanimatedMetroConfig 함수를 사용하여 래핑합니다.

metro.config.js

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require("expo/metro-config");
const {
  wrapWithReanimatedMetroConfig,
} = require("react-native-reanimated/metro-config");
 
/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);
 
module.exports = wrapWithReanimatedMetroConfig(config);

다음 명령어로 캐시를 지워줍니다.

expo

npx expo start -c

npm

npm start -- --reset-cache

yarn

yarn start --reset-cache

✅

5. GestureHandlerRootView 추가🔗

GestureHandlerRootView 컴포넌트로 루트 컴포넌트를 감싸줍니다.

/app/_layout.tsx

import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
export default function Layout({ children }) {
  return (
    <GestureHandlerRootView>
      <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
        <Stack/>
      </ThemeProvider>
    </GestureHandlerRootView>
  );
}

✅

6. 마무리 설정🔗

ios 개발을 하는 경우 아래 명령어로 pod install을 해줍니다.

cd ios && pod install && cd ..

development 빌드를 하는 Expo 환경의 경우 다음 명령어로 네이티브 코드와 동기화를 해줍니다.

npx expo prebuild

🚀

바텀시트 사용하기🔗

일단은 빈 페이지에 바텀시트를 단순히 열고 닫는 기능을 구현해보겠습니다. BottomSheet 컴포넌트를 import하고 ref를 생성합니다. 그리고 expand, close 메소드를 사용하여 바텀시트를 열고 닫습니다.

/app/index.tsx

import React, { useCallback, useRef } from "react";
import { Text, StyleSheet, View, Button } from "react-native";
import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
 
const App = () => {
  // ref
  const bottomSheetRef = useRef<BottomSheet>(null);
 
  // callbacks
  const handleSheetChanges = useCallback((index: number) => {
    console.log("handleSheetChanges", index);
  }, []);
 
  // renders
  return (
    <View style={styles.container}>
      <Button title="expand" onPress={() => bottomSheetRef.current?.expand()} />
      <BottomSheet ref={bottomSheetRef} onChange={handleSheetChanges}>
        <BottomSheetView style={styles.contentContainer}>
          <Text>Awesome 🎉</Text>
          <Button
            title="close"
            onPress={() => bottomSheetRef.current?.close()}
          />
        </BottomSheetView>
      </BottomSheet>
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  },
  contentContainer: {
    flex: 1,
    padding: 36,
    alignItems: "center",
  },
});
 
export default App;

✅

바텀시트 Props 살펴보기🔗

커스텀 바텀시트를 만들기에 앞서, 자주 사용할 만한 중요한 props를 살펴보겠습니다.

props	설명	type	default	required
index	바텀시트의 초기상태 설정 (0, -1)	number	0	NO
snapPoints	바텀시트의 스냅포인트 설정 숫자 & 문자열 배열로, 고정될 높이를 의미합니다. ex. [200, "60%"] enableDynamicSizing가 false일 경우 필수	[]	-	YES
animateOnMount	마운트 시 애니메이션 여부	boolean	true	NO
backdropComponent	바텀시트 뒷배경 컴포넌트	BottomSheetBackdrop	-	NO
enablePanDownToClose	아래로 드래그하여 닫기 여부	boolean	true	NO

이외에도 다양한 props가 있으니 공식 문서↗를 참고해주세요.

🚀

커스텀 바텀시트 만들기🔗

먼저 몇 가지 조건을 설정해두겠습니다.

모든 설정을 props로 받아서 커스텀 가능하도록 합니다.
children으로 받은 컴포넌트를 바텀시트 내부에 렌더링합니다.
고정적인 스타일을 적용하지만, 커스텀 가능하도록 합니다.
바텀시트 안/밖에서 발생하는 이벤트를 props로 받아서 처리할 수 있도록 합니다.

먼저, BottomSheet 컴포넌트를 만들어보겠습니다. 먼저, interface를 정의하고, props를 받아서 BottomSheet 컴포넌트를 만들어보겠습니다.

snapPoints는 기본값으로 ["30%"]를 설정하고, props는 전달받은 props를 그대로 전달합니다. 단, 바텀시트 외부에서도 ref를 사용할 수 있도록

bottomSheetModalRef

를 전달합니다. 이후,

BottomSheetView

로 children을 감싸주겠습니다.

/app/components/ui/CustomBottomSheet.tsx

import React from "react";
import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
 
interface CustomBottomSheetProps extends BottomSheetProps {
  bottomSheetModalRef: React.RefObject<BottomSheet>;
  children: React.ReactNode;
  snapPoints?: string[];
}
 
const CustomBottomSheet: React.FC<CustomBottomSheetProps> = ({
  bottomSheetModalRef,
  children,
  snapPoints = ["30%"],
  ...props
}) => {
 
  return (
    <BottomSheet
      ref={bottomSheetModalRef}
      index={0}
      snapPoints={snapPoints}
      style={{
        zIndex: 10,
        elevation: 10,
      }}
      enableDynamicSizing={false}
      enablePanDownToClose={false}
      {...props}
    >
      <BottomSheetView style={{ flex: 1 }}>{children}</BottomSheetView>
    </BottomSheet>
  );
};
 
export default CustomBottomSheet;

이제 다시 index.tsx로 돌아가서 BottomSheet 컴포넌트를 사용해보겠습니다.

/app/index.tsx

import React, { useRef } from "react";
import { Text, StyleSheet, View, Button } from "react-native";
import BottomSheet from "@gorhom/bottom-sheet";
import CustomBottomSheet from "@/components/ui/CustomBottomSheet";
 
const App = () => {
  // ref
  const bottomSheetRef = useRef<BottomSheet>(null);
 
  // renders
  return (
    <View style={styles.container}>
      <Button title="expand" onPress={() => bottomSheetRef.current?.expand()} />
      <CustomBottomSheet
				children={
          <View style={styles.contentContainer}>
            <Text>Awesome 🎉</Text>
            <Button
              title="close"
              onPress={() => bottomSheetRef.current?.close()}
            />
          </View>
        }
        bottomSheetModalRef={bottomSheetRef}
      />
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  },
  contentContainer: {
    flex: 1,
    padding: 36,
    alignItems: "center",
  },
});
 
export default App;

👨‍💻

이전과 완벽히 동일한 동작을 하는 바텀 시트를 만들었습니다.

✅

backdropComponent 추가하기🔗

살짝 아쉬우니, backdropComponent를 추가해보겠습니다. backdropComponent는 바텀시트 뒷배경을 커스텀할 수 있는 컴포넌트입니다. backdropComponent는 props로 받지 않고, 컴포넌트 내부에 고정적으로 사용되도록 하겠습니다.

useCallback을 사용하여 renderBackdrop 함수를 만들고, BottomSheetBackdrop 컴포넌트를 반환합니다. 이후, BottomSheet 컴포넌트의 backdropComponent props에 renderBackdrop 함수를 전달합니다.

추가적으로 props들이 어떻게 동작하는지 확인하기 위해 snapPoints를 ["30%", "60%"]로 변경, enablePanDownToClose를 true로 변경해 보겠습니다. 또한, BottomSheetBackdrop의 pressBehavior를 "close"로 설정하여 바텀시트를 닫을 수 있도록 하겠습니다. "none"으로 설정하면 아무런 동작을 하지 않습니다.

/app/components/ui/CustomBottomSheet.tsx

//...
const CustomBottomSheet: React.FC<BottomSheetProps> = ({
  bottomSheetModalRef,
  children,
  snapPoints = ["30%", "60%"],
  ...props
}) => {
  const renderBackdrop = useCallback(
    (backdropProps: any) => (
      <BottomSheetBackdrop
        {...backdropProps}
        pressBehavior="close"
        appearsOnIndex={0}
        disappearsOnIndex={-1}
      />
    ),
    []
  );
 
  return (
    <BottomSheet
      ref={bottomSheetModalRef}
      index={0}
      snapPoints={snapPoints}
      style={{
        zIndex: 10,
        elevation: 10,
      }}
      backdropComponent={renderBackdrop}
      enableDynamicSizing={false}
      enablePanDownToClose={true}
      {...props}
    >
      <BottomSheetView style={{ flex: 1 }}>{children}</BottomSheetView>
    </BottomSheet>
  );
};
 
export default CustomBottomSheet;

바텀시트의 뒷배경에 색이 채워지고, 터치 시 바텀시트가 닫히는 것을 확인할 수 있습니다. 또한, 높이가 두 단계로 고정되고, 드래그를 아래까지 하면 바텀시트가 닫히는 것을 확인할 수 있습니다.

🚀

결론🔗

✅

전체 코드🔗

전체 코드 펼치기

/app/components/ui/CustomBottomSheet.tsx

import BottomSheet, {
  BottomSheetView,
  BottomSheetBackdrop,
  BottomSheetProps,
} from '@gorhom/bottom-sheet';
import { BottomSheetDefaultBackdropProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types';
import React, { useCallback } from 'react';
 
interface CustomBottomSheetProps extends BottomSheetProps {
  bottomSheetModalRef: React.RefObject<BottomSheet>;
  children: React.ReactNode;
  snapPoints?: string[];
}
 
const CustomBottomSheet: React.FC<CustomBottomSheetProps> = ({
  bottomSheetModalRef,
  children,
  snapPoints = ['30%'],
  ...props
}) => {
  const renderBackdrop = useCallback(
    (backdropProps: BottomSheetDefaultBackdropProps) => (
      <BottomSheetBackdrop
        {...backdropProps}
        pressBehavior="close"
        appearsOnIndex={0}
        disappearsOnIndex={-1}
      />
    ),
    [],
  );
 
  return (
    <BottomSheet
      ref={bottomSheetModalRef}
      index={0}
      snapPoints={snapPoints}
      style={{
        zIndex: 10,
        elevation: 10,
      }}
      backdropComponent={renderBackdrop}
      enableDynamicSizing={false}
      enablePanDownToClose={true}
      {...props}
    >
      <BottomSheetView style={{ flex: 1 }}>{children}</BottomSheetView>
    </BottomSheet>
  );
};
 
export default CustomBottomSheet;

/app/index.tsx

import BottomSheet from '@gorhom/bottom-sheet';
import React, { useRef } from 'react';
import { Text, StyleSheet, View, Button } from 'react-native';
 
import CustomBottomSheet from '@/components/atoms/CustomBottomSheet';
 
const App = () => {
  // ref
  const bottomSheetRef = useRef<BottomSheet>(null);
 
  // renders
  return (
    <View style={styles.container}>
      <Button title="expand" onPress={() => bottomSheetRef.current?.expand()} />
      <CustomBottomSheet
        index={0}
        children={
          <View style={styles.contentContainer}>
            <Text>Awesome 🎉</Text>
            <Button
              title="close"
              onPress={() => bottomSheetRef.current?.close()}
            />
          </View>
        }
        bottomSheetModalRef={bottomSheetRef}
      />
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  contentContainer: {
    flex: 1,
    padding: 36,
    alignItems: 'center',
  },
});
 
export default App;

✅

더 생각해 보기🔗

React Native Bottom Sheet Modal↗ 더 강력한 기능을 가지는 모달 형태의 바텀시트입니다. 이를 사용해보고, 커스텀 바텀시트를 만들어보세요.
바텀시트 내부에 스크롤 가능한 컴포넌트를 넣기 위해서는 어떻게 해야 할까요?

✅

앱 바텀시트 컴포넌트 만들기 (React Native)
Create App Bottom Sheet Component (React Native)

들어가기 전에🔗

바텀 시트란?🔗

gorhom/bottom-sheet 라이브러리 설치 및 설정🔗

1. 라이브러리 설치🔗

2. dependencies 설치🔗

3. babel.config.js 설정🔗

4. metro.config.js 설정🔗

5. GestureHandlerRootView 추가🔗

6. 마무리 설정🔗

바텀시트 사용하기🔗

바텀시트 Props 살펴보기🔗

커스텀 바텀시트 만들기🔗

backdropComponent 추가하기🔗

결론🔗

전체 코드🔗

더 생각해 보기🔗

참고🔗

앱 바텀시트 컴포넌트 만들기 (React Native)Create App Bottom Sheet Component (React Native)

들어가기 전에🔗

바텀 시트란?🔗

gorhom/bottom-sheet 라이브러리 설치 및 설정🔗

1. 라이브러리 설치🔗

2. dependencies 설치🔗

3. babel.config.js 설정🔗

4. metro.config.js 설정🔗

5. GestureHandlerRootView 추가🔗

6. 마무리 설정🔗

바텀시트 사용하기🔗

바텀시트 Props 살펴보기🔗

커스텀 바텀시트 만들기🔗

backdropComponent 추가하기🔗

결론🔗

전체 코드🔗

더 생각해 보기🔗

참고🔗

앱 바텀시트 컴포넌트 만들기 (React Native)
Create App Bottom Sheet Component (React Native)