No Keyboard Suggested for Input
🐛 Bug Report
Passing in keyboard, autoCompleteType, or textContentType to an Input component seems impossible. Is this supported?
To Reproduce
This is the code I'm using:
<Input
label={"Email"}
value={email}
onChangeText={setEmail}
keyboard={"email-address"}
autoCompleteType={"email"}
textContentType={"emailAddress"}
/>
Expected behavior
I'm trying to get the keyboard to suggest email addresses. The result should be similar to what this does.
<TextInput
value={email}
onChangeText={setEmail}
keyboard={"email-address"}
autoCompleteType={"email"}
textContentType={"emailAddress"}
/>
UI Kitten and Eva version
Just updated both to latest and still having trouble.
Environment information
System:
OS: macOS 14.5
CPU: (12) arm64 Apple M2 Max
Binaries:
Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
Yarn: 1.22.22 - ~/.nvm/versions/node/v20.12.2/bin/yarn
npm: 10.8.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
Watchman: 2024.04.29.00 - /opt/homebrew/bin/watchman
SDKs:
iOS SDK:
Platforms: DriverKit 23.5, iOS 17.5, macOS 14.5, tvOS 17.5, visionOS 1.2, watchOS 10.5
IDEs:
Android Studio: 2023.3 AI-233.14808.21.2331.11709847
Xcode: 15.4/15F31d - /usr/bin/xcodebuild
THANKS!!!
Hi! There might be a chance of a typo in props. Input component should support TextInput props, but I can't find keyboard or autoCompleteType props in TextInput documentation. Could you please check that?
@greenfrvr Um; okay; this is strange. You were right in that the prop names needed to be changed. (I had those ones working as a TextInput so I was rolling with it.) But I updated them to this:
<Input
label={"Email"}
value={email}
onChangeText={(nextValue) => setEmail(nextValue?.toLowerCase())}
autoCapitalize={"none"}
keyboardType={"email-address"}
autoComplete={"email"}
textContentType={"emailAddress"}
/>
The problem is solved ONLY if I reorder my inputs to make email before username. If I put it after my username input the keyboard suggestions don't appear when typing. What a strange fix. Here's the input I originally had before it:
<Input
label={"Username"}
value={username}
onChangeText={(nextValue) => setUsername(nextValue?.toLowerCase()?.replaceAll(" ", ""))}
autoCapitalize={"none"}
/>
Anyway, nice to know it works with some [strange] limitations! Thanks!!!