TextInput component's right prop should accept any React.ReactNode content

[daileytj]

Is your feature request related to a problem? Please describe. I want to be able to show an ActivityIndicator as the right prop for the TextInput to show loading states.

Describe the solution you'd like The TextInput component's right prop should accept any React.ReactNode content and render it on the right side of the input.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context This is what I would expect the final result to look like

react-native: 0.65.1 react-native-paper: 4.9.2 react-native-vector-icons: 8.1.0

repro: snack example

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-paper
• react-native-vector-icons

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[github-actions[bot]]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.io link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[github-actions[bot]]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-paper (found: 4.0.0, latest: 4.9.2)
• react-native-vector-icons (found: 8.0.0, latest: 8.1.0)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[daileytj]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-paper (found: 4.0.0, latest: 4.9.2)
• react-native-vector-icons (found: 8.0.0, latest: 8.1.0)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

yes

[daileytj]

repro provided here: snack example

[github-actions[bot]]

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

[shujathkhan]

@brunohkbx @daileytj If this issue is still available for grabs, I would like to contribute to it.

[brunohkbx]

@shujathkhan yes it is. You can find the docs here: https://callstack.github.io/react-native-paper/text-input-icon.html

[lukewalczak]

Hey @daileytj, the solution is not perfect, but actually you can pass your ActivityIndicator in that way:

     <TextInput
        label="Passcode *"
        value="Test"
        keyboardType={'numeric'}
        right={
          <TextInput.Affix
            text={
              <ActivityIndicator animating={true} color={'#deadbeef'} />
            }/>
        }
      />

[Senninseyi]

Hey @daileytj, the solution is not perfect, but actually you can pass your ActivityIndicator in that way:

     <TextInput
        label="Passcode *"
        value="Test"
        keyboardType={'numeric'}
        right={
          <TextInput.Affix
            text={
              <ActivityIndicator animating={true} color={'#deadbeef'} />
            }/>
        }
      />

Tried this and it worked for me @lukewalczak

then also tried this, this works without typescript errors

 <TextInput
          disabled={false}
          value="hello"
          right={
            <TextInput.Icon
              icon={() => <VerifyIcon width={20} height={20} />}
            />
          }
        />