[Bug]: Change in content size causes bottom sheet to close on first render only on ios

[MianIbrarHussain]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS

What happened?

I am showing a list in bottom sheet using BottomSheetFlashList and using BottomSheetTextInput to filter through list it is working fine on android but on ios closes when i firstly start writing in text input which causes the change in content size however when i reopen the list without reloading the application it starts working fine, and their is no warning or any other log

Reproduction steps

• Here is my code:
  `import React, {ReactNode, useState} from 'react';
  import {Platform, StyleSheet, View} from 'react-native';
  import BottomSheet, {
  BottomSheetFlashList,
  BottomSheetTextInput,
  BottomSheetView,
  } from '@gorhom/bottom-sheet';
  import {useLayoutSizes} from '../constants/LayoutSizes';
  import {useSafeAreaInsets} from 'react-native-safe-area-context';
  import {useThemeContext} from '../contexts/ThemeContext';
  import {AlphaBetsRegex} from '../constants/Regexes';
  import {Fonts} from '../Theme/Fonts';

interface Item {
id: string | number;
name: string;
}

interface ComponentProps {
data: Item[];
selectedValue: any;
dynamicSizing?: boolean;
isSearchEnabled?: boolean;
itemRenderItem: (item: Item) => ReactNode;
bottomSheetRef: any;
}

const CustomBSPicker: React.FC = ({
dynamicSizing = true,
data,
selectedValue,
itemRenderItem,
isSearchEnabled,
bottomSheetRef,
}) => {
const {bottomSheetHeight} = useLayoutSizes();
const {Theme} = useThemeContext();
const styles = useStyles();
const [searchQuery, setSearchQuery] = useState('');

const itemSeparatorComponent = () => {
return ;
};

return (
<BottomSheet
ref={bottomSheetRef}
index={-1}
snapPoints={[bottomSheetHeight]}
enablePanDownToClose={true}
backgroundStyle={styles.bottomSheetBackgroundStyle}
handleIndicatorStyle={styles.bottomSheetIndicatorStyle}
keyboardBehavior="extend"
handleStyle={{
height: 25,
}}
onClose={() => {
setSearchQuery('');
}}
enableDynamicSizing={dynamicSizing}>
<BottomSheetView
style={{
height: bottomSheetHeight - 25,
width: '100%',
}}>
{isSearchEnabled && (
<BottomSheetTextInput
style={styles.searchInput}
placeholder="Search Here..."
placeholderTextColor={Theme.lightGreyText}
value={searchQuery}
onChangeText={newText =>
AlphaBetsRegex.test(newText) && setSearchQuery(newText)
}
/>
)}
<BottomSheetFlashList
data={data.filter(f =>
f.name.toLowerCase().match(searchQuery.toLocaleLowerCase()),
)}
renderItem={itemRenderItem}
keyExtractor={(item, index) => index.toString()}
estimatedItemSize={61}
contentContainerStyle={styles.contentContainerStyle}
ItemSeparatorComponent={itemSeparatorComponent}
extraData={selectedValue}
/>


);
};

const useStyles = () => {
const {bottom} = useSafeAreaInsets();
const {Theme} = useThemeContext();
return StyleSheet.create({
bottomSheetBackgroundStyle: {
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
backgroundColor: Theme.lightgreyBG,
},
bottomSheetIndicatorStyle: {
borderWidth: 1,
borderColor: Theme.greyColor,
backgroundColor: 'white',
width: 50,
height: 7,
},
searchInput: {
color: 'black',
fontSize: 16,
fontFamily: Fonts.regular,
borderWidth: 0.5,
width: '94%',
height: 45,
borderRadius: 8,
marginVertical: 10,
alignSelf: 'center',
backgroundColor: 'white',
paddingHorizontal: 15,
borderColor: Theme.greyColor,
paddingBottom: 0,
paddingTop: Platform.select({
android: 4,
ios: 0,
}),
textAlignVertical: 'center',
},
itemSeperatorStyles: {
height: 10,
},
contentContainerStyle: {
paddingBottom: bottom,
},
});
};

export default CustomBSPicker;
`

Reproduction sample

import React, {ReactNode, useState} from 'react'; import {Platform, StyleSheet, View} from 'react-native'; import BottomSheet, { BottomSheetFlashList, BottomSheetTextInput, BottomSheetView, } from '@gorhom/bottom-sheet'; import {useLayoutSizes} from '../constants/LayoutSizes'; import {useSafeAreaInsets} from 'react-native-safe-area-context'; import {useThemeContext} from '../contexts/ThemeContext'; import {AlphaBetsRegex} from '../constants/Regexes'; import {Fonts} from '../Theme/Fonts'; interface Item { id: string | number; name: string; } interface ComponentProps { data: Item[]; selectedValue: any; dynamicSizing?: boolean; isSearchEnabled?: boolean; itemRenderItem: (item: Item) => ReactNode; bottomSheetRef: any; } const CustomBSPicker: React.FC = ({ dynamicSizing = true, data, selectedValue, itemRenderItem, isSearchEnabled, bottomSheetRef, }) => { const {bottomSheetHeight} = useLayoutSizes(); const {Theme} = useThemeContext(); const styles = useStyles(); const [searchQuery, setSearchQuery] = useState(''); const itemSeparatorComponent = () => { return ; }; return ( <BottomSheet ref={bottomSheetRef} index={-1} snapPoints={[bottomSheetHeight]} enablePanDownToClose={true} backgroundStyle={styles.bottomSheetBackgroundStyle} handleIndicatorStyle={styles.bottomSheetIndicatorStyle} keyboardBehavior="extend" handleStyle={{ height: 25, }} onClose={() => { setSearchQuery(''); }} enableDynamicSizing={dynamicSizing}> <BottomSheetView style={{ height: bottomSheetHeight - 25, width: '100%', }}> {isSearchEnabled && ( <BottomSheetTextInput style={styles.searchInput} placeholder="Search Here..." placeholderTextColor={Theme.lightGreyText} value={searchQuery} onChangeText={newText => AlphaBetsRegex.test(newText) && setSearchQuery(newText) } /> )} <BottomSheetFlashList data={data.filter(f => f.name.toLowerCase().match(searchQuery.toLocaleLowerCase()), )} renderItem={itemRenderItem} keyExtractor={(item, index) => index.toString()} estimatedItemSize={61} contentContainerStyle={styles.contentContainerStyle} ItemSeparatorComponent={itemSeparatorComponent} extraData={selectedValue} /> ); }; const useStyles = () => { const {bottom} = useSafeAreaInsets(); const {Theme} = useThemeContext(); return StyleSheet.create({ bottomSheetBackgroundStyle: { borderTopLeftRadius: 30, borderTopRightRadius: 30, backgroundColor: Theme.lightgreyBG, }, bottomSheetIndicatorStyle: { borderWidth: 1, borderColor: Theme.greyColor, backgroundColor: 'white', width: 50, height: 7, }, searchInput: { color: 'black', fontSize: 16, fontFamily: Fonts.regular, borderWidth: 0.5, width: '94%', height: 45, borderRadius: 8, marginVertical: 10, alignSelf: 'center', backgroundColor: 'white', paddingHorizontal: 15, borderColor: Theme.greyColor, paddingBottom: 0, paddingTop: Platform.select({ android: 4, ios: 0, }), textAlignVertical: 'center', }, itemSeperatorStyles: { height: 10, }, contentContainerStyle: { paddingBottom: bottom, }, }); }; export default CustomBSPicker;

Relevant log output

No response

[github-actions]

Hello @MianIbrarHussain 👋, this issue is being automatically closed and locked because it does not follow the issue template.