[React Native Expo] 모달(Modal)창 적용하기

일단 component에 Modal.tsx를 하나 만들어주자

그리고 상태관리는 redux를 사용했다 redux tookit 사용법은 아래 링크에서 볼수 있다.

https://coding-levup.tistory.com/49

[React Native Expo] redux toolkit 상태관리 적용하기

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  loggedIn: false,
  modal: false,
};
const statusSlice = createSlice({
  name: "status",
  initialState,
  reducers: {
    setLoggedIn(state, action) {
      state.loggedIn = action.payload;
    },
    setModal(state, action) {
      state.modal = action.payload;
    },
  },
  extraReducers: (builder) => {},
});

export default statusSlice;

redux slice쪽에 modal state를 하나 추가했고

import { Pressable, View } from "react-native";
import { useDispatch } from "react-redux";
import { RootState } from "@/store/reducer";
import statusSlice from "@/slices/status";

const Modal = () => {
  const dispatch = useDispatch();
  return (
    <>
      <Pressable
        onPress={() => {
          dispatch(statusSlice.actions.setModal(false));
        }}
      ></Pressable>
    </>
  );
};

export default Modal;

모달창에서 모달창을 누르면 꺼지게 설정해줬다.

그리고 _layout.tsx에서

import { useSelector } from "react-redux";
import { RootState } from "@/store/reducer";
import Modal from "@/components/Modal";

function Layout(){
  	const onModal = useSelector((state: RootState) => state.status.modal);
    return(
        <>
          {onModal ? <Modal /> : ""}
        </>
    )
}

 이렇게 적용해주면

modal state가 true가 되면 보여지고 false가 되면 사라진다

그리고 호출하고자 하는 버튼에 가서

import statusSlice from "@/slices/status";
  
const loggedIn = useSelector((state: RootState) => state.status.loggedIn);
const dispatch = useDispatch();
const showMenu = () => {
    dispatch(statusSlice.actions.setModal(true));
};

이렇게 적용하면

 

완성