[RN-TS] Sliding Up Panel / Bottom Slide / 아래에서 위로 올라오는 슬라이드 구현하기

React-Native 맨땅에 헤딩하며 앱 개발하는 중..

아무것도 모르는 상태로 진행하려니 어렵다 ㅠㅠ React랑 비슷한가? 싶으면서도 전혀 다른 거 같기도 하다.

 

그리고 지금 아래에서 올라오는 슬라이딩 뷰가 필요한데 어떻게 개발을 해야 하나 구글링 해보다가

다들 RN 개발할 때 라이브러리 쓰는 것 같고.. 이름은 슬라이딩 어쩌구가 아닐까.. 검색해서 찾은 Sliding Up Panel

Sliding Up Panel

하지만 나는 함수형으로 TypeScript 사용하고 있는데, 이 라이브러리 클래스형의 JavaScript 였다..

당시에는 다른 라이브러리를 못 찾아서 일단 함수형 TS로 문법을 바꿔 봤는데 계속 동작을 안 하는 것.

 

그렇게 구글링을 계속 하다 보니 다른 라이브러리도 두세개 정도 더 찾을 수 있었다.

GitHub - osdnk/react-native-reanimated-bottom-sheet: Highly configurable bottom sheet component made with react-native-reanimate

이런 거나,

혹은 직접 구현한 방법을 설명해주는 글... 갓.... (팀원이 찾아서 보내줌)

React Native Overlapping Components

 

그러면서 이것저것 해보다 보니 결국 내 코드의 문제를 발견하고

가까스로 이 삽질기를 마무리할 수 있었다.

import React, { useRef } from 'react';
import {
  Button,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
} from 'react-native';
import SlidingUpPanel from 'rn-sliding-up-panel';


export default function MapPage() {

  const panelRef = useRef<SlidingUpPanel | null>(null);

  return (
    <>
      <View style={{styles.page}}>
        <SpotListIcon 
         onPress={() => {panelRef.current?.show(250);}}
        ></SpotListIcon>

        <Map center={mapCenter} places={places} />
      </View>

      <SlidingUpPanel 
        containerStyle={{flex: undefined, alignSelf: undefined}}
        ref={c => panelRef.current = c}
      >
        <View style={styles.container}>
          <Button title="hide" onPress={() => panelRef.current?.hide()}></Button>
        </View>
      </SlidingUpPanel>
    </>
  );
}

useRef를 통해 SlidingPanel의 속성을 갖는 ref를 panelRef에 null로 선언한다.

 

return 되는 부분에서 초기에 보여줄 전체화면 컴포넌트와, <View>

슬라이딩 패널로 띄울 컴포넌트를 분리한다. <SlidingUpPanel>

 

SlidingUpPanel의 현재 ref를 panelRef.current에 넣어준다.

View화면의 SpotListIcon을 Press했을 때 panelRef의 show()를 실행한다. 이 때 250은 패널의 높이.

 

 

이제 데이터 띄워야지 엉엉 😭