[Bug]: Keyboard gets closed when typing

[AbdulBasit-Kagzi]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS, Android

What happened?

When typing keyboard gets closed

Reproduction steps

const [comment, setComment] = useState<string | undefined>(undefined);
const renderFooter = useCallback(
props => {
return (
<BottomSheetFooter style={styles.footerContainer} {...props}>

{reply && (
<View
style={[
commonStyles.flexContainer,
{marginBottom: theme.spacing?.sm, marginLeft: 45},
]}>
<Typography
isLight
style={{
color: theme.COLORS?.PRIMARY,
width: '91%',
}}>
Replying to {reply?.userId}

<TouchableOpacity
onPress={() => {
setReply(undefined);
setComment(undefined);
}}>



)}
<View
style={[commonStyles.flexContainer, {gap: theme.spacing?.sm}]}>
<Avatar
rounded
source={{
uri: user?.profilePicture!,
}}
/>
<View
style={[commonStyles.flexContainer, styles.footerInputSubView]}>
<BottomSheetTextInput
ref={inputRef}
style={styles.footerTextInput}
placeholder="Add comment"
placeholderTextColor={theme.COLORS?.TEXT_GRAY}
value={comment}
onChangeText={value => {
if (reply) {
const temp = reply?.userId?.replace(' ', '');
if (extractUserId(value) !== temp) {
setReply(undefined);
}
}
setComment(value);
}}
/>

{!postCommentLoading ? (
<TouchableOpacity
style={{marginTop: 8}}
disabled={comment ? false : true}
onPress={postComment}
// onPress={cleanComment}
>


) : (
<ActivityIndicator
color={theme.COLORS?.PRIMARY}
size={'small'}
/>
)}



);
},
[comment, postCommentLoading, reply, user],
);

 <BottomSheetModal
    keyboardBehavior="interactive"
    keyboardBlurBehavior="restore"
    android_keyboardInputMode="adjustResize"
    ref={bottomSheetModalRef}
    index={1}
    snapPoints={snapPoints}
    style={{
      backgroundColor: theme.COLORS?.WHITE,
      borderTopLeftRadius: theme.spacing?.md,
      borderTopRightRadius: theme.spacing?.md,
      overflow: 'hidden',
    }}
    onDismiss={closeCommentBottomSheet}
    backgroundStyle={{
      backgroundColor: theme.COLORS?.PRIMARY, // Background to prevent white lines on the android
    }}
    handleComponent={() => (
      <View
        style={{
          width: windowWidth,
          height: 20,
          justifyContent: 'center',
          backgroundColor: theme.COLORS?.PRIMARY,
          borderTopLeftRadius: theme.spacing?.md,
          borderTopRightRadius: theme.spacing?.md,
        }}>
        <View
          style={{
            height: 4,
            width: 40,
            backgroundColor: 'white',
            alignSelf: 'center',

            borderRadius: 10,
          }}></View>
      </View>
    )}
    footerComponent={renderFooter}>
    {!fetchCommentsLoader ? (
      <>
        <View
          style={{
            alignItems: 'center',
            backgroundColor: theme.COLORS?.PRIMARY,
            paddingVertical: theme.spacing?.md,
          }}>
          <Typography>Comments</Typography>
        </View>
        <BottomSheetFlatList
          ref={flatListRef}
          data={comments?.commentList.data.items}
          keyExtractor={item => item._id}
          renderItem={renderComment}
          contentContainerStyle={{
            flexGrow: 1,
            paddingHorizontal: theme.spacing?.md,
            paddingBottom: 100,
          }}
          style={{backgroundColor: theme.COLORS?.PRIMARY}}
          ListEmptyComponent={
            <View
              style={{
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <Typography style={{fontSize: theme.fontSizes?.md}}>
                {appStrings.NO_COMMENT}
              </Typography>
            </View>
          }
          ItemSeparatorComponent={() => (
            <HorizontalDivider
              dividerStyle={{
                height: 1,
                marginTop: 0,
                marginVertical: theme.spacing?.md,
              }}
            />
          )}
          onEndReachedThreshold={0.5}
          onEndReached={() =>
            !commentPaginationLoader &&
            comments?.commentList.data.hasNextPage &&
            getMoreComments()
          }
          ListFooterComponent={
            commentPaginationLoader ? (
              <ActivityIndicator
                size={'small'}
                color={theme.COLORS?.WHITE}
              />
            ) : null
          }
        />
      </>
    ) : (
      <ActivityIndicator
        color={theme.COLORS?.WHITE}
        size={'large'}
        style={{
          flexGrow: 1,
          justifyContent: 'center',
          backgroundColor: theme.COLORS?.PRIMARY,
        }}
      />
    )}
  </BottomSheetModal>

Reproduction sample

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

Relevant log output

No log output

[MateuszRostkowski]

I've got the same issue when I'm adding TextInput to handleComponent prop, you should somehow try moving TextInput from footerComponent and place it inside children

[AbdulBasit-Kagzi]

I've got the same issue when I'm adding TextInput to handleComponent prop, you should somehow try moving TextInput from footerComponent and place it inside children

I tried but than keyboard is not getting avoided.

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

[YraZinchenko]

Any solutions?

[gorhom]

fixed your issue
https://snack.expo.dev/H2_VWjoEGqbh2X7z5aO5G

how?
i would advice to learn to split your components into a small uncontrolled components, where there state does not tigger unwanted re-rendering to the parent