Secure and Multiline Input

Secure and Multiline Text Input

secureTextEntry masks the characters, keeps them out of keyboard learning and, with autoComplete, offers the password manager; a "show password" toggle flips the prop. multiline makes a text area whose return key inserts a newline. The two cannot be combined. Here hidden and note are useState values:

src/demos/SecureMultiline.tsx: a password toggle and a note area (excerpt)TSX

      <TextInput style={ui.input} secureTextEntry={hidden} defaultValue="harbor-2026"
        autoComplete="current-password" textContentType="password" />
      <Text style={ui.label} onPress={() => setHidden(!hidden)}>
        {hidden ? 'Show password' : 'Hide password'}
      </Text>
      <Text style={ui.label}>Reading note ({note.length}/280)</Text>
      <TextInput style={[ui.input, { minHeight: 120, textAlignVertical: 'top' }]}
        multiline maxLength={280} value={note} onChangeText={setNote}
        placeholder="What stayed with you?" />

Android centers multiline text vertically while iOS aligns it to the top, so set textAlignVertical: 'top' for the same result on both. Use minHeight if the field may grow with its content, or a fixed height to scroll inside it. maxLength is enforced natively, so the counter never passes 280. A known Android issue: secureTextEntry does not combine with the email-address or phone-pad keyboards.

MENU

Secure and Multiline Input