Comments (9)
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
/>
from react-native-tag-autocomplete.
@JoeRoddy Apologies for updating late. Yes it worked for me. Tons of Thanks
from react-native-tag-autocomplete.
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.
from react-native-tag-autocomplete.
@JoeRoddy this issue is in IOS only. In Android, it is working properly
from react-native-tag-autocomplete.
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,
},
});
from react-native-tag-autocomplete.
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)
};
});
})();
from react-native-tag-autocomplete.
Did that work for you @khushboogupta1 ?
from react-native-tag-autocomplete.
Going to close this @khushboogupta1 , I hope the listStyle={{maxHeight:150}}
thing was able to solve it for you!
from react-native-tag-autocomplete.
Scrolling is not user-friendly any way to highlight the scrolling indicator for the listStyle
from react-native-tag-autocomplete.
Related Issues (20)
- Custom dropdown list template HOT 1
- Could not run properly
- Could not run properly
- Get dynamic suggestion list HOT 1
- How to limit the number of text input boxes.
- Unable to see the textInput field need to scroll up to see the user input HOT 1
- "react-native-tag-autocomplete" not working after React-Native version upgrade to 0.60 both Android & iOS HOT 2
- how to change the background color of Tag autocomplete component HOT 2
- how to change background color of list suggestion HOT 1
- the suggestion list appears on top of other components in ios. HOT 3
- How to highlight the scrollview indicator in rendered tags HOT 2
- how to make border to the component HOT 1
- Unable to see the dropdown above the keyboard. It always show behind the keyboard HOT 1
- Clarfication: Any props to know the focus of autotags HOT 1
- Enter Press does not create the tag . HOT 2
- The autocomplete input have a display issue on Ipad
- Why cursor moves to next line? HOT 5
- Virtualize key error HOT 3
- Android: tag input row float on top of other elements
- Incompatible with react-native-autocomplete-input 5.x
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-tag-autocomplete.