I use a library ״react-native-autocomplete-input״

1. The keyboard disappears after each letter is typed or deleted

2. The align of text from right to left in both the text box and the display of the autocomplete not works.

    <Autocomplete
                    data={
                      autoCompleteWaterSourceData?.length === 1 &&
                      autoCompleteWaterSourceData[0]
                        ? []
                        : autoCompleteWaterSourceData
                    }
                    placeholder={placeholder1}
                    value={querySourceCode}
                    autoCorrect={false}
                    onChangeText={setQuerySourceCode}
                    flatListProps={{
                      keyboardShouldPersistTaps: 'always',
                      keyExtractor: (_, idx) => idx.Water_Source_Code,
                      renderItem: ({
                        item: { Water_Source_Code, Water_Source_Name },
                      }) => (
                        <TouchableOpacity
                          onPress={() =>
                            setQuerySourceCode(
                              Water_Source_Code   ' '   Water_Source_Name
                            )
                          }
                        >
                          <Text style={styles.autoCompleteText}>
                            {Water_Source_Code   ' '   Water_Source_Name}
                          </Text>
                        </TouchableOpacity>
                      ),
                    }}
                  />

CodePudding user response：

Refering your code, you can prevent the focus issue by calling function as function instead as component like below

// main screen
   return (
     <>
      <KeyboardAwareScrollView
        behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
        style={styles.Container}
      >
        <View style={styles.MainScreen}>

          {WhereToSample()} // call like this instead of <WhereToSample />
          ...
          ...
     </>
   );

CodePudding user response：

You can set text property textAlign:'right' both text input and autocomplete