{"id":1549,"date":"2025-06-20T05:07:13","date_gmt":"2025-06-20T05:07:13","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=1549"},"modified":"2025-10-09T20:28:53","modified_gmt":"2025-10-09T11:28:53","slug":"flmtextinput","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/06\/20\/flmtextinput\/","title":{"rendered":"\uc785\ub825\ud14d\uc2a4\ud2b8\/FlmTextInput"},"content":{"rendered":"\n

1.react-native-freelifemakers-ui NPM \ubaa8\ub4c8 \uc124\uce58\ud558\uae30 \/ react-native-freelifemakers-ui NPM Module Install<\/p>\n\n\n\n

npm install react-native-freelifemakers-ui<\/code><\/pre>\n\n\n\n
    \n
  1. \uc544\uc774\ucf58 \uc678\ubd80 \ubaa8\ub4c8 \uc124\uce58 \/ Icon External module installation
    https:\/\/www.npmjs.com\/package\/react-native-vector-icons<\/a><\/li>\n<\/ol>\n\n\n\n
    npm install react-native-vector-icons<\/code><\/pre>\n\n\n\n
    3.\uc0ac\uc6a9\ud558\uae30 \/ Usage<\/p>\n\n\n\n
    import {FlmTextInput, FlmText} from 'react-native-freelifemakers-ui';\nimport Ionicons from 'react-native-vector-icons\/Ionicons';<\/code><\/pre>\n\n\n\n
          {\/* \uae30\ubcf8 ,Affix\uc5c6\uc774 \uc0ac\uc6a9 \/ Default , Using Without Affix *\/}\n      <FlmText>0.FlmTextInput+Custom<\/FlmText>\n      <FlmTextInput placeholder=\"Affix \uc5c6\uc774 \uc0ac\uc6a9 \/ Use without Affix\" \/>\n\n      {\/* \uae30\ubcf8, \uc678\uacfd \ud14c\ub450\ub9ac\uc120 \uc785\ub825\uc0c1\uc790 \/ Default, Outlined TextInput *\/}\n      <FlmText>1.Label+FlmTextInput<\/FlmText>\n      <View\n        style={{\n          flexDirection: 'row',\n          alignItems: 'center',\n          paddingHorizontal: 16, \/\/ left,right padding\n        }}>\n        <FlmText>\ub77c\ubca8:<\/FlmText>\n        <FlmTextInput><\/FlmTextInput>\n      <\/View>\n\n      {\/* \uc2a4\ud0c0\uc77c\ucd94\uac00, \uc678\uacfd \ud14c\ub450\ub9ac\uc120 \uc785\ub825 \uc0c1\uc790 \/ Add Style, Outlined TextInput *\/}\n      <FlmText>2.FlmInput+Style<\/FlmText>\n      <FlmTextInput\n        placeholder=\"\ubb38\uc790\ub97c \uc785\ub825\ud558\uc138\uc694 \/ Enter your text\"\n        value={textValue}\n        onChangeText={setTextValue}\n        keyboardType=\"default\"\n        rightAffixText=\"\/100\"\n        style={[\n          {borderWidth: 2, borderColor: 'orange'}, \/\/ \uccab \ubc88\uc9f8 \uc2a4\ud0c0\uc77c \uac1d\uccb4 \/ first style object\n          {paddingHorizontal: 10, marginVertical: 10}, \/\/ \ub450 \ubc88\uc9f8 \uc2a4\ud0c0\uc77c \uac1d\uccb4 \/ second style object\n        ]}\n      \/>\n\n      {\/* \uc804\ud654\ubc88\ud638 \uc785\ub825 \uc0c1\uc790 \/ Phone Number TextInput *\/}\n      <FlmText>3.FlmInput+Number<\/FlmText>\n      <FlmTextInput\n        placeholder=\"\uc804\ud654\ubc88\ud638\ub97c \uc785\ub825\ud558\uc138\uc694 \/ Enter phone number\"\n        value={phoneValue}\n        onChangeText={setPhoneValue}\n        keyboardType=\"phone-pad\"\n        maxLength={13}\n        rightAffixText=\"\ud83d\udcde\"\n      \/>\n\n      {\/* \ud328\uc2a4\uc6cc\ub4dc \uc785\ub825 \uc0c1\uc790 \/ Password TextInput *\/}\n      <FlmText>4.FlmInput+Password+isPasswordVisible<\/FlmText>\n      <FlmTextInput\n        placeholder=\"\ube44\ubc00\ubc88\ud638\ub97c \uc785\ub825\ud558\uc138\uc694 \/ Enter your password\"\n        value={passwordValue}\n        onChangeText={setPasswordValue}\n        secureTextEntry={!isPasswordVisible}\n        keyboardType=\"default\"\n        autoCapitalize=\"none\"\n        autoCorrect={false}\n        returnKeyType=\"done\"\n        rightIconComponent={\n          <TouchableOpacity\n            onPress={() => setIsPasswordVisible(!isPasswordVisible)}\n            style={appStyles.passwordToggle}>\n            <Ionicons\n              name={isPasswordVisible ? 'eye-outline' : 'eye-off-outline'}\n              size={24}\n              color=\"gray\"\n            \/>\n          <\/TouchableOpacity>\n        }\n      \/>\n\n      {\/* \ubaa8\uc11c\ub9ac \ub465\uadfc \uc785\ub825 \uc0c1\uc790 \/ Corner Round TextInput *\/}\n      <FlmText>5.FlmInput+CornoRount<\/FlmText>\n      <FlmTextInput\n        placeholder=\"\ub465\uadfc \uc785\ub825 \ud544\ub4dc \/ Round Input\"\n        value={roundText}\n        onChangeText={setRoundText}\n        keyboardType=\"default\"\n        mode=\"round\" \/\/ 'round' \ubaa8\ub4dc \uc801\uc6a9\n        inputWrapperStyle={{\n          backgroundColor: '#e0ffe0',\n          borderColor: 'green',\n        }}\n        inputStyle={{color: 'darkgreen'}}\n      \/>\n\n      {\/* \uc5b8\ub354\ub77c\uc778 \uc785\ub825 \uc0c1\uc790 \/ Underline TextInput *\/}\n      <FlmText>6.FlmTextInput+Underline<\/FlmText>\n      <FlmTextInput\n        placeholder=\"\ubc11\uc904 \uc785\ub825 \ud544\ub4dc \/ Underline Input\"\n        value={underlineText}\n        onChangeText={setUnderlineText}\n        keyboardType=\"default\"\n        mode=\"underline\" \/\/ 'underline' \ubaa8\ub4dc \uc801\uc6a9\n        rightAffixText=\"kg\"\n        inputWrapperStyle={{borderBottomColor: 'blue', paddingBottom: 5}}\n        inputStyle={{fontWeight: 'bold'}}\n        style={{marginBottom: 40, paddingLeft: 10}} \/\/ 'style' prop\uc73c\ub85c \uc804\uccb4 \ucee8\ud14c\uc774\ub108\uc5d0 \ucd94\uac00 \uc5ec\ubc31 \uc801\uc6a9\n      \/><\/code><\/pre>\n\n\n\n
    4.\uc2a4\ud06c\ub9b0\uc0f7 \/ ScreenShot<\/p>\n\n\n\n
    \"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
    1.react-native-freelifemakers-ui NPM \ubaa8\ub4c8 \uc124\uce58\ud558\uae30 \/ react-native-freelifemakers-ui NPM Module Install 3.\uc0ac\uc6a9\ud558\uae30 \/ Usage 4.\uc2a4\ud06c\ub9b0\uc0f7 \/ ScreenShot<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15,1],"tags":[],"class_list":["post-1549","post","type-post","status-publish","format-standard","hentry","category-rnuimodule","category-uncategorized","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1549","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=1549"}],"version-history":[{"count":4,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1549\/revisions"}],"predecessor-version":[{"id":2215,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1549\/revisions\/2215"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=1549"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=1549"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=1549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}