Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Keyboard gets closed when typing #2091

Open
AbdulBasit-Kagzi opened this issue Dec 18, 2024 · 2 comments
Open

[Bug]: Keyboard gets closed when typing #2091

AbdulBasit-Kagzi opened this issue Dec 18, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@AbdulBasit-Kagzi
Copy link

AbdulBasit-Kagzi commented Dec 18, 2024

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
@AbdulBasit-Kagzi AbdulBasit-Kagzi added the bug Something isn't working label Dec 18, 2024
@MateuszRostkowski
Copy link

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants