[Bug]: BottomSheetFooter with BottomSheetTextInput does not handle keyboard show event with smooth animation

[enisit]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS

What happened?

Reopening this issue since it has been closed but issue still persist with the latest version.
When the keyboard is opened the BottomSheetFooter, which contains a BottomSheetTextInput, moves to the correct position, but it does not animate to that position. Instead it instantly teleports there making the animation somewhat jarring.

Reproduction steps

• Create a bottom sheet
• Add bottom sheet footer
• Add bottom sheet text input in the footer
• Focusing input will move text input on proper position, but will do so without smooth animation

Reproduction sample

https://snack.expo.dev/@enis.povio/bottom-sheet---issue-reproduction-template

Relevant log output

No response

Video

RPReplay_Final1721199942.MP4

[marijang]

i have also problem it seems that keyboardBlurBehavior is not working

[benjaminharringtonrose]

I can confirm this issue is happening for me as well on 5.0.6

[AbdulBasit-Kagzi]

I am facing a issue where I type any word then state changes values get set in the textInput and keyboard gets close automatically.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[AdityaAA2004]

I am facing a issue where I type any word then state changes values get set in the textInput and keyboard gets close automatically.

I am also facing this issue. the keyboard would automatically close down after each word. Any help is appreciated

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions]

This issue was closed because it has been stalled for 5 days with no activity.

[sherikovic]

Yep came here to look for this exact thing. @gorhom any idea what could be done here?

[sherikovic]

Sooo I might have found a fix/workaround but I believe it is very clean.
Do not use BottomSheetTextInput, use TextInput from react-native and then do the following:

import Animated, {
  useAnimatedStyle,
  useAnimatedKeyboard,
} from 'react-native-reanimated'
const animatedStyle = useAnimatedStyle(() => {
      return {
        transform: [{ translateY: -keyboard.height.value }],
      }
    })

return (
      <BottomSheetFooter
        {...footerProps}
        animatedFooterPosition={footerProps.animatedFooterPosition}
      >
        <Animated.View
          style={[
            containerAnimatedStyle,
            {
              minHeight: 40,
              maxHeight: 130,
              paddingBottom: isKeyboardVisible ? 0 : 30,
            },
          ]}
          className="flex px-5 bg-background"
        >
          <View className="flex-row items-end gap-2">
            <TextInput
              inputMode="text"
              placeholder="Add a comment"
              value={value}
              placeholderTextColor={theme.outline}
              className="font-sans flex-1 text-base py-3 bg-surface border border-solid border-surfaceVariant rounded-3xl pl-5 pr-12 focus:border-[1.2px]"
              onChangeText={(value) => setValue(value)}
              multiline
              onFocus={() => bottomSheetRef.current?.expand()}
              onBlur={() => bottomSheetRef.current?.collapse()}
            />
          </View>
        </Animated.View>
      </BottomSheetFooter>
    )

You get an animated textinput that moves smoothly with the keyboard. onFocus and onBlur are optional but they replace the following two lines in the modal which become invalid with this solution:

keyboardBehavior="extend"
keyboardBlurBehavior="restore"

Update:
If you have scrollable content inside the bottom sheet, with the above fix it won't respond to the keyboard ie. it won't "avoid" it. So the content will hide behind the keyboard when it is opened. To fix this, use BottomSheetKeyboardAwareScrollView from react-native-keyboard-controller. I will leave the link here as well.