useModal hooks React-Native Modal 방법

앱에서 Modal 레이어 팝업띄울때, 여러가지 방법이 있다. 

우선 React-Native에서 제공하는 Modal 이 있을것이다.

모듈로는
https://www.npmjs.com/package/react-native-modal

react-native-modal

 

이것저것 진행하던중

react-native-paper 에서 {Modal} 이 괜찮은것 같아, hooks로 만들었다. 

 

 

/**
 * @name useModal
 * @description modal팝업
 */
import React from 'react'
import {View, StyleSheet, ViewStyle} from 'react-native'
import {Modal, Portal} from 'react-native-paper'

type Props = {
  style?: ViewStyle | ViewStyle[]
  center?: boolean
  onClose?: () => void
  visible: boolean
  setVisible: (bool: boolean) => void
  component: any
}
// Hook
export const useModal = ({center, style, visible, setVisible, component}: Props): any => {
  // onClose
  const onClose = () => {
    setVisible(false)
  }
  // *----- 모달컨텐츠
  const modal = () => {
    return (
      <Portal>
        <Modal
          visible={visible}
          style={style}
          onDismiss={() => {
            onClose()
          }}>
          <View style={[center && styles.centerStyle]}>{!!component && component()}</View>
        </Modal>
      </Portal>
    )
  }
  return {modal, visible}
}

// styles
const styles = StyleSheet.create({
  /**@container */
  centerStyle: {alignItems: 'center'},
  /**@text */
})

/********************************************************
[사용법]
  const [visible, setVisible] = useState<boolean>(false)
  const { modal } = useModal({
    center: true,
    'visible': visible, 'setVisible': setVisible,
    'component': () => {
      return (
        <View style={{ width: 340, height: 100, backgroundColor: 'white' }}>
          <H1>타이틀</H1>
          <FillButton style={{ marginBottom: 20 }} label="modal" onPress={() => {
            setVisible(false)
          }} />
        </View >
      )
    }
  })
*********************************************************/