TextInput does not stick in the right place with KeyboardAvoidingView and ScrollView

[irekrog]

Describe the bug
When the content is scrolled to the bottom, halfway down the screen, etc., and the input is pressed, it is not always properly sticked and visible

Code snippet

import React from "react";
import {
  Button,
  Image,
  Text,
  TextInput,
  View,
} from "react-native";
import {
  KeyboardAvoidingView, KeyboardStickyView,
  useReanimatedKeyboardAnimation
} from "react-native-keyboard-controller";

import styles from "./styles";

import {ScrollView} from "react-native-gesture-handler";
import Animated, {useAnimatedStyle} from "react-native-reanimated";

export default function KeyboardAvoidingViewExample() {
  const {progress, height} = useReanimatedKeyboardAnimation();

  const animatedWrapperStyles = useAnimatedStyle(() => ({
    transform: [
      {
        translateY: progress.value ? -400 : 0,
      },
    ],
  }));

  return (
    <View style={{flex: 1}}>
      <KeyboardAvoidingView style={{flex: 1}}>
        <ScrollView style={{flex: 1}}>
          <Animated.View style={[
            animatedWrapperStyles,
            {flex: 1},
          ]}>
            <Image
              style={{width: 400, height: 400}}
              source={{
                uri: 'https://reactnative.dev/img/tiny_logo.png',
              }}
            />
            <View>
              <TextInput
                placeholder="Username"
                placeholderTextColor="#7C7C7C"
                style={styles.textInput}
              />
              <TextInput
                placeholder="Password"
                placeholderTextColor="#7C7C7C"
                style={styles.textInput}
                secureTextEntry
              />
            </View>
            <View>
              <Text>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.

              </Text>
              <Text>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.
              </Text>
              <Text>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.
              </Text>
              <Text>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.
              </Text>
              <Text>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.
              </Text>
            </View>
          </Animated.View>
        </ScrollView>
      </KeyboardAvoidingView>
      <KeyboardStickyView offset={{
        closed: 0,
        opened: -5,
      }}>
        <Button title={"Submit"} onPress={() => {}} />
      </KeyboardStickyView>
    </View>
  );
}

Repo for reproducing
You can paste a code above to src/screens/Examples/KeyboardAvoidingView/index.tsx in this repo

Expected behavior
TextInput should stick to the right place

Screenshots

Screen_Recording_20240325_122220_KeyboardController.Example.mp4

Smartphone

• Device: Samsung Galaxy A51
• OS: Android 13
• RN version: 0.73.5
• JS engine:Hermes
• Library version: 1.11.4

[kirillzyusko]

Hey @irekrog

I think this is kind of expected behavior, since KeyboardAvoidingView is designed to simply resize container without paying an attention to TextInput position (correct me if I'm wrong)?.. What is the behavior of KeyboardAvoidingView from RN on iOS? 👀 Does it have the same problem or not?

In your layout I think I'd recommend to use KeyboardAwareScrollView (because according to description you want to achieve the effect provided by this component).

Plus I see that additionally you are moving your content by 400px (which is also not sensitive to focused TextInput position (i. e. if you scrolled and your input around top of the screen -> you still move the view by 400px and thus the input gets hidden)).

[irekrog]

What is the behavior of KeyboardAvoidingView from RN on iOS? 👀 Does it have the same problem or not?

On iOS it looks a much better, so I'm not sure what is wrong 😕

RPReplay_Final1711368735.MP4

Plus I see that additionally you are moving your content by 400px

Yes, because I want to hide the image outside a screen window when keyboard is active. Exactly like on this recorded video from iPhone.

[irekrog]

@kirillzyusko and I'm trying to use KeyboardAwareScrollView but there is no difference

[kirillzyusko]

@irekrog what happens here:

I don't see a keyboard, but according to Submit button it's kind of visible?

[irekrog]

@kirillzyusko yep, it's a problem with recorded video because actually there is a keyboard

[kirillzyusko]

Yes, because I want to hide the image outside a screen window when keyboard is active. Exactly like on this recorded video from iPhone.

I don't know why iPhone behaves in this way, but on the layout that you provided:

• KeyboardAvoidingView should shrink an inner view;
• translateY should move a view by 400px so there is a lot of risks that focused input will be hidden too (because it's very close to the image);

Maybe because of layout animations (or some internal stuff inside) iOS itself does a little bit magic and changes view positions to what you expect, but on Android it'll not work for sure I think.

I'll test your layout when I have time (but can not promise it'll be soon, because I have a plenty of work with keyboard controller at the moment 😅)

And yeah, last but not least - you can create your own avoiding solution that will be specific for your layout:

• you can track onScroll event using reanimated to understand how much distance use has scrolled;
• you can use useReanimatedFocusedInput to find a position of your focused TextInput
• you can use useKeyboardHandler to have an access to every keyboard frame and do a corresponding animations.

Using all these variables you'll be able to calculate necessary layout adjustments.

and I'm trying to use KeyboardAwareScrollView but there is no difference

Can you share a code sample with KeyboardAwareScrollView?

I think KeyboardAwareScrollView with bottomOffset should do a trick. Also I can recommend you to try to change size of your image (set height to 0 when keyboard is open), instead of translation entire ScrollView content.

[irekrog]

Sure I'll try, and thanks for tips :)

Can you share a code sample with KeyboardAwareScrollView?

Nothing special, I just changed component from KeyboardAvoidingView to KeyboardAwareScrollView and tried manipulate bottomOffset but behavior is similar like on the attached video.

[kirillzyusko]

Nothing special, I just changed component from KeyboardAvoidingView to KeyboardAwareScrollView and tried manipulate bottomOffset but behavior similar like on the attached video.

Okay, got you! Then I think the problem happens because of these additional 400px translation - potentially resizing content (changing real layout) may fix the problem, but of course need to try 🙂

Feel free to share your observations here - I'll try to help if I can 😅