How to position a button in bottom right corner of MapView in React Native?

Question

I'm trying to wrap my head around flexbox, and also how the component tree works with a react-native-maps MapView (and whether that's different from other components with components "on top of them" for which I'm currently using Callout.

For example, here's my MapView's render method. The TouchableOpacity area (and its buttonCallout container. is currently just for my experiments in understanding layout. I'm using the F8StyleSheet wrapper from makeitopen.com

  render() {
    return (
      <View style={styles.container}>
        <MapView
          style={{ flex: 1 }}
          region={this.state.region}
          showsUserLocation={true}
        >
          {this.renderMarkers()}
        </MapView>
        <Callout style={styles.searchCallout}>
          <TextInput
            onChangeText={searchText => this.setState({ searchText })}
            onSubmitEditing={this.handleSearch.bind(this)}
            style={styles.calloutSearch}
            placeholder={"Search"}
            value={this.state.searchText}
          />
        </Callout>
        <Callout style={styles.buttonCallout}>
          <TouchableOpacity
            style={[styles.touchable]}
            onPress={() => console.log("press")}
          >
            <Text style={styles.touchableText}>Press Me 1</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[styles.touchable]}
            onPress={() => console.log("press")}
          >
            <Text style={styles.touchableText}>Press Me 2</Text>
          </TouchableOpacity>
        </Callout>
      </View>
    );
  }
}

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
  }
});

It makes sense how I use margins to get the searchCallout to be where I want it to be because it's at the top.

As the code is now, the buttonCallout (with the TouchableOpacity inside) renders in the top right corner (sensible - alignSelf: 'flex-end' puts it at the "end", on the right).

...

Mid-post update! By changing the styles.container's flexDirection to row, with the buttons callout at alignSelf: flex-end. I've got the button callout on the bottom, and the search callout is still on top. I guess Callout components all render on top of each other.

So now I can use justifyContent on styles.container to have both callouts either in the center or on the left or right (center, flex-start, flex-end). How do I justify the different items separately? (justifySelf is not a thing!)

Wrapping both callouts in a unstyled View component results in the button callout rendering at the top-right but the search callout being nowhere to be found.

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.

Help me understand all this! Thanks :)

Answer 1

if you're trying to position the buttonCallout at the bottom, give it a postion:'absolute', so it will stay at the bottom

buttonCallout: {
    flex: 1,
    flexDirection:'row',
    position:'absolute',
    bottom:10,
    alignSelf: "center",
    justifyContent: "space-between",
    backgroundColor: "transparent",
    borderWidth: 0.5,
    borderRadius: 20
  },