1.react-native-freelifemakers-ui NPM 모듈 설치하기 / react-native-freelifemakers-ui NPM Module Instal
npm install react-native-freelifemakers-ui2.사용하기 / 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