모달/FlmModal

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

A modal is a UI container that overlays the screen and blocks user interaction, directing focus to a single task or piece of information.
It is commonly used for user login, password input, image zooming, and similar interactions.

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

npm install react-native-freelifemakers-ui

2.사용하기 / Usage
– 버튼 클릭시 모달을 오픈합니다.
Opens a modal when the button is clicked. —

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"
          />

— 예제 코드 / Example code

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);
  const [isModal3Visible, setModal3Visible] = useState(false); // 커스텀 스타일 적용 / Apply custom style
  const [isModal4Visible, setModal4Visible] = useState(false); // 다른 커스텀 스타일 / Apply another custom style

  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"
            backdropColor="rgba(0,0,255,0.3)" // 파란색 반투명 배경 / Blue translucent background
          />

          {/* --- 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
            backdropColor="rgba(255,165,0,0.4)" // 주황색 반투명 배경 / Orange translucent background
            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={{
              color: '#2F4F4F', // 어두운 슬레이트 그레이 메시지 / Dark slate grey message
              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.스크린샷/Screen Shot