Android: tag input row float on top of other elements

[emclab]

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:

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?