[React-native]Inputタグのよく使うプロパティとvaliationメモ

よく使うInputタグのプラパティについてまとめた。(レイアウトは適当)

  const [enteredValue, setEnteredValue] = useState('');
  const [selectedNumber, setSelectedNumber] = useState();

  const numberInputHandler = inputText => {
    setEnteredValue(inputText.replace(/[^0-9]/g, ''));  //0〜9以外を''に置換
  };

  const confirmInputHandler = () => {
    const chosenNumber = parseInt(enteredValue);
    if (Number.isNaN(chosenNumber) || chosenNumber <= 0 || chosenNumber > 99) {
      Alert.alert(
        'Invalid number!', 
        'Number has to be a number between 1 and 99.', 
        [{text: 'Okay', style: 'destructive', onPress: resetInputHandler }])
      return;
    }
    setSelectedNumber(parseInt(chosenNumber));
    setEnteredValue('');
    Keyboard.dismiss();   //キーボード非表示にする。
  };

  return (
    <View>
      <Input 
        style={styles.input} 
        blurOnSubmit                          //trueならsubmit時にぼやける
        autoCapitalize='none' 　　　           //自動大文字修正をキャンセル
        autoCorrect={false}                   //自動単語修正をキャンセル
        keyboardType="number-pad" 
        maxLength={2} 
        onChangeText={numberInputHandler}
        value={enteredValue}
      />
    </View>
    <Button title="Confirm" onPress={confirmInputHandler}  />
  );

以下プロパティの値

autoCapitalize

characters: all characters.(全文字）
words: first letter of each word.（各語のイニシャルのみ）
sentences: first letter of each sentence (default).（文のイニシャルのみ)
none: don't auto capitalize anything.

keyboardType

default
number-pad
decimal-pad
numeric
email-address
phone-pad