react-native-keyboard-controller icon indicating copy to clipboard operation
react-native-keyboard-controller copied to clipboard

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

Open domenicoprestia opened this issue 1 year ago • 40 comments

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.

domenicoprestia avatar Jan 19 '24 16:01 domenicoprestia