React Native Bottom Sheet 테두리 Radius 변경

1. Background 컴포넌트 지정

      

      

      

    
    

      <javascript />
    
<BottomSheetModal
    ref={bottomSheetModalRef}
    index={0}
    enablePanDownToClose={true}
    snapPoints={snapPoints}
    backgroundComponent={renderBackground}	// 백그라운드 컴포넌트 지정
    backdropComponent={renderBackdrop}
    onChange={handleSheetChanges}>
    
    ....

 

2.  컴포넌트 props 전달

      

      

      

    
    

      <javascript />
    
const renderBackground = useCallback(
    props => <BottomSheetBackground {...props} />,
    [],
  );

 

3. 컴포넌트 생성 및 스타일 지정

      

      

      

    
    

      <javascript />
    
const BottomSheetBackground = ({style}: any) => {
    return (
      <View
        style={[
          {
            backgroundColor: 'white',
            borderRadius: 30,
          },
          {...style},
        ]}
      />
    );
  };