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

npm install react-native-freelifemakers-ui

2.외부 아이콘 모듈 설치하기

✔️외부 아이콘 모듈 설명 : https://www.npmjs.com/package/react-native-vector-icons

npm install react-native-vector-icons

3.사용법

✔️모듈 임포트

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

4.전체코드

import React, { useState } from "react";
import {
  View,
  StyleSheet,
  SafeAreaView,
  Text,
  TouchableOpacity,
  ScrollView,
} from "react-native";
import { FlmTextInput, FlmText } from "react-native-freelifemakers-ui";
import { Ionicons } from "@expo/vector-icons";

const FlmTextInputComponent = () => {
  const [textValue, setTextValue] = useState("");
  const [phoneValue, setPhoneValue] = useState("");
  const [passwordValue, setPasswordValue] = useState("");
  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
  const [roundText, setRoundText] = useState("");
  const [underlineText, setUnderlineText] = useState("");
  const [customStyleText, setCustomStyleText] = useState("");

  return (
    <SafeAreaView style={appStyles.safeArea}>
      <ScrollView>
        <View style={appStyles.container}>
          <Text style={appStyles.header}>FlmTextInput Examples</Text>
          {/* Default /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' prop을 배열로 사용하여 전체 컨테이너에 스타일 적용
            style={[
              { borderWidth: 2, borderColor: "orange" }, // 첫 번째 스타일 객체
              { paddingHorizontal: 10, marginVertical: 10 }, // 두 번째 스타일 객체
            ]}
          />

          {/* 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' prop으로 전체 컨테이너에 추가 여백 적용
            style={{ marginBottom: 40, paddingLeft: 10 }} 

          />

          {/* 완벽하게 커스텀 스타일을 적용한 TextInput */}
          <FlmText>7.FlmTextInput+Custom</FlmText>
          <FlmTextInput
            placeholder="완전히 커스텀 / Fully Custom"
            value={customStyleText}
            onChangeText={setCustomStyleText}
            inputWrapperStyle={{
              borderColor: "purple",
              borderWidth: 3,
              borderRadius: 15,
              height: 70,
              backgroundColor: "#ffeeff",
            }}
            inputStyle={{
              fontSize: 20,
              color: "purple",
              textAlign: "center",
            }}
            rightAffixText="🎉"
          />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const appStyles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: "#f0f2f5",
  },
  container: {
    flex: 1,
    padding: 20,
    alignItems: "center",
    justifyContent: "center",
  },
  header: {
    fontSize: 22,
    fontWeight: "bold",
    marginBottom: 30,
    color: "#333",
  },
  subheader: {
    fontSize: 18,
    fontWeight: "600",
    marginTop: 20,
    marginBottom: 10,
    color: "#555",
  },
  passwordToggle: {
    padding: 5,
  },
});

export default FlmTextInputComponent;

4.스크린 샷