dropdown list on the side of the input ?

[WeeCoopTech]

Hey Guys,
This package is great and easily customizable, that's great but I need a little help, please.
When I have the suggestion list, the style of my input is wierd, I don't know how to fix this, I'd like the input to stay the same and the suggestion to go down... :

https://zupimages.net/up/20/11/0xqc.bmp

the code :

<SafeAreaView
                style={{
                  flexDirection: "row",
                  marginVertical: 10,
                  marginHorizontal: 20
                }}
              >
                {autocompletes.map(() => (
                  <Autocomplete
                    key={shortid.generate()}
                    containerStyle={{}}
                    inputStyle={{
                      borderColor: "#fff",
                      width: 250,
                      fontFamily: "FunctionLH"
                    }}
                    placeholder={i18n.t("tripsform.action.departure")}
                    placeholderColor="#FFF"
                    scrollToInput={ev => {}}
                    handleSelectItem={(item, id) =>
                      this.handleSelectItem(item, id)
                    }
                    // onDropdownClose={() => onDropdownClose()}
                    onDropdownShow={() => onDropdownShow()}
                    pickerStyle={{ backgroundColor: "transparent" }}
                    fetchDataUrl={apiUrl}
                    minimumCharactersCount={2}
                    highlightText
                    valueExtractor={item => item.name}
                    rightContent
                    rightTextExtractor={item => item.properties}
                  />
                ))}
                <DatePicker
                  date={this.state.datetimeS}
                  mode="datetime"
                  format="YYYY-MM-DD HH:mm"
                  confirmBtnText="Confirm"
                  cancelBtnText="Cancel"
                  hideText={true}
                  showIcon={true}
                  onDateChange={datetime => {
                    this.setState({ datetimeS: datetime });
                  }}
                />
              </SafeAreaView>
              <SafeAreaView
                style={{
                  flexDirection: "row",
                  marginVertical: 10,
                  marginHorizontal: 20
                }}
              >
                {autocompletes.map(() => (
                  <Autocomplete
                    key={shortid.generate()}
                    containerStyle={{}}
                    inputStyle={{
                      borderColor: "#fff",
                      width: 250,
                      fontFamily: "FunctionLH"
                    }}
                    placeholder={i18n.t("tripsform.action.arrival")}
                    placeholderColor="#FFF"
                    scrollToInput={ev => {}}
                    handleSelectItem={(item, id) =>
                      this.handleSelectItem(item, id)
                    }
                    onDropdownClose={() => onDropdownClose()}
                    onDropdownShow={() => onDropdownShow()}
                    pickerStyle={{ backgroundColor: "transparent" }}
                    fetchDataUrl={apiUrl}
                    minimumCharactersCount={2}
                    highlightText
                    valueExtractor={item => item.name}
                    rightContent
                    rightTextExtractor={item => item.properties}
                  />
                ))}
                <DatePicker
                  date={this.state.datetimeA}
                  mode="datetime"
                  format="YYYY-MM-DD HH:mm"
                  hideText={true}
                  confirmBtnText="Confirm"
                  cancelBtnText="Cancel"
                  showIcon={true}
                  onDateChange={datetime => {
                    this.setState({ datetimeA: datetime });
                  }}
                />
              </SafeAreaView>