APSL / react-native-keyboard-aware-scroll-view

A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput.
MIT License
5.27k stars 646 forks source link

currentlyFocusedField is deprecated and will be removed in a future release. Use currentlyFocusedInput #440

Open VirtualDOMinic opened 4 years ago

VirtualDOMinic commented 4 years ago

In the latest RN release (0.63.0) I get the following error when moving focus from one textinput to another when inside RNKASV.

The fix might just require find & replace all instances (or at least the right side of line 495 below) of currentlyFocusedField with currentlyFocusedInput in the HOC...

https://github.com/APSL/react-native-keyboard-aware-scroll-view/blob/5ed7e7f2a0ec884d648a262df933a9d722e670c5/lib/KeyboardAwareHOC.js#L495

VirtualDOMinic commented 4 years ago

Screenshot of error for more context image

Esxiel commented 4 years ago

Replacing all the instances with currentlyFocusedInput does indeed remove the warning...

But I did receive a Possible Unhandled Promise Rejection ... post pressing textinput & return. It also doesn't scroll back to the text input.

VirtualDOMinic commented 4 years ago

Interesting! I haven't tried it myself yet as I have other deadlines. Do you only get the Unhandled Promise Rejection and other issues after the find&replace, or after the upgrade?

Esxiel commented 4 years ago

Ah, I've only tried the library and find&replace in v0.63.0, so I don't know how it works on older RN versions.

JoeLeung32 commented 4 years ago

Like this solution? https://github.com/react-navigation/react-navigation/commit/35d6b9e3a4a28a59b3b11a67acbf7753d41705ae

Esxiel commented 4 years ago

In terms of backwards compatibility, I think that's a very nice solution. However, in this library's case, simply replacing the old currentlyFocusedField with currentFocusedInput did not work out that well, so I think we'd have to tinker with it a bit more...

JoeLeung32 commented 4 years ago

Screenshot 2020-07-10 at 10 46 45 AM Does not work....

yosukapro commented 4 years ago

Any solutions?

Esxiel commented 4 years ago

It's still working on 0.63.0 right? It's just that there's the ... deprecated and will be removed in a future release warning

codler commented 4 years ago

I have forked the repo to fix this issue.


npm i @codler/react-native-keyboard-aware-scroll-view
VirtualDOMinic commented 4 years ago

Nice work @codler ! I see you've put in a PR for another issue on this repo, too.

I get why you'd make a fork, since nothing has been merged in this repo for almost a year now ( 😿 ) but - looking at the code - I almost wonder if this lib (and therefore any forks of it) makes more sense as a gist for people to just copy and paste the HOC from, as it's essentially a single file with a single additional dependency.

Also, for my own learning, I'd love to know why you needed to wrap the currentlyFocusedInput in a findNodeHandle when the currentlyFocusedField doesn't require it. I'm sure @Esxiel would be interested too

rborn commented 4 years ago

@VirtualDOMinic @codler you can make a PR with the fixes now, I'll take care of it to be merged 🙂

goldqwert commented 4 years ago

@VirtualDOMinic @codler you can make a PR with the fixes now, I'll take care of it to be merged 🙂

Are looking forward to 🙂

arlovip commented 4 years ago

The same issue in React Native 0.63.2, any solution about that?

rares-lupascu commented 4 years ago

same here

Jmzp commented 4 years ago

Same bug here

Rufrage commented 4 years ago

Same here with React Native 0.63.2

kangyunu commented 4 years ago

449

arlovip commented 4 years ago

@rkdqudtjs1 I tried it but it does not work. Another error occurs: Maximum call stack size exceeded with that modification as @JoeLeung32 said https://github.com/APSL/react-native-keyboard-aware-scroll-view/issues/440#issuecomment-656450161

kangyunu commented 4 years ago

@lchenfox Sorry, There was a mistake. #449 is closed.

ming436534 commented 4 years ago

replace the line with: const currentlyFocusedField = TextInput.State.currentlyFocusedInput ? findNodeHandle(TextInput.State.currentlyFocusedInput()) : TextInput.State.currentlyFocusedField(); As UIManager.viewIsDescendantOf expects a node id input instead of a ref

leopavez commented 4 years ago

Same problem, I use react-native 0.63.2 and react-navigation 5.7.2

cyb3rsalih commented 4 years ago

Changing the react-native-keyboard-aware-scroll-view to @codler/react-native-keyboard-aware-scroll-view worked for me in React Native v0.63.2

jefelewis commented 4 years ago

I'm receiving the same error:

currentlyFocusedField is deprecated and will be removed in a future release. Use currentlyFocusedInput

A short term fix would be to try and use @codler/react-native-keyboard-aware-scroll-view, but that's a short term fix. Will there be an update to resolve this issue with react-native-keyboard-aware-scroll-view?

kockok commented 4 years ago

I can see that @rborn merged the PR fix 5 days ago, why npm still doesn't reflect the change?

jefelewis commented 4 years ago

Pull Request @kockok is referring to

Code Changes: https://github.com/APSL/react-native-keyboard-aware-scroll-view/pull/450/files/0dc8435749b90b5e94367b6d91edc14b540c901e

Until a new build is pushed to NPM, a short term fix would be to add the code changes to your react-native-keyboard-aware-scroll-view files in node_modules

jbromberg commented 4 years ago

Any updates?

famu1hundred commented 4 years ago

Just FYI for anyone else, I patched @codler/react-native-keyboard-aware-scroll-view and still noticed the error. Then I found that it also exists in native-base (which uses @codler/react-native-keyboard-aware-scroll-view). So I had to patch both packages for the fix to work

Josimesio commented 4 years ago

Some solution for this error that is definitive???I am also with the same error...

RigoOnRails commented 4 years ago

This is a pretty important fix I think. It'd be great to push a new version with it.

punisher49 commented 4 years ago

I can't even find this line

const currentlyFocusedField =

koff75 commented 4 years ago

@punisher49 : Select the file: node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js Line 372 & replace: const currentlyFocusedField = TextInput.State.currentlyFocusedInput ? findNodeHandle(TextInput.State.currentlyFocusedInput()) : TextInput.State.currentlyFocusedField(); Save, and it's done 👍

lyair1 commented 4 years ago

Since the fix is now merged into this repo you could just modify your package.json to point on the last commit (until another version is pushed to NPM):

"react-native-keyboard-aware-scroll-view": "https://github.com/APSL/react-native-keyboard-aware-scroll-view#fb40649a9c84aa23d6a55355e9e0e432795967a6",

GrahamEvans31 commented 4 years ago

@codler/react-native-keyboard-aware-scroll-view

How did you patch these? I'm using native-base as well, I can see in their dependencies they have the codler branch, I still get the warning whenever I focus on a input

layeng commented 4 years ago

Dear all, I am also using react-native-keyboard-aware-scroll-view . I would like to be notified when there is a new build to resolve this issue. Thank you.

mausv commented 4 years ago

Dear all, I am also using react-native-keyboard-aware-scroll-view . I would like to be notified when there is a new build to resolve this issue. Thank you.

You can watch for releases.

layeng commented 4 years ago

Thanks. Done it. To be honest, I am new to GitHub. Thanks for the tip.

layeng commented 4 years ago

Hi You can use this. I use it and it works.

@punisher49 : Select the file: node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js Line 372 & replace: const currentlyFocusedField = TextInput.State.currentlyFocusedInput ? findNodeHandle(TextInput.State.currentlyFocusedInput()) : TextInput.State.currentlyFocusedField(); Save, and it's done 👍

On Sun, Oct 4, 2020 at 1:46 AM Adralia Nelson notifications@github.com wrote:

@VirtualDOMinic https://github.com/VirtualDOMinic @codler https://github.com/codler was the fix merged. still having the same issue here ..using "react-native-keyboard-aware-scroll-view": "^0.9.2",

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/APSL/react-native-keyboard-aware-scroll-view/issues/440#issuecomment-703139474, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEHVJX4BYKLMOHU6Q6IZXSTSI5PP7ANCNFSM4OVPXJ4Q .

jwoodmansey commented 3 years ago

You can also use patch-package to persist this for now. Add the following to patches/react-native-keyboard-aware-scroll-view+0.9.2.patch and follow patch-package instructions.

index 51a91d7..ab5d5c1 100644
--- a/node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js
+++ b/node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js
@@ -369,7 +369,7 @@ function KeyboardAwareHOC(
           keyboardSpace -= _KAM_DEFAULT_TAB_BAR_HEIGHT
         }
         this.setState({ keyboardSpace })
-        const currentlyFocusedField = TextInput.State.currentlyFocusedField()
+        const currentlyFocusedField = TextInput.State.currentlyFocusedInput ? findNodeHandle(TextInput.State.currentlyFocusedInput()) : TextInput.State.currentlyFocusedField();
         const responder = this.getScrollResponder()
         if (!currentlyFocusedField || !responder) {
           return

Although pointing at the fixed commit is probably easier, just a useful tip for the future!

patricktan98 commented 3 years ago

You can also use patch-package to persist this for now. Add the following to patches/react-native-keyboard-aware-scroll-view+0.9.2.patch and follow patch-package instructions.

index 51a91d7..ab5d5c1 100644
--- a/node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js
+++ b/node_modules/react-native-keyboard-aware-scroll-view/lib/KeyboardAwareHOC.js
@@ -369,7 +369,7 @@ function KeyboardAwareHOC(
           keyboardSpace -= _KAM_DEFAULT_TAB_BAR_HEIGHT
         }
         this.setState({ keyboardSpace })
-        const currentlyFocusedField = TextInput.State.currentlyFocusedField()
+        const currentlyFocusedField = TextInput.State.currentlyFocusedInput ? findNodeHandle(TextInput.State.currentlyFocusedInput()) : TextInput.State.currentlyFocusedField();
         const responder = this.getScrollResponder()
         if (!currentlyFocusedField || !responder) {
           return

Although pointing at the fixed commit is probably easier, just a useful tip for the future!

The warning still persists although the react-native-keyboard-aware-scroll-view has released version 1.0.1 to fix it. Any alternate solution to resolve this?