Home > Software engineering >  React Native: Change placeholder text display from right to left
React Native: Change placeholder text display from right to left

Time:07-11

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

Is there a way to change the placeholder text display from right to left ?

enter image description here

this is my example code :

<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:

here is an expo example. what i do is

  1. use renderTextInput prop for Autocomplete element and provide our own input field.
  2. add style for it.

check this on expo

  • Related