title: What's the right way of making an absolute positioned Component that has children in React Native?
body: <p>I'd like to create an app that looks similar to Google Maps in a way it also has a search bar at the top.
  I'm new to React Native, not sure how to achieve this. If I only use a TextInput with <code>position:absolute, top: 5</code>  etc., it works, the component is placed onto the Map.
  If I wrap that into a custom component called <code>SearchBar</code> then it goes to the bottom of the screen under / next to the Map. I need to wrap it because the goal is to have a <code>SearchBar</code> custom component the has a <code>TextInput</code> and a <code>Button</code>.</p>
  
  <p>SearchBar:</p>
  
  <pre><code>class SearchBar extends Component {
    render() {
      return (
        &lt;View style={styles2.container}&gt;
          &lt;TextInput
            style={styles2.input}
            placeholder="Enter your start point"
            onChangeText={text =&gt; console.log({text})}
          /&gt;
          &lt;Button style={styles2.button} title="+" onPress={() =&gt; undefined} /&gt;
        &lt;/View&gt;
      )
    }
  }
  
  const styles2 = StyleSheet.create({
    container: {
      flexDirection: 'row',
      backgroundColor: 'white',
    },
    input: {
      flex: 1,
    },
    button: {
      width: 50,
      height: 50,
      borderRadius: 25,
      backgroundColor: 'blue',
    },
  })
  </code></pre>
  
  <p>Main view:</p>
  
  <pre><code>class Main extends Component {
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;Map style={styles.map} /&gt;
          &lt;SearchBar/&gt;
        &lt;/View&gt;
      )
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'stretch',
      backgroundColor: 'transparent',
    },
    searchBar: {
      position: 'absolute',
      left: 10,
      top: 10,
      right: 10,
      height: 50,
      zIndex: 1,
      backgroundColor: 'white',
    },
    map: {
      flex: 1,
    },
  })
  </code></pre>