입력텍스트/FlmTextInput

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

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}} // 'style' prop으로 전체 컨테이너에 추가 여백 적용
      />

4.스크린샷 / ScreenShot