React Native Maps - CSS HELP

Question

I’m trying to get an icon under the mapview in my project, so:

But now it’s like this:

Code:

 <View style={styles.viewMaps}>
                {this.state.ready && this.state.region && this.state.region.latitude != null && this.state.region.longitude != null?
                <MapView
                  ref={map => {
                    this.map = map;
                  }}
                  style={styles.map}
                  region={this.state.region}>
                    {this.state.ready && this.state.region && this.state.region.latitude != null && this.state.region.longitude != null?
                    <MapView.Marker
                      coordinate={{latitude: this.props.dataSource.latitude, longitude: this.props.dataSource.longitude}}
                    >

                </MapView.Marker>
                    : null}
                </MapView>: null}
              <View style={styles.endereco}>
                <View style={styles.viewGps1}>
                  <Text style={styles.enderecoText}>{this.props.dataSource.endereco}</Text>
                </View>
                  <View style={styles.viewGps}>
                    <Icon name="map-marker-outline" size={35} color="#ca8a2d" />
                  </View>
              </View>
            </View>

CSS:

  map:{
    flex: 1,
    width: Dimensions.get('window').width,
    height: 110,
    position: "relative"
  },
  viewGps:{
    position: "absolute",
    backgroundColor: "#FFF",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 50,
    height: 50,
    width: 50,
    right: 10,
    top: -25
  },
  viewGps1:{
    justifyContent: "center",
    alignItems: "center",
    marginRight: 70
  },
  viewMaps:{
    flexDirection: 'column',
    flex: 1.5,
    alignSelf: "stretch",
    alignItems: "flex-start",
    justifyContent: "flex-start"
  }

Answer 1

Hello,

I did this exercise too, follow below the way I managed to do.

import React from 'react';
import {View, Text, StyleSheet, Dimensions, Image} from 'react-native';
import MapView, { Marker } from "react-native-maps";
import {futura} from "../resources/Fonts";
import {cores} from "../resources/Colors";

const width = Dimensions.get("window").width;

export default class Mapa extends React.PureComponent {

    state = {
        region: {
            latitude: -30.0593446,
            longitude: -51.1734912,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.042,
        }
    };

    componentWillMount() {
        this.setState({
            region: {
                longitude: this.props.longitude,
                latitude: this.props.latitude,
                latitudeDelta: 0.0922,
                longitudeDelta: 0.0421
            }
        })
    }

    render() {
        return (
            <View>
                <View
                    style={ styles.tamanhoMapa }>
                    <MapView
                        style={{ ...StyleSheet.absoluteFillObject }}
                        region={this.state.region}
                        minZoomLevel={15}>

                        <Marker
                            coordinate={{
                                latitude: this.state.region.latitude,
                                longitude: this.state.region.longitude
                            }} />

                    </MapView>
                </View>
                <View
                    style={ styles.mapaInfo }>
                    <Text
                        style={ styles.endereco }>
                        {this.props.endereco}
                    </Text>
                </View>
                <View
                    style={ styles.indicadorMapa }>
                    <Image
                        style={{ width: 40, height: 40 }}
                        source={ require('../../assets/imgs/ENDERECO.png') }/>
                </View>
            </View>
        );
    }
}


const styles = StyleSheet.create({
    mapaInfo: {
        backgroundColor: cores.primaria,
        justifyContent: 'center',
        width: width,
        height: 25
    },
    tamanhoMapa: {
        height: 120,
        width: width,
        alignItems: 'center'
    },
    indicadorMapa: {
        backgroundColor: 'white',
        width: 35,
        alignContent: 'center',
        alignItems: 'center',
        justifyContent: 'center',
        height: 35,
        position: 'absolute',
        right: 0,
        bottom: 0,
        marginRight: 10,
        marginBottom: 5,
        borderRadius: 90
    },
    endereco: {
        textAlign: 'right',
        marginRight: 60,
        fontFamily: futura.light,
        color: 'white',
        fontSize: 15
    }
});