👉🏻 ReactNative와 Expo에서 모두 사용가능합니다. It's available for both ReactNative and Expo.

👉🏻 버튼 기능 외에 다른 UI업데이트하고 있습니다. We're updating other UI elements in addition to button functionalities.

👉🏻 Spotify/Apple music/Amazon music/Youtube에서 freelifemakers를 검색하시면 음악을 들을 수 있습니다. You can listen to music by searching for "freelifemakers" on Spotify, Apple Music, Amazon Music, or YouTube.

👉🏻 "네 이웃을 네 자신과 같이 사랑하라." 그리고 오늘 추천해 드릴 곡은 저스틴 비버의 "Love Yourself"입니다. Love your neighbor as yourself." And for today's recommendation, we have Justin Bieber's "Love Yourself"

👉🏻 결혼식 축가는 Steel Heart의 She's gone이 좋습니다. A good wedding song is "She's Gone" by Steel Heart.

👉🏻 저는 맞춤법을 매우 중요하게 생각합니다. I'm very particular about spelling.

👉🏻 huridom ~ dom ~ dom ~ dom~~~

👉🏻 업데이트 / Update FlmDrawerMenu가 업데이트 되었습니다. FlmDrawerMenu has been updated. Vagabond가 2025년 8월 22일 릴리즈됩니다. Vagabond will be released on August 22, 2025.

👉🏻 의존성 모듈 / peerDependencies react-native-freelifemakers-ui를 사용하기 위해서 반드시 설치해야하는 의존성 모듈입니다. This is a dependency(peerDependencies) module that must be installed to use react-native-freelifemakers-ui.

"peerDependencies": { "react": "", "react-native": "", "react-native-gesture-handler": ">=2.12.0", "react-native-reanimated": ">=3.17.0", "react-native-vector-icons": ">=10.2.0" },

👉🏻 스크린샷,설명 ScreenShott and Explanation. Google Drive : https://drive.google.com/drive/folders/1hhhIYmU8kSGOUTN9wd7H9igSppl6AE71?usp=share_link Website : https://www.freelifemakers.org/wordpress/index.php/category/rnuimodule/

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

#npm install react-native-freelifemakers-ui

2.아이콘 외부 모듈 설치 / Icon External module installation https://www.npmjs.com/package/react-native-vector-icons

#npm install react-native-vector-icons

3.사용하기 / Usage

1)FlmButton 버튼사용 / Use FlmButton -- 모듈 임포트 / module import import { FlmButton } from "react-native-freelifemakers-ui";

-- 코드 / code {/* default */}

{/* 스타일 추가버튼 / Add style button */}
<FlmButton
    title="Green Button"
    onPress={goToApp}
    style={{ backgroundColor: '#28a745', marginTop: 20 }}
    textStyle={{ fontSize: 18 }}
/>

{/* 비활성화된 버튼 / Disable Button*/}
<FlmButton
    title="Disable Button"
    onPress={handlePress}
    disabled={true}
    style={{ marginTop: 20 }}
/>

2)FlmText 사용 / Use FlmText -- 모듈 임포트 / module import import { FlmText } from 'react-native-freelifemakers-ui'; // 사용법 / Usage

-- 코드 / code 1.기본 텍스트 / Basic Text FlmText1 - Basic FlmText1

    <FlmText category="subtitle">
      2.카테고리적용 / Apply Category : category =
      [Heading(H1~H6),Paragraph(p1,p2)]
    </FlmText>
    <FlmText>FlmText2 : categoy=h1 </FlmText>
    <FlmText category="h1" style={styles.sectionMargin}>
      FlmText2
    </FlmText>

    <FlmText>FlmText 3 - categoy=p1 </FlmText>
    <FlmText category="p1" style={styles.sectionMargin}>
      FlmText3
    </FlmText>

    <FlmText>FlmText 4 category=subtitle</FlmText>
    <FlmText category="subtitle" style={styles.sectionMargin}>
      FlmText4
    </FlmText>

    <FlmText>FlmText 5 category=label</FlmText>
    <FlmText category="label" style={styles.sectionMargin}>
      FlmText4
    </FlmText>

    <FlmText>FlmText 5 category=caption</FlmText>
    <FlmText category="caption" style={styles.sectionMargin}>
      FlmText4
    </FlmText>

    <FlmText category="subtitle">
      3.기타스타일적용 / Apply other styles : Style=[StyleSheet]
    </FlmText>
    <FlmText
      category="p1"
      style={{backgroundColor: '#e0ffe0', padding: 10, borderRadius: 5}}>
      P1에 배경색과 패딩을 추가했습니다. / Adding background and padding
    </FlmText>

    const styles = StyleSheet.create({
        sectionMargin: {
            marginBottom: 20, // Section Margin
        },
    });

3)FlmTextInput 사용 / Use FlmTextInput -- 모듈 임포트 / module import import { FlmText,FlmTextInput } from 'react-native-freelifemakers-ui'; // 사용법 / Usage

-- 코드 / code import {FlmTextInput, FlmText} from 'react-native-freelifemakers-ui'; import Ionicons from 'react-native-vector-icons/Ionicons';

      {/* 기본 ,Affix없이 사용 / Default , Using Without Affix */}
      <FlmText>0.FlmTextInput+Custom</FlmText>
      <FlmTextInput placeholder="Affix 없이 사용 / Use without Affix" />

      {/* 기본, 외곽 테두리선 입력상자 / Default, Outlined TextInput */}
      <FlmText>1.Label+FlmTextInput</FlmText>
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          paddingHorizontal: 16, // left,right padding
        }}>
        <FlmText>라벨:</FlmText>
        <FlmTextInput></FlmTextInput>
      </View>

      {/* 스타일추가, 외곽 테두리선 입력 상자 / Add Style, Outlined TextInput */}
      <FlmText>2.FlmInput+Style</FlmText>
      <FlmTextInput
        placeholder="문자를 입력하세요 / Enter your text"
        value={textValue}
        onChangeText={setTextValue}
        keyboardType="default"
        rightAffixText="/100"
        style={[
          {borderWidth: 2, borderColor: 'orange'}, // 첫 번째 스타일 객체 / first style object
          {paddingHorizontal: 10, marginVertical: 10}, // 두 번째 스타일 객체 / second style object
        ]}
      />

      {/* 전화번호 입력 상자 / Phone Number TextInput */}
      <FlmText>3.FlmInput+Number</FlmText>
      <FlmTextInput
        placeholder="전화번호를 입력하세요 / Enter phone number"
        value={phoneValue}
        onChangeText={setPhoneValue}
        keyboardType="phone-pad"
        maxLength={13}
        rightAffixText="📞"
      />

      {/* 패스워드 입력 상자 / Password TextInput */}
      <FlmText>4.FlmInput+Password+isPasswordVisible</FlmText>
      <FlmTextInput
        placeholder="비밀번호를 입력하세요 / Enter your password"
        value={passwordValue}
        onChangeText={setPasswordValue}
        secureTextEntry={!isPasswordVisible}
        keyboardType="default"
        autoCapitalize="none"
        autoCorrect={false}
        returnKeyType="done"
        rightIconComponent={
          <TouchableOpacity
            onPress={() => setIsPasswordVisible(!isPasswordVisible)}
            style={appStyles.passwordToggle}>
            <Ionicons
              name={isPasswordVisible ? 'eye-outline' : 'eye-off-outline'}
              size={24}
              color="gray"
            />
          </TouchableOpacity>
        }
      />

      {/* 모서리 둥근 입력 상자 / Corner Round TextInput */}
      <FlmText>5.FlmInput+CornoRount</FlmText>
      <FlmTextInput
        placeholder="둥근 입력 필드 / Round Input"
        value={roundText}
        onChangeText={setRoundText}
        keyboardType="default"
        mode="round" // 'round' 모드 적용
        inputWrapperStyle={{
          backgroundColor: '#e0ffe0',
          borderColor: 'green',
        }}
        inputStyle={{color: 'darkgreen'}}
      />

      {/* 언더라인 입력 상자 / Underline TextInput */}
      <FlmText>6.FlmTextInput+Underline</FlmText>
      <FlmTextInput
        placeholder="밑줄 입력 필드 / Underline Input"
        value={underlineText}
        onChangeText={setUnderlineText}
        keyboardType="default"
        mode="underline" // 'underline' 모드 적용
        rightAffixText="kg"
        inputWrapperStyle={{borderBottomColor: 'blue', paddingBottom: 5}}
        inputStyle={{fontWeight: 'bold'}}
        style={{marginBottom: 40, paddingLeft: 10}}
      />

4)나머지는 구글드라이브 내의 스크린샷과 txt파일을 참조하세요 For the rest, please refer to the screenshots and txt files in Google Drive.