title: drop down menu hiding behind content
body: <p>I have a screen that looks like this:</p>
  <pre><code>return (
      &lt;SafeAreaView&gt;
        &lt;View style={styles.container}&gt;
          &lt;View style={styles.topContainer}&gt;
            &lt;View style={styles.searchFieldContainer}&gt;
              &lt;FavoritePointInput
                textChangeHandler={textChangeHandler}
              /&gt;
            &lt;/View&gt;
            &lt;View style={styles.dropdown}&gt;
            &lt;LocationsFound
              addressesFound={locations.favAddressesFoundList}
            /&gt;
            &lt;/View&gt;
            &lt;View style={styles.fieldDescription}&gt;
              &lt;Text&gt;Set Location's Name:&lt;/Text&gt;
            &lt;/View&gt;
            &lt;View style={styles.searchFieldContainer}&gt;
              &lt;Item style={styles.searchField}&gt;
                &lt;Input
                  placeholder=&quot;Library&quot;
                  onChangeText={(text) =&gt; setLocationName(text)}
                  style={styles.searchText}
                /&gt;
              &lt;/Item&gt;
            &lt;/View&gt; 
            &lt;View style={styles.buttonContainer}&gt;
              &lt;Button style={styles.button}&gt;
                &lt;Text&gt;Save Location&lt;/Text&gt;
              &lt;/Button&gt;
            &lt;/View&gt;
            &lt;/View&gt;
          &lt;/View&gt;
      &lt;/SafeAreaView&gt;
    );
  </code></pre>
  <p>Its Stlyes are as like this:</p>
  <pre><code>export const styles = StyleSheet.create({
    container: {
      height: '100%',
      width: '100%',
    },
    topContainer: {
      height: moderateScale(750),
    },
    topTextContainer: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      marginVertical: moderateScale(15),
      height: moderateScale(30),
      paddingLeft: moderateScale(30),
      paddingRight: moderateScale(30),
    },
    topMiddleContainer: {
      alignItems: 'center',
    },
    topMiddleText: {
      justifyContent: 'center',
      paddingBottom: 40,
    },
    searchFieldContainer: {
      alignItems: 'center',
      height: moderateScale(120),
    },
    button: {
      width: moderateScale(120),
      borderRadius: moderateScale(20),
      alignItems: 'center',
      alignContent: 'center',
    },
    buttonContainer: {
      flexDirection: 'row',
      justifyContent: 'center',
    },
    searchField: {
      width: moderateScale(300, 0.3),
      height: verticalScale(40),
      marginVertical: moderateScale(3),
      borderRadius: verticalScale(10),
    },
    fieldDescription: {
      alignItems: 'center',
    },
      dropdown:{
      position: 'absolute',
      top: 200,
    }
  });
  </code></pre>
  <p>When I write something in the first input field, I get search results through the <code>LocationsFound</code> component. However, the search results start to hide behind the second input field. I want it to simply overlap and come on top of the second field until one of them is selected. Is that possible?</p>
  <p><a href="https://i.stack.imgur.com/74v89.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/74v89.png" alt="enter image description here" /></a></p>