TextInput keyboard dismiss when setSate on iOS about react-native-keyboard-accessory-view

[demchenkoalex]

@AromdeSalaxy yes, I had the same problem, just move everything you have under <KeyboardAccessoryView including the TextInput to the separate component/file and use setState there - only that component will be re-rendered.

[aromdeskalaxy]

@demchenkoalex thank you so much

[demchenkoalex]

Hi @AromdeSalaxy

Can you please elaborate? KeyboardAccessoryView just renders children, it does not contain any logic for opening or closing the keyboard. What setState do you mean?

[aromdeskalaxy]

  const RenderCommentInput = () => {
    return (
      <View style={styles.postCommentContainer}>
          <TextInput
            style={styles.inputPostCom}
            multiline
            numberOfLines={10}
            // onChangeText={onMessageChange}
            value={message}
            onChangeText={setMessage}
          />
      </View>
    );
  };


  return (
    <SafeAreaView style={styles.safeAreaView}>
      <Header title={t('Comment')} />
      <KeyboardAccessoryView
        renderScrollable={renderScrollable}
        children={<RenderCommentInput />}
      />
    </SafeAreaView>
  );

it happened when i call

value={message}
onChangeText={setMessage}

[aromdeskalaxy]

i guess view is re-render inside KeyboardAccessoryView children

[demchenkoalex]

I have a similar setup in the project and it doesn't close the keyboard, I will try to re-create your code and see what's going on

[aromdeskalaxy]

  const RenderScrollable = () => (
    <FlatList
      ref={refList}
      keyboardDismissMode="interactive"
      data={comments}
      {...PanGestureHandler}
      ListHeaderComponent={<RenderOwnerPost post={post} profile={profile} />}
      renderItem={({ item, index }) => {
        return <RenderCommentCard key={item.id} comment={item} />;
      }}
      contentContainerStyle={{ paddingVertical: 16, paddingBottom: 50 }}
      keyExtractor={(item) => item.id.toString()}
    />
  );

   return (
    <SafeAreaView style={styles.safeAreaView}>
      <Header title={t('Comment')} />
      <KeyboardAccessoryView renderScrollable={RenderScrollable}>
        <View style={styles.postCommentContainer}>
          <View style={styles.postComInputContainer}>
            <TextInput
              style={styles.inputPostCom}
              multiline
              numberOfLines={10}
              value={message}
              onChangeText={setMessage}
            />
          </View>
          <View style={styles.btnSend}>
            <TouchableOpacity onPress={() => sendComment({ id: profile.id })}>
              <Icon.SendCircleFilled width={24} height={24} />
            </TouchableOpacity>
          </View>
        </View>
      </KeyboardAccessoryView>
    </SafeAreaView>
  );

this code keyboard not dismiss
but renderScrollable will re-render when TextInput call onChangeText