akveo / react-native-ui-kitten

:boom: React Native UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
https://akveo.github.io/react-native-ui-kitten/
MIT License
10.19k stars 952 forks source link

No Keyboard Suggested for Input #1820

Open topherjamesknoll opened 2 weeks ago

topherjamesknoll commented 2 weeks ago

🐛 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!!!

greenfrvr commented 2 weeks ago

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?

topherjamesknoll commented 1 week ago

@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!!!