title: How to position a button in bottom right corner of MapView in React Native?
body: <p>I'm trying to wrap my head around flexbox, and also how the component tree works with a <code>react-native-maps</code> MapView (and whether that's different from other components with components "on top of them" for which I'm currently using <code>Callout</code>.</p>
  
  <p>For example, here's my <code>MapView</code>'s render method. The <code>TouchableOpacity</code> area (and its <code>buttonCallout</code> container. is currently just for my experiments in understanding layout. I'm using the <code>F8StyleSheet</code> wrapper from makeitopen.com</p>
  
  <pre class="lang-js prettyprint-override"><code>
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;MapView
            style={{ flex: 1 }}
            region={this.state.region}
            showsUserLocation={true}
          &gt;
            {this.renderMarkers()}
          &lt;/MapView&gt;
          &lt;Callout style={styles.searchCallout}&gt;
            &lt;TextInput
              onChangeText={searchText =&gt; this.setState({ searchText })}
              onSubmitEditing={this.handleSearch.bind(this)}
              style={styles.calloutSearch}
              placeholder={"Search"}
              value={this.state.searchText}
            /&gt;
          &lt;/Callout&gt;
          &lt;Callout style={styles.buttonCallout}&gt;
            &lt;TouchableOpacity
              style={[styles.touchable]}
              onPress={() =&gt; console.log("press")}
            &gt;
              &lt;Text style={styles.touchableText}&gt;Press Me 1&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
            &lt;TouchableOpacity
              style={[styles.touchable]}
              onPress={() =&gt; console.log("press")}
            &gt;
              &lt;Text style={styles.touchableText}&gt;Press Me 2&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
          &lt;/Callout&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = F8StyleSheet.create({
    container: {
      flex: 1
    },
    buttonCallout: {
      flex: 1,
      alignSelf: "flex-end",
      justifyContent: "space-between",
      backgroundColor: "transparent",
      borderWidth: 0.5,
      ios: { padding: 5 },
      borderRadius: 20
    },
    touchable: {
      backgroundColor: "lightblue",
      padding: 10,
      margin: 10
    },
    touchableText: {
      fontSize: 24
    },
    searchCallout: {
      flexDirection: "row",
      backgroundColor: "rgba(255, 255, 255, 0.9)",
      borderRadius: 10,
      width: "80%",
      marginLeft: "5%",
      marginTop: 40
    },
    calloutSearch: {
      borderColor: "transparent",
      marginLeft: 10,
      width: "90%",
      marginRight: 10,
      height: 40,
      borderWidth: 0.0
    }
  });
  </code></pre>
  
  <p>It makes sense how I use margins to get the <code>searchCallout</code> to be where I want it to be because it's at the top.</p>
  
  <p>As the code is now, the <code>buttonCallout</code> (with the <code>TouchableOpacity</code> inside) renders in the top right corner (sensible - <code>alignSelf: 'flex-end'</code> puts it at the "end", on the right).</p>
  
  <p>...</p>
  
  <p>Mid-post update! By changing the <code>styles.container</code>'s <code>flexDirection</code> to <code>row</code>, with the buttons callout at <code>alignSelf: flex-end</code>. I've got the button callout on the bottom, and the search callout is still on top. I guess <code>Callout</code> components all render on top of each other.</p>
  
  <p>So now I can use <code>justifyContent</code> on <code>styles.container</code> to have <em>both</em> callouts either in the center or on the left or right (<code>center, flex-start, flex-end</code>). How do I justify the different items separately? (<code>justifySelf</code> is not a thing!)</p>
  
  <p>Wrapping both callouts in a unstyled <code>View</code> component results in the button callout rendering at the top-right but the search callout being nowhere to be found.</p>
  
  <p>Wrapping them both in a callout results in the buttons rendering a little right of the top left corner, with the search callout again not displayed.</p>
  
  <p>Help me understand all this! Thanks :)</p>