1

I want to use autoComplete input in react-native, the best option i found was react-native-autocomplete-input, my problem is that i can't scroll my drop down list in IOS but in android i can.

I tried this solution and it's doesn't help :( https://github.com/mrlaessig/react-native-autocomplete-input/issues/57#issuecomment-332723713

I checked a lot of suggestions and nothing doesn't help, i will be glad if someone that used it will help, thank you!

return (
      <View style={styles.container}>
        {showAddChar && (
          <Text style={styles.addChar} onPress={this.onChoosenItem}>
            +
          </Text>
        )}
        <Autocomplete
          data={data}
          defaultValue={query}
          onChangeText={(text: string) =>
            this.setState({ query: text, hideResult: false })
          }
          keyExtractor={index => index['id'].toString()}
          inputContainerStyle={styles.inputContainerStyle}
          listContainerStyle={{}}
          listStyle={styles.listStyle}
          style={{ fontSize: 18 }}
          hideResults={hideResult}
          placeholder={placeholder}
          renderItem={({ item }) => (
            <TouchableOpacity
              style={styles.item}
              onPress={() => this.onChoosenItem(item)}
            >
              <Text>{item['name']}</Text>
            </TouchableOpacity>
          )}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0
  },
  addChar: {
    zIndex: 1,
    position: 'absolute',
    fontSize: 30,
    right: 0,
    top: 0
  },
  inputContainerStyle: {
    borderColor: 'rgb(70, 48, 235)',
    borderBottomWidth: 3,
    borderTopWidth: 0,
    borderRightWidth: 0,
    borderLeftWidth: 0
  },
  //   listContainerStyle: {height:filteredMembers.length * 70},
  listStyle: {
    borderColor: 'grey',
    margin: 0,
    overflow: 'scroll',
    maxHeight: 200
  },
  item: {
    fontSize: 16,
    borderBottomColor: 'grey',
    borderBottomWidth: 2,
    padding: 12
  }
});

enter image description here

Barak
  • 654
  • 13
  • 30
  • did you find any solution? i am stuck at the same problem :( – Yahia Naguib Apr 17 '20 at 12:03
  • 1
    @Yahia Badr I didn't find solution for this problem, but i checked and this isn't a good ux to use autocomplete-input in mobile apps. I recommended you to use it like the popular mobile apps do- a search input in the top and data under it, and you can search and filter the data. something like that - https://mk0laterblog4vkmxupe.kinstacdn.com/wp-content/uploads/2019/07/NC-LATER-TEMPLATE-Vertical-Triple-46.png – Barak Apr 18 '20 at 10:11
  • that's a good idea, i was thinking about changing this library from my app but i hadn't any ideas to replace it. So i think you helped me! – Yahia Naguib Apr 18 '20 at 13:14
  • But this https://github.com/mrlaessig/react-native-autocomplete-input/issues/57#issuecomment-332723713 works for me. What issue you occur when you had use this? – Zuhair Naqi May 03 '20 at 09:52

0 Answers0