👉모달은 화면 위에 오버레이되어 사용자 상호작용을 차단하고, 하나의 작업 또는 정보에 집중하도록 만드는 UI컨테이너로서 사용자로그인,비밀번호입력,이미지확대보기등에 많이 사용됩니다.

1.react-native-freelifemakers-ui NPM 모듈 설치하기

npm install react-native-freelifemakers-ui

2.사용법

✔️버튼 클릭시 모달을 오픈합니다.

import {FlmModal, FlmButton, FlmText} from 'react-native-freelifemakers-ui';

          <FlmButton
            title="기본 모달 열기/Open Default Modal"
            onPress={() => setModal1Visible(true)}
          />
          <FlmModal
            isVisible={isModal1Visible}
            onClose={() => setModal1Visible(false)}
            title="기본 모달/Default Modal"
            message="아무런 커스텀 스타일이 적용되지 않았습니다.
				            /No custom styles were applied."
            animationDirection="slideUp"
          />

3.전체코드

import React, { useState } from "react";
import { View, StyleSheet, SafeAreaView, ScrollView } from "react-native";
import { FlmModal, FlmButton, FlmText } from "react-native-freelifemakers-ui";

export default function FlmModalApp() {
  const [isModal1Visible, setModal1Visible] = useState(false);
  const [isModal2Visible, setModal2Visible] = useState(false);
  // 커스텀 스타일 적용 / Apply custom style
  const [isModal3Visible, setModal3Visible] = useState(false); 
  // 다른 커스텀 스타일 / Apply another custom style
  const [isModal4Visible, setModal4Visible] = useState(false); 

  return (
    <SafeAreaView style={appStyles.safeArea}>
      <ScrollView style={appStyles.scrollViewContent}>
        <View style={appStyles.section}>
          <FlmText style={appStyles.header}>FlmModal 커스터마이징 예시</FlmText>

          {/* --- 1. 기본 슬라이드 모달 / Default Slide Modal
              -- 'slideUp', 'slideDown', 'slideLeft', 'slideRight', 
              'fade', 'none' --- */}
          <FlmText>
            1. 기본 슬라이드 모달 / Default --
            slideUp,slideDown,slideLeft,slideRight, fade, none
          </FlmText>
          <FlmButton
            title="기본 모달 열기/Open Default Modal"
            onPress={() => setModal1Visible(true)}
          />
          <FlmModal
            isVisible={isModal1Visible}
            onClose={() => setModal1Visible(false)}
            title="기본 모달/Default Modal"
            message="아무런 커스텀 스타일이 적용되지 않았습니다.
				            /No custom styles were applied."
            animationDirection="slideUp"
          />
          <FlmText>2. 커스텀 모달/Custom Modal</FlmText>
          {/* --- 2. 배경색, 투명도 변경 모달 /
            Modal to change background color and transparency --- */}
          <View style={{ marginTop: 20 }}>
            <FlmButton
              title="배경 커스텀 모달 열기/Background Custom Modal"
              onPress={() => setModal2Visible(true)}
            />
          </View>
          <FlmModal
            isVisible={isModal2Visible}
            onClose={() => setModal2Visible(false)}
            title="배경 커스텀/Background Custom"
            message="배경이 파란색 반투명으로 변경되었습니다.
				    /The background has been changed to a blue, translucent color."
            animationDirection="fade"
            
            // 파란색 반투명 배경 / Blue translucent background
            backdropColor="rgba(0,0,255,0.3)" 
          />

          {/* --- 3. 모달 컨텐츠 스타일 변경 모달 /
            Modal content style change modal --- */}
          <View style={{ marginTop: 20 }}>
            <FlmButton
              title="컨텐츠 스타일 커스텀 모달 열기
              /Open custom modal with content style"
              onPress={() => setModal3Visible(true)}
            />
          </View>
          <FlmModal
            isVisible={isModal3Visible}
            onClose={() => setModal3Visible(false)}
            title="컨텐츠 커스텀/Content customization"
            message="모달 컨텐츠 박스의 모양이 변경되었습니다.
            /The appearance of the modal content box has changed."
            animationDirection="slideRight"
            modalContentStyle={{
              backgroundColor: "#FFF0F5", // 연한 분홍색 / Light pink
              borderRadius: 5, // 덜 둥근 모서리 / Less rounded corners
              borderWidth: 2, // 테두리 추가 / Add border
              borderColor: "#FF69B4", // 핑크색 테두리 / Pink border
              padding: 10, // 패딩 조절 / padding adjustment
            }}
            titleStyle={{
              color: "#FF69B4", // 핑크색 제목 / Pink Color Title
              fontSize: 25,
              fontWeight: "normal",
            }}
            messageStyle={{
              color: "#8B008B", // 보라색 메시지 / Pupple Color Message
              fontStyle: "italic",
            }}
          >
            <FlmText>
              여기에 추가적인 커스텀 내용이 들어갈 수 있습니다!/Additional
              custom content can be added here!
            </FlmText>
          </FlmModal>

          {/* --- 4. 다양한 스타일 섞기 / Mix different styles --- */}
          <View style={{ marginTop: 20 }}>
            <FlmButton
              title="다양한 스타일 섞기/Mix different styles"
              onPress={() => setModal4Visible(true)}
            />
          </View>
          <FlmModal
            isVisible={isModal4Visible}
            onClose={() => setModal4Visible(false)}
            title="MIXED STYLE!"
            message="배경, 컨텐츠, 텍스트 스타일이 모두 커스텀되었습니다.
            /Background, content, and text styles are all customized."
            animationDirection="slideDown"
            animationDuration={500} // 애니메이션 시간도 조절 / Adjust animation time
            // 주황색 반투명 배경 / Orange translucent background
            backdropColor="rgba(255,165,0,0.4)" 
            modalContentStyle={{
              backgroundColor: "#E0FFFF", // 연한 하늘색 / light sky blue
              borderRadius: 30, // 더 둥근 모서리 / more rounded corners
              shadowColor: "#000",
              shadowOffset: { width: 0, height: 4 },
              shadowOpacity: 0.3,
              shadowRadius: 5,
              elevation: 8,
            }}
            titleStyle={{
              color: "#4682B4", // 스틸블루 제목 / steel blue title
              textDecorationLine: "underline",
            }}
            messageStyle={{
            // 어두운 슬레이트 그레이 메시지 / Dark slate grey message
              color: "#2F4F4F", 
              lineHeight: 24,
            }}
          />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const appStyles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: "#f0f2f5",
  },
  scrollViewContent: {
    padding: 20,
  },
  header: {
    // 삭제예정
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 30,
    color: "#333",
    textAlign: "center",
  },
  section: {
    marginBottom: 30,
    padding: 15,
    backgroundColor: "#fff",
    borderRadius: 10,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 3,
    elevation: 5,
  },
  customChildrenText: {
    //삭제예정
    fontSize: 14,
    color: "#333",
    marginTop: 10,
    marginBottom: 15,
    textAlign: "center",
    fontStyle: "italic",
  },
});

3.스크린샷

https://youtube.com/shorts/ycFyJC9O68U?feature=share