KeyboardAwareScrollView 1.21.1 doesn't work as expected

[kirillzyusko]

Discussed in #1390

^{Originally posted by grego5 March 22, 2026}

On initial input focus there's some inaccuracy in the scrolling offset, which corrects on second focus attempt, but every time you focus a different input, it's doesn't go all the way as expected. Especially noticeable for multiline inputs.
When there's not enough space at the bottom for scrolling, well, it doesn't scroll when keyboard appears. That means I always need to add at least a keyboard size spacer at the bottom, fixed, since the point of the new scrollview that we don't resize the containers. I thought the new technique is that it adds some special padding internally that let content clip and extend the scrollable limits temporarily, so I don't need to do layout manipulations.

Screen_Recording_20260322_231637_Keyboard.Controller.Demo.mp4

repo with apk included.
https://github.com/grego5/rnkbctrldemo

Unrelated to the problem, but in the demo I probably confused the sticky view offset. They just happen to match, so visually it works on my samsung, like (ACTION_BAR_MARGIN * 2 = insets.bottom = 20), but generally safe area insets should not be used there, different math is appropriate, like in the snippet at the bottom from my main project.

Also I haven't noticed extraKeyboardSpace makes any difference.

    <SafeAreaView style={styles.screen}>
      <View style={styles.header}>
        <Text style={styles.title}>Keyboard Controller Demo</Text>
        <Text style={styles.subtitle}>
          Plain React Native layout for testing KeyboardAwareScrollView and
          KeyboardStickyView.
        </Text>
      </View>

      <KeyboardAwareScrollView
        // @ts-ignore probably rngh 3 beta types bug
        ScrollViewComponent={ScrollView}
        bottomOffset={ACTION_BAR_HEIGHT + ACTION_BAR_MARGIN * 2}
        style={styles.scroll}
        contentContainerStyle={styles.scrollContent}
        keyboardShouldPersistTaps="handled"
        showsVerticalScrollIndicator={false}>
        {singleLineFields.map((field) => (
          <Field
            key={field.key}
            label={field.label}
            value={form[field.key]}
            inputIndex={orderedFields.indexOf(field.key)}
            setRef={registerInput}
            onFocus={setFocusedIndex}
            onSubmitEditing={() => moveFocus(1)}
            onChangeText={(value) => updateField(field.key, value)}
          />
        ))}

        {multiLineFields.map((field) => (
          <Field
            key={field.key}
            label={field.label}
            value={form[field.key]}
            minHeight={field.minHeight}
            multiline
            inputIndex={orderedFields.indexOf(field.key)}
            setRef={registerInput}
            onFocus={setFocusedIndex}
            onChangeText={(value) => updateField(field.key, value)}
          />
        ))}
      </KeyboardAwareScrollView>

      <KeyboardStickyView offset={{ opened: insets.bottom }}>
        <View style={styles.toolbar}>
          <ToolbarButton label="Prev" onPress={() => moveFocus(-1)} />
          <ToolbarButton label="Next" onPress={() => moveFocus(1)} />
          <ToolbarButton label="Save" />
          <ToolbarButton label="Quick" />
        </View>
      </KeyboardStickyView>
    </SafeAreaView>

I wanted to upgrade this pattern but seems too early. (The animated view smoothes the layout shift transitions).

const keyboardStickyViewOffset = { opened: ACTION_BAR_HEIGHT - ACTION_BAR_MARGIN * 2 };

          <KeyboardAvoidingView
            style={$styles.grow}
            behavior='padding'
            keyboardVerticalOffset={ACTION_BAR_HEIGHT}
          >
            <Animated.View style={$styles.grow} layout={LinearTransition}>
              <ScrollView
                keyboardShouldPersistTaps='handled'
                showsVerticalScrollIndicator={false}
                style={$styles.flexContainer}
                contentContainerStyle={$styles.container}
              >
                {endCustomer.uid && (
                  <RadioButton.Group
                    onValueChange={(value) => {
                      const name = value === 'end_customer' ? endCustomer.name : customer.name;
                      form.setValue('subject', name, { shouldDirty: true });
                    }}
                    value={customerType}
                  >
                    <RadioButton.Item label={endCustomer.name} value='end_customer' />
                    <RadioButton.Item label={customer.name} value='customer' />
                  </RadioButton.Group>
                )}

                <ReportEditorFields
                  form={form}
                  isRestricted={isRestricted}
                  device={device}
                  openSearch={openSearch}
                />
              </ScrollView>
            </Animated.View>
          </KeyboardAvoidingView>

          <KeyboardStickyView offset={keyboardStickyViewOffset} style={$styles.rowSpacedEven}>
            <IconButton
              mode='contained'
              loading={isLoading}
              onPress={submitDialogControl.open}
              icon={props.isEditMode ? 'pencil' : 'check-bold'}
              accessibilityLabel={props.isEditMode ? Labels.Update : Labels.Confirm}
            />

            <IconButton
              mode='contained'
              onPress={quickSertControl.open}
              icon='format-list-bulleted'
              accessibilityLabel={Labels.Add}
            />

            <IconButton
              mode='contained'
              onPress={() => {
                if (usageReportFile) fileManager.deleteFile(usageReportFile);
                const draft = {
                  ...form.getValues(),
                  status: '',
                  usage_counter: '',
                  usage_report: '',
                  ticket_uid: undefined,
                  ticket_number: undefined,
                };
                reportDraftsManager.setTemp(draft);
                router.setParams({ ticketId: undefined, reportId: undefined });
              }}
              icon='content-copy'
              accessibilityLabel={Labels.Copy}
              disabled={!isRestricted}
            />

            <IconButton
              disabled={!form.formState.isDirty}
              mode='contained'
              onPress={() => form.reset()}
              icon='restore'
              accessibilityLabel={Labels.Reset}
            />
          </KeyboardStickyView>
```</div>

[kirillzyusko]

@grego5 @michael-chan-mox could you please check if issue has been fixed on 1.21.2 (sorry, 1.21.1 contained a regression comparing to older versions, such as 1.20.7 and 1.21.0)

I strongly believe issue was fixed in 1.21.2 - let me know if not!

[kirillzyusko]

Hey @michael-chan-mox

Could you please show a video with your problem?

[michael-chan-mox]

Hey @kirillzyusko I tried clean built both JS and native side again. I still got the same issue on 1.21.2:

Issue

• Extra padding added on top once an input is focused

Still perfect for Android (CinnamonBun) on my end (it worked on Android in both 1.21.0 and 1.21.1 as well).

Workaround

• Add automaticallyAdjustContentInsets={false} prop to the scroll view fix it.

[michael-chan-mox]

Hey @michael-chan-mox

Could you please show a video with your problem?

Hey I just remove the previous outdated comment. I think the "scroll to top" issue is something from my codebase.
But the extra padding on top is something after 1.21.0.

[grego5]

Updated my demo repo to latest version, I don't see any change in behavior.
On both emulator and real device - initial input focus scrolls to visible height but not the expected height, which corrects on 2nd focus, and the scrollable range doesn't change, so I can't scroll to bottom items unless I add permanent spacer or wrap in KeyboardAvoidingView that adds the padding automatically, which of course makes no sense.

[grego5]

This is with 1.20.7 which is more consistent I guess.
Then seems I mislabeled the bad and good behaviors in 1.21. So the initial focus is correct, same as the prev versions, but in 1.21 subsequent focus tries to bring the input bottom in view is the wrong behavior... which makes sense, since if the multiline is too big it could clip at the top.

Screen_Recording_20260325_005920_Keyboard.Controller.Demo.mp4

[kirillzyusko]

Screen.Recording.2026-03-26.at.10.36.05.mov

@grego5 this is the issue that you experience, right? First focus - everything works well. Second focus - input gets pushed significantly higher than expected?

[grego5]

yes, and there's no spacer padding at the bottom in 1.21, so it doesn't have room scroll for bottom inputs to offset the keyboard height.
From my understanding there is supposed to be the new technique, but seems like it doesn't work in the end.

[kirillzyusko]

Okay @grego5

I think I fixed it in #1403 I also additionally covered functionality with unit tests - I hope it will help me to introduce less regressions in the future 🤞

I'll cleanup the PR and merge it and publish it under new 1.21.3 version. I'm not sure when it happens, but I expect that it will be end of this week or Monday next week 👀