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} />

;

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

RPReplay_Final1705679938.MP4

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 https://github.com/kirillzyusko/react-native-keyboard-controller/blob/main/src/components/KeyboardAwareScrollView/index.tsx#L267? 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.