React-Native Sweet Alert 만들기

+++ react-native-swal 라이브러리를 출시했습니다!
TypeScript를 사용하는것이 익숙하지 않아 앞으로 더욱더 발전 시켜 나갈 예정이니 지켜봐주세요!
라이브러리 내부에서 setTimeout으로 원하는 시간동안 보여질 수 있게, 외부 터치시 모달 꺼지게 기능 포함해서 업로드 해 두었습니다.
https://www.npmjs.com/package/react-native-swal

프로젝트 개발 중 위의 사진들처럼 어떤 로직이 성공 했을 때 잠깐 나타났다 사라지는 작은 모달창이 필요했고 이전에 react 로 프로젝트를 했을 때 Sweet Alert를 사용해서 해당 부분을 표현 했던적이 있어 인터넷에 react native sweet alert를 검색해 보았다.
결과적으로 원하는 모양의 라이브러리를 찾을 수 없었고 직접 만들어 보기로 했다.

일단 전체적인 코드를 보면

//SweetAlert.js
import { View, Text, Modal, Pressable, StyleSheet } from 'react-native'
import React from 'react'


const SweetAlert = ({ swal, setSwal, text }) => {
  return (
    <View>
      <Modal
        animationType="slide"
        transparent={true}
        visible={swal}
        onRequestClose={() => {
          // Alert.alert("Modal has been closed.");
          setSwal(!swal);
        }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>{text}</Text></View>
        </View>
      </Modal>
    </View>
  )
}

export default SweetAlert

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: 'flex-end',
    marginBottom: 80,
    alignItems: "center",
  },
  modalView: {
    backgroundColor: "white",
    borderRadius: 10,
    // padding: 35,
    width: '90%',
    height: 50,
    alignItems: "center",
    justifyContent: 'center',
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
    backgroundColor: '#333333'
  },
  modalText: {
    fontFamily: 'GmarketSansTTFBold',
    fontSize: 16,
    lineHeight: 16,
    color: 'white',
    fontWeight: Platform.OS=='ios'?'700':null
  }
})

이렇게 짜 보았다.

위치를 아래쪽으로 고정 하고 싣어서 보낸 텍스트를 띄워주는 형태의 모달을 만들었다. 만약 색을 바꾸고 싶다면 이도 props값을 사용 할 수 있을 것 같다.

그런데 swal처럼 잠깐 나타났다가 사라지게 하는 로직을 고민해봤다. 원래는 해당 컴포넌트에서 useEffect로 설정한 시간 이후에 사라지는 로직을 사용해 보려 했지만 생각처럼 되지 않았다... 이유는 잘 모르겠다. 그래서 생각해 낸게 해당 모달을 불러오는 부분에서 setTimeout을 걸어서 사라지게 하자! 해서 사용 view에서

 //복사하기

import SweetAlert from '../../../commons/SweetAlert';

 const [swal, setSwal] = useState(false)

  const copy = async (props) => {
    await restApi.post(`/sequence/copy/${props.id}`)
      .then((res) => {
        setSwal(true)
        setTimeout(() => {
          setSwal(false)
        }, 2000)
      })
      .catch((err) => { })
  }


 <SweetAlert setSwal={setSwal} swal={swal} text={'시퀀스가 성공적으로 복사되었습니다.'} />

이런식으로 해당 로직 성공시 true로 만든 후에 setTimeout을 걸어서 원하는 시간 이후에 꺼지도록 설정해서 사용했다.

단 모달이다 보니 해당 창이 떠있는 동안 다른 동작을 수행하지 못하는 불편함이 있었다. 나중에 해결할 수 있는 방법이 생기면 또 적용해 봐야겠다!!!