How to add scrollbar in suggestion list

[ghost]

My suggestion list is too long to view on a page hence, it is hidden when page ends and i can not see all the suggestions, s how can i add a scroll bar in suggestions list so that user can scroll down the list and no record gets lost.

[JoeRoddy]

I think this should work out of the box. I'm guessing either it's an issue with the styles you have, or the default styles in this component. I'll take a look.

[ghost]

@JoeRoddy this issue is in IOS only. In Android, it is working properly

[ghost]

My code for reference.

render()
{
    return 
    (
        <View style={styles.container}>
            <Text style={{ padding: 5, fontSize: 35, backgroundColor: '#00BCD4', marginBottom: 7 }}>Geo Targeting</Text>
                <ScrollView keyboardShouldPersistTaps='handled' >
                    <View style={{ marginBottom: 15,  flex: 1 }}>
                        <Text style={{ fontSize: 25, color: 'blue' }}> Select Locations</Text>
                        <RadioForm
                            ref="radioForm"
                            style={styles.radioButtonStyle}
                            radio_props={this.state.radio_props}
                            initial={this.state.selectedLocation}
                            formHorizontal={true}
                            buttonColor={'#2196f3'}
                            labelStyle={{ marginRight: 20 }}
                            onPress={(value, index) => {
                                this.setState({
                                    value: value,
                                    valueIndex: index
                                })
                        }} />
                    </View>
                        {console.log("include locations: " + this.state.includesuggestions)}
                        <View style = {styles.includeLocationsContainer}> 
                            <Text style={styles.label}>
                                Type the name of a country or city to include
                            </Text>
                            <View key={1} style={styles.autocompleteContainer}>
                                <AutoTags
                                    //required
                                    suggestions={this.state.includesuggestions}
                                    tagsSelected={this.state.includeTagsSelected}
                                    handleAddition={this.includeAddition}
                                    handleDelete={this.inlcudeDelete}
                                    //optional
                                    placeholder="Add a location.."
                                    filterData={this.includeFilterData}
                                    renderSuggestion={this.includeRenderSuggestions}
                                    renderTags={this.includeRenderTags}
                                />
                            </View>
                        </View>

                    
                    <View style = {styles.excludeLocationsContainer}> 
                        <Text style={styles.label}>
                            Type the name of a country or city to exclude
                        </Text>
                        <View key={2} style={styles.autocompleteexcludeContainer}>
                            <AutoTags
                                //required
                                suggestions={this.state.exculdeSuggestions}
                                tagsSelected={this.state.excludeTagsSelected}
                                handleAddition={this.excludeAddition}
                                handleDelete={this.exlcudeDelete}
                                //optional
                                placeholder="Add a location.."
                                filterData={this.excludeFilterData}
                                renderSuggestion={this.excludeRenderSuggestions}
                                renderTags={this.excludeRenderTags}
                            />
                        </View>
                    </View>
                        
                    <View style={styles.messageContainer}>
                        <TouchableOpacity
                            style={styles.SubmitButtonStyle}
                            activeOpacity={.5}
                            onPress={this.onSaveLocations} >
                            <Text style={styles.TextStyle}> SAVE</Text>
                        </TouchableOpacity>
                    </View>
                </ScrollView>
        </View>
    );
}

const styles = StyleSheet.create({

    container: {
        justifyContent: 'center',
        paddingTop: (Platform.OS === 'ios') ? 20 : 30,
        padding: 5,
    },

    includeLocationsContainer: {
        marginBottom: 10,
        left: 20,
        overflow: 'visible',
        zIndex: 999,
    },

    autocompleteContainer: {
        overflow: 'visible',
        position: 'relative',
        zIndex: 999
    },

    excludeLocationsContainer: {
        marginBottom: 10,
        left: 20,
        marginTop: 15,
        overflow: 'visible',
        zIndex: 998,
    },
    
    autocompleteexcludeContainer: {
        marginTop: 15,
        overflow: 'visible',
        position: 'relative',
        zIndex: 999,
    },      

});

[JoeRoddy]

Try adding a listStyle prop with a maxHeight value. byteburgers/react-native-autocomplete-input#57

This worked for me:

<AutoTags 
   listStyle={{maxHeight:150}} 
   // other props
/>

[JoeRoddy]

Full example:

import React from "react";
import { StyleSheet, Text, View, TextInput } from "react-native";
import AutoTags from "react-native-tag-autocomplete";

export default class Example extends React.Component {
  state = {
    tagsSelected: [],
    suggestions: A_WORDS
    //If you don't provide renderTags && filterData props,
    //suggestions must have a 'name' attribute to be displayed && searched for.
  };

  handleDelete = index => {
    //tag deleted, remove from our tags array
    let tagsSelected = this.state.tagsSelected;
    tagsSelected.splice(index, 1);
    this.setState({ tagsSelected });
  };

  handleAddition = contact => {
    //suggestion clicked, push it to our tags array
    this.setState({ tagsSelected: this.state.tagsSelected.concat([contact]) });
  };

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text style={{ color: "white", fontSize: 30 }}>New Message</Text>
        </View>
        <View style={styles.autocompleteContainer}>
          <Text style={styles.label}>Recipients</Text>
          <AutoTags
            listStyle={{ maxHeight: 150 }}
            suggestions={this.state.suggestions}
            tagsSelected={this.state.tagsSelected}
            placeholder="Add a contact.."
            handleAddition={this.handleAddition}
            handleDelete={this.handleDelete}
          />
        </View>
        <View style={styles.messageContainer}>
          <Text style={styles.label}>Message</Text>
          <TextInput
            style={styles.message}
            underlineColorAndroid="rgba(0,0,0,0)"
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center"
  },
  header: {
    backgroundColor: "#9d30a5",
    height: 80,
    alignSelf: "stretch",
    justifyContent: "center",
    alignItems: "center",
    paddingTop: 15,
    marginBottom: 10
  },
  autocompleteContainer: {
    flex: 1,
    left: 20,
    position: "absolute",
    right: 20,
    top: 100,
    zIndex: 1
  },
  label: {
    color: "#614b63",
    fontWeight: "bold",
    marginBottom: 10
  },
  messageContainer: {
    marginTop: 160,
    height: 200,
    alignSelf: "stretch",
    marginLeft: 20,
    marginRight: 20
  },
  message: {
    backgroundColor: "#efeaea",
    height: 200,
    textAlignVertical: "top"
  }
});

const A_WORDS = (() => {
  return new Array(30).fill(undefined).map((x, i) => {
    return {
      name:
        "a" +
        Math.random()
          .toString(36)
          .substring(7)
    };
  });
})();

[JoeRoddy]

Did that work for you @khushboogupta1 ?

[JoeRoddy]

Going to close this @khushboogupta1 , I hope the listStyle={{maxHeight:150}} thing was able to solve it for you!

[ghost]

@JoeRoddy Apologies for updating late. Yes it worked for me. Tons of Thanks

[nihp]

Scrolling is not user-friendly any way to highlight the scrolling indicator for the listStyle