React-Native ActionSheet

앱에서 BottomSheet라고 불리는 아래에서 레이어팝업처럼 나오는

react-native-actions-sheet 중에 괜찮은것으로 골라서 hooks로 만들었다. 

TypeScript체크를 조금더 꼼꼼히 해야되어야하나, 사용중인 TS파일 하나 올려본다.

https://www.npmjs.com/package/react-native-actions-sheet

react-native-actions-sheet

/**
 * @name useActionSheet
 * @description useActionSheet
 */
import React, {createRef, useEffect} from 'react'
import {View, StyleSheet, ViewStyle} from 'react-native'
import ActionSheet, {ActionSheetProps} from 'react-native-actions-sheet'

type Props = {
  style?: ViewStyle
  onClose?: () => void
  visible?: boolean
  setVisible?: any
  component?: any
  asProps?: ActionSheetProps
}
// Hook
export const useActionSheet = ({style, visible, onClose, setVisible, component, asProps}: Props) => {
  // hooks
  const actionSheetRef = createRef() as any
  actionSheetRef.current?.hide()
  // *-------------------------------------------------------------------
  useEffect(() => {
    actionSheetRef.current?.setModalVisible(visible)
  }, [visible])
  // *----- 액션시트컨텐츠
  const actionSheet = () => {
    return (
      <ActionSheet
        id="ActionSheet"
        {...asProps}
        ref={actionSheetRef}
        onClose={() => {
          onClose && onClose()
          setVisible && setVisible(false)
        }}>
        <View style={[styles.actionSheet, style]}>{component()}</View>
      </ActionSheet>
    )
  }
  return {actionSheet, visible}
}
// styles
const styles = StyleSheet.create({
  /**@actionSheet */
  actionSheet: {overflow: 'hidden', borderRadius: 10, minHeight: 200},
  /**@text */
})

/********************************************************
[사용법]
  import { useActionSheet } from '@app/lib/hooks'
  const [visible, setVisible] = useState<boolean>(false)
  const {actionSheet} = useActionSheet({
    visible: actionSheetStore.visible,
    component: () => <Txt>actionSheet컨텐츠</Txt>,
  })
return(
    {!!actionSheetStore && actionSheet()}
)
[ 다른사용법 contextAPI+onClose]
  const { actionSheet } = useActionSheet({
    'visible': action_sheet_visible, component: () => <ActionSheet />,
    onClose: () => { dispatch({ type: 'VISIBLE_ACTION_SHEET', 'action_sheet_visible': false }) }
  })

*********************************************************/