[Bug]: Strange behavior with BottomSheetFooter with BottomSheetTextInput

[sanketvitthani-ux]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS, Android

What happened?

I’ve shared the code below to reproduce the issue. Using it, I can render one BottomSheetInput in the footer component but I can’t type more than one word. Once I type a word the keyboard closes.

ScreenRecording_01-22-2026.11-00-55_1.MP4

Reproduction steps

"@gorhom/bottom-sheet": "5.1.2",
"react": "18.2.0",
"react-native": "0.73.1",

• import {Platform, StyleSheet, Text, View} from 'react-native';
  import React, {useCallback, useMemo, useRef, useState} from 'react';
  import BottomSheet, {
  BottomSheetFooter,
  BottomSheetFooterProps,
  BottomSheetScrollView,
  BottomSheetTextInput,
  } from '@gorhom/bottom-sheet';
  import {useSafeAreaInsets} from 'react-native-safe-area-context';
  import {Colors} from '../../../Utils/Colors';
  import {Sizes} from '../../../Utils/Sizes';

const BottomSheetDemo = () => {
const bottomSheetRef = useRef(null);
const insets = useSafeAreaInsets();

const snapPoints = useMemo(() => ['25%', '50%'], []);

// callbacks
const handleSheetChanges = useCallback((index: number) => {
console.log('handleSheetChanges', index);
}, []);
const data = Array.from({length: 25}, (_, index) => ({
id: index + 1,
title: Item ${index + 1},
}));
console.log('data', data);

const [inputValue, setInputValue] = useState('');

const renderFooter = useCallback(
(props: BottomSheetFooterProps) => (
<BottomSheetFooter {...props}>
<View style={[styles.footerContainer, {paddingBottom: insets.bottom}]}>



),
[inputValue],
);

return (

<BottomSheetScrollView
contentContainerStyle={{
paddingBottom: 130 + insets.bottom,
}}>
{data.map(item => (
<View
key={item.id}
style={{
padding: 10,
borderBottomWidth: 1,
borderColor: '#ccc',
width: '100%',
}}>
{item.title}

))}


);
};

export default BottomSheetDemo;

const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
backgroundColor: 'grey',
},
contentContainer: {
flex: 1,
alignItems: 'center',
},
input: {
marginTop: 8,
marginBottom: 10,
borderRadius: 10,
fontSize: 16,
lineHeight: 20,
padding: 8,
backgroundColor: 'rgba(151, 151, 151, 0.25)',
},
footerContainer: {
borderWidth: 1,
borderColor: Colors.Grey2,
paddingTop: Sizes._14,
paddingBottom: Platform.OS === 'android' ? Sizes._80 : Sizes._40,
backgroundColor: Colors.D_White2,
borderTopRightRadius: Sizes._10,
borderTopLeftRadius: Sizes._10,
borderTopStartRadius: Sizes._10,
borderTopEndRadius: Sizes._10,
zIndex: 999,
},
});

Reproduction sample

https://snack.expo.dev/@sanket.vitthani/bottom-sheet---issue-reproduction-template

Relevant log output

[phobo99]

+1

[hmnz-tushar]

+1

[oleyva93]

+1

[ICGVIP]

+1

[karna419]

+1

[shuraman69]

• 1

[jdarshan5]

+1

[pcangemi]

+1 i have the same problem on latest version

[sagarshakya]

+1

[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.