Open emclab opened 4 years ago
To make the autocomplete working in Android, I added a wrapper with the style below:
autocompleteContainer: { flex: 1, left: 0, position: 'absolute', right: 0, top: 100, //<<==make tag input below 2 input elements zIndex: 1 },
Here top is increased to 100 to give space for other 2 input elements. Here is the render code:
top
import {Textarea, Item, Icon, Input, Text, Header, Container, Content, Form } from 'native-base'; return ( <Container style={styles.container}> <Header> //header </Header> <Content style={styles.contentContainer} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} > <Form> <Input onChangeText={nameChange} placeholder={'Name'} /> //<<==input Name <Textarea padder rowSpan={2} bordered placeholder="Spec" onChangeText={despChange} /> //<<==input desp <View style={styles.autocompleteContainer}> //<<==View wrapper <AutoTags //<<==here is tag input style={styles.tags} keyExtractor={(item, index) => item + index} suggestions={tagSelection} tagsSelected={tagSelected} handleAddition={addTag} handleDelete={deleteTag} placeholder="Tag.." /> </View> </Form> ... )
Here is how the screen look like:
Now the tag input field is on top of rest of the view and overlap. how to make the tag input align with other elements?
To make the autocomplete working in Android, I added a wrapper with the style below:
Here
top
is increased to 100 to give space for other 2 input elements. Here is the render code:Here is how the screen look like:
Now the tag input field is on top of rest of the view and overlap. how to make the tag input align with other elements?