[WIP] feat: add support for affix and icon in textinput

[Trancever]

This is still Work in Progress.

[callstack-bot]

Hey @Trancever, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

[github-actions]

The mobile version of example app from this branch is ready! You can see it here

.

[netlify]

The web version of example app from this branch is ready!

Built with commit 61169cb

https://deploy-preview-1651--happy-heyrovsky-1ce28c.netlify.com

[w90]

Dawid, if that's what I think it is... Kudos!

[zbot473]

What more needs to get added?

[arunraj-qburst]

@satya164 This feature is required to add a view password icon in textinput

[clsk]

Hi, how long before this gets merged? or is there something else that needs to be done that we could work on?

[jbinda]

I think after @matkoson refactor it looks pretty solid and close to be merged.

I have tested example app with:

• iOS Simulator
• Android Emulator
• Android device
• iOS device
• web

It has little issue with KeyboardAvoidingView on Android (will be fixed with this PR)

Didn't spot any serious functionality issue during test. Some small adjustments that we discussed can be iterate separate later.

I have also check if docs builds and spot some issue (see here). However after solve that I think we can merge it @Trancever

edited:

• I have solution for fixing the docs and it will be cover separately
• I have noticed one weird thing and need to check if adornment Icon is pressable on Android

[jbinda]

I have also left some comments to go through

[ild-nucleusstudio]

Are there any updates for this PR? Can we do need anything to make it available to merge into the next release? I can help it.

[jbinda]

@ild-nucleusstudio thanks. I did an update and I'm pretty sure it is in shape to be merged. @Trancever would you mind to take final look ?

Please check below GIFs as well because I have fix the Icons on Android (issue mentioned here)

iOS

Android

Web

[w90]

Hooray! Good job guys

[Trancever]

@jbinda @matkoson We used hooks to implement the feature. It means it is a breaking change cause people on the old react-native version won't be able to use it. We need to merge this to branch 4.0 and release the alpha version so people can start using and testing it.

[jbinda]

@Trancever I have fixed commits history after rebase to 4.0

[jbinda]

Hooray 🚀 🎉

[mpseay]

Wow, was just looking for this, thanks ya'll!

[zbot473]

nice!

[kapi-no]

@jbinda @matkoson We used hooks to implement the feature. It means it is a breaking change cause people on the old react-native version won't be able to use it. We need to merge this to branch 4.0 and release the alpha version so people can start using and testing it.

@Trancever, do you have ETA for alpha release including this feature?

[samaneh-kamalian]

Hi. thanks for your update.
I use react-native 0.60.4 and I can not use your last update.
after run my app it shows red screen and print this error "the module compoents/Checkbox could not be found from myappDirectory/reac-native-paper/lib/module/index.js".
Is there a solution other than upgrading my react-native?
I do not have enough time to upgrade it!

[aprilmintacpineda]

I'd love to be able to use this now, what version has this been released to?

[zbot473]

@aprilmintacpineda It's released to v4.0

[aprilmintacpineda]

Yeah, I think v4 is not yet out?

[zbot473]

There's an alpha out on npm

[samaneh-kamalian]

Hi. thanks for your update.
I use react-native 0.60.4 and I can not use your last update.
after run my app it shows red screen and print this error "the module compoents/Checkbox could not be found from myappDirectory/reac-native-paper/lib/module/index.js".
Is there a solution other than upgrading my react-native?
I do not have enough time to upgrade it!

any solution ?

[matkoson]

@samaneh-kamalian Please open an issue. Here, it's a conversation about a PR, an already merged one.

[zbot473]

As much as I hate locked threads, I think locking this one would be good

[soysamy]

There's an alpha out on npm

Where can I see the props for this to work? I have the alpha installed

[Vasault]

so the only way to test this out is on the alpha version of react native paper?

[Return-1]

Is there an ETA on this? For now will start using the alpha but just curious. This seems very useful

[AnayoOleru]

Nice, just looking for this, thanks! But I can't seem to find the documentation for this particular feature on react-native paper docs, can anyone point me to the link?

[theUNnicked]

@AnayoOleru something about this feature is mentioned here: https://github.com/callstack/react-native-paper/wiki/Migration-guide-for-4.0
or look at https://github.com/callstack/react-native-paper/blob/master/example/src/Examples/TextInputExample.tsx

[AnayoOleru]

@AnayoOleru something about this feature is mentioned here: https://github.com/callstack/react-native-paper/wiki/Migration-guide-for-4.0
or look at https://github.com/callstack/react-native-paper/blob/master/example/src/Examples/TextInputExample.tsx

Thank you @theUNnicked I've been able to sort it out using the Examples. But I'll suggest the web doc be updated with these examples. I was looking at opening a PR to update the docs, but I can't find the codebase for the web docs. I'll appreciate if you can point me to it.