KeyboardAwareScrollView not working on first load of the app after fresh install in production iOS builds

[domenicoprestia]

Describe the bug

First of all i want to thank you for the great work you've put in in this repo, it's a gamechanger.

I've a form that needs to be inside a KeyboardAwareScrollView, everytime i open the keyboard i've a button that remains sticky to the header of the keyboard (it works well on the first load after a fresh install).

The strange behaviour is that when i update or i install the application on my device (iPhone 12 Pro) the KeyboardAwareScrollView doesnt scroll how it should preventing the keyboard from covering the focused input.

If i reload the app it works fine.

Code snippet

<View>

  <KeyboardAwareScrollView
    bottomOffset={88}
    ref={scrollRef}
    onScroll={scrollHandler}
    onContentSizeChange={callbackContentSizeChange}
    showsVerticalScrollIndicator={false}
    keyboardShouldPersistTaps={'handled'}
    keyboardDismissMode={'on-drag'}
  >
    <RecipeFormTitle
      step={step}
      setStep={setStep}
      paddingBottom={headerPaddingBottom}
      paddingTop={headerHeight}
      scrollValue={scrollValue}
    />
    {renderFormStep}
  </KeyboardAwareScrollView>
</View>

<RecipeFormFooter
  onContinue={callbackContinue}
  onBack={callbackBack}
  step={step}
  disabled={disabled} />


<KeyboardFloatingCTA
  onPress={callbackPressFloatingCTA}
  text={textFloatingCTA}
  disabled={disabledFloatingCTA}
  icon={iconFLoatingCTA}
/>

<ModalTagsConfirmation bottomSheetModalRef={modalTagsConfirmationRef} onContinue={callbackContinueForce} />
<ModalStepsConfirmation bottomSheetModalRef={modalSingleStepConfirmationRef} onContinue={callbackContinueForce} />
<ModalChallengeConfirmation bottomSheetModalRef={modalIngredientsChallengeConfirmationRef}onConfirm={callbackContinueForce}  />
<ModalPhotoChallengeConfirmation bottomSheetModalRef={modalPhotoChallengeConfirmationRef} onConfirm={callbackContinueForce} />
<ModalFailedImageUpload bottomSheetModalRef={modalFailedImageUploadRef} />

</View>;

Repo for reproducing

The code is private, i cant share it with you sadly.

Expected behavior

The KeyboardAwareScrollView should work as expected on the first load of the app.

Screenshots

https://github.com/kirillzyusko/react-native-keyboard-controller/assets/46924943/b42c3adb-f0b6-4ef1-b1be-ed9b3d78e3fb

Smartphone (please complete the following information):

• Desktop OS: [MacOS 14.2.1]
• Device: [iPhone 12 Pro]
• OS: [16.2]
• RN version: [0.72.6]
• RN architecture: [paper]
• JS engine: [Hermes]
• Library version: [1.10.2]

Additional context Add any other context about the problem here.

[kirillzyusko]

Okay @domenicoprestia thank you for the issue. I'll look into it 👀

[hyochan]

Hi @kirillzyusko, I've encountered a critical issue with the app. Upon initial installation, the keyboard fails to display. However, it starts working as expected if I force quit the app and then restart it. This could significantly impact the experience of new users. Could you please look into this?

[kirillzyusko]

@hyochan is this problem reproducible in example app? It fails to display on iOS or Android? Without this library everything works fine?

Can you provide a minimal reproduction example so that I can look into it?

[hyochan]

@kirillzyusko This seems to be a time-intensive task. I'll do my best, but please understand that I can't make any promises.

[domenicoprestia]

Hi @kirillzyusko in my case, it fails only on ios, and the keyboard is actually showing but the KeyboardAwareScrollView is not scrolling when keyboard is opened.

After killing and reopening the app everything is on place and works just fine

[kirillzyusko]

@domenicoprestia were you able to reproduce this problem in example app? 🤔

[domenicoprestia]

i have to distribute it on the store to reproduce this :I

[kirillzyusko]

@domenicoprestia so you're saying that locally it works fine (even if you assemble a release build and open it from mobile), but if you download the same app from AppStore then KeyboardAwareScrollView is not working?..

[domenicoprestia]

I've not tried to resemble a build locally, i've only tried it on the simulator with metro, but when i try it from the versions on AppDistribution or on TestFlight the KeyboardAwareScrollView, on iOS, on first launch does not work, i will try to reproduce it on a local build an i will let you know

[domenicoprestia]

I will try to build locally and put it on the simulator asap and i will let you know

[kawasakime]

Same problem. Everything worked correctly for me, both when building on an iPhone (debug) and in the emulator. But when my colleague starts the project, the KeyboardAwareScrollView component does not work. But if you close the application completely and open it again, it starts working. It has this behavior both in the emulator and when building in TestFlight.

[kirillzyusko]

@kawasakime can you please describe step by step what I need to do to make it reproducible? Is it reproducible in simulator? If yes, then what I need to make to make it reproducible?

Do I need to assemble app and push it into TestFlight and only then I can reproduce the problem? Do I need to pay 99$ for that (to be able to upload app in the store/TestFlight)?

[kawasakime]

@kawasakime can you please describe step by step what I need to do to make it reproducible? Is it reproducible in simulator? If yes, then what I need to make to make it reproducible?

Do I need to assemble app and push it into TestFlight and only then I can reproduce the problem? Do I need to pay 99$ for that (to be able to upload app in the store/TestFlight)?

This is the problem, that we do not understand what this is connected with. Everything worked fine for me, but a colleague has the same problem as described in this issue. At first we couldn’t even understand why the component wasn’t working. We tried to change props and perform other manipulations but nothing helped. Then he tried to close the application from the running list (without turning off the metro console) and opened it again in the emulator - and lo and behold, the component worked. Then we tried to start the project from scratch again (closed metro and started it again), and again the component did not work until we completely closed the application again and opened it again

[kirillzyusko]

@kawasakime okay, that means that at least you have a decent reproduction example (the laptop of your colleague). What happens if you add console.log here (line 270)? https://github.com/kirillzyusko/react-native-keyboard-controller/blob/1d2cfbd4a80e58235f3e5161bb72f5b79fef7765/src/components/KeyboardAwareScrollView/index.tsx#L268-L271 Is it executed?

If it works (i. e. handler gets called) can you log additional params, such as e, layout.value and scrollViewTarget.value, height - keyboardHeight.value and (layout.value?.layout.absoluteY || 0) + layout.value?.layout.height || 0.

Just to understand why exactly scrollTo is not getting called.

[vladanzlatar]

in my case this only happens when I first open in app browser to login with google and KeyboardAwareScrollView is non responsive, specifically onMove is not even called, but onStart and onEnd are called and log this:

"onStart", {
  "e": { // event
    "duration": 250,
    "eventName": "75onKeyboardMoveStart",
    "height": 336,
    "progress": 1,
    "target": 2619
  },
  "heightCalc": 852, // height - keyboardHeight.value
  "heightCalc2": 0, // (layout.value?.layout.absoluteY || 0) + layout.value?.layout.height || 0
  "layoutValue": null, // layout.value
  "scrollViewTargetValue": 2769 // scrollViewTarget.value
}

"onEnd", {
  "e": {
    "duration": 250,
    "eventName": "75onKeyboardMoveEnd",
    "height": 336,
    "progress": 1,
    "target": 2619
  },
  "heightCalc": 516,
  "heightCalc2": 635,
  "layoutValue": {
    "eventName": "75onFocusedInputLayoutChanged",
    "layout": {
      "absoluteX": 36,
      "absoluteY": 585,
      "height": 50,
      "width": 321,
      "x": 12,
      "y": 0
    },
    "parentScrollViewTarget": 2769,
    "target": 2619
  },
  "scrollViewTargetValue": 2769
}

if I open app and first try to open keyboard(instead of first opening in app browser) then KeyboardAwareScrollView works fine, so the conclusion for my case is that there is some problem with in app browser and react-native-keyboard-controller. I am using @aws-amplify/rtn-web-browser for in app browser google oauth

[kirillzyusko]

@vladanzlatar interesting. Probably the algorithm for detecting keyboard doesn't work when there is a new window gets attached/detached 🤔

@vladanzlatar is it possible to create a small reproduction example? Maybe it works not only with google authentication (I believe for that you'll have to add tokens into reproduction example and most likely you will not want to do that) but with other pages too (like google.com)? I've never worked with aws-amplify stack in RN, and may do something incorrect 🙈 So if you can help me to prepare a small reproduction example - that would be simply amazing and will significantly speed up the fix process!

[vladanzlatar]

@kirillzyusko sure I'll try to provide some in app browser example probably with https://www.npmjs.com/package/react-native-inappbrowser-reborn and see if this is actually a cause.

Do you have in mind some recommendation for quick fix since my team needs it as soon as possible and I am not quite sure what can I do to maybe "restart" KeyboardAwareScrollView or lib state so that after google oauth keyboard works fine

[kirillzyusko]

@vladanzlatar the quick fix would probably be to set a focus to TextInput and hide it. But it might cause layout jumps 😔

Maybe try to set focus to input and then hide it when SplashScreen is visible?..

[kirillzyusko]

@vladanzlatar thank you for pointing out to the issue - I've reproduced the problem in example app as well.

Here is a diff in hierarchy.

Without browser (1x UITextEffectsWindow):

With browser (2x UITextEffectsWindow):

Because of that my KeyboardView.find() can not detect a keyboard. I'll fix it (hopefully within this week and publish a new version) 🤞

[vladanzlatar]

that's great news 🙌 🤞, I am not sure if this is also the reason issue happens to the OP(@domenicoprestia) since I can't reproduce it without browser

[kirillzyusko]

@vladanzlatar may I kindly ask you to apply a patch from this PR https://github.com/kirillzyusko/react-native-keyboard-controller/pull/471 to your local project and tell me if it fixes the problem in your project?

[vladanzlatar]

@kirillzyusko I updated to:

    "react-native-keyboard-controller": "github:kirillzyusko/react-native-keyboard-controller#fix/keyboard-view-is-not-detectable",

but nothing, I've done rm -rf node_modules ios and then reinstalled and built so I am not quite sure if there are any cache issues since issue still exists

[kirillzyusko]

@vladanzlatar can you check the implementation of KeyboardView.find method (https://github.com/kirillzyusko/react-native-keyboard-controller/blob/main/ios/traversal/KeyboardView.swift#L14)? Does it look like from the PR or like in main branch?

P. S. did you reinstall pods? 👀

[vladanzlatar]

@kirillzyusko it's like from the PR and yes I've reinstall the pods 🤷‍♂️

[kirillzyusko]

@vladanzlatar okay, it's strange. I could reproduce the problem successfully but with this fix in place everything works fine 🤔 I guess I only can wait a reproduction from you and then I can work on fixing this problem 😓

BTW here is my discord - if you want we can chat there 👀

[vladanzlatar]

@kirillzyusko sure we can chat via discord, just not sure how to add you since that link just opens my DM(all I know is that I can add you through username)

[kirillzyusko]

@vladanzlatar my nickname is kiryl.ziusko (#8496)

If you can not find me, then you can share your profile 👀

[kirillzyusko]

@domenicoprestia @hyochan @kawasakime @vladanzlatar I published 1.12.3 - can you check if it fixes the problem for you? 👀

[vladanzlatar]

@kirillzyusko for me it is fixed with #473 🙌

[subhyde]

@vladanzlatar was there anything else you did to resolve this? I am having the exact same issue as @domenicoprestia