React-native-maps: Using the map as a background

[rafetkhallaf]

Hi,
This project is my first project in reactNative. and I was wondering how can I use the as a background as a home screen (like Uber and Left).

I've spent two days working on this with no luck. not sure it's it's a limitation of something I'm using in the project or if I'm doing something wrong.

My code:

`
import React, { Component } from 'react';
import {
StyleSheet,
Text,
Image,
View,
TextInput,
TouchableHighlight,
} from 'react-native';
import { MapView } from 'expo';

import "prop-types"; // 15.5.10

class Home extends Component {
constructor(props) {
super(props);

    this.state = {
      orders:
      [
          {
              id: '00122',
              restaurant_name: 'Hello',
              restaurant_coordinate: {
                  latitude: 37.78825,
                  longitude: -122.4324,
              },
              driver_id: 122,
              driver_name: 'Hello',
              driver_coordinate: {
                  latitude: 37.78825 - 0.004,
                  longitude: -122.4324 - 0.004,
              }
          },
          {
              id: '00142',
              restaurant_name: 'Hello',
              restaurant_coordinate: {
                  latitude: 37.78825 - 0.008,
                  longitude: -122.4324 - 0.008,
              },
              driver_id: 192,
              driver_name: 'Hello',
              driver_coordinate: {
                  latitude: 37.78825 - 0.018,
                  longitude: -122.4324 - 0.018,
              }
          }
      ],
      data: [
        {key: 'Devin'}
      ]
    }
}


render() {
  return (
    <MapView
      style={{ 
        flex: 1,
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
      }}
      initialRegion={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    >
        {this.state.orders.map(marker => (
            <MapView.Marker 
              coordinate={marker.restaurant_coordinate}
              title={marker.restaurant_name}
            >
            <Image
                source={require('../../../img/restaurant_icon.png')}
                style={{ width: 40, height: 53 }}
             /> 
             </MapView.Marker>
        ))}

        {this.state.orders.map(marker => (
            <MapView.Marker 
              coordinate={marker.driver_coordinate}
              title={marker.driver_name}
            >
            <Image
                source={require('../../../img/driver_icon.png')}
                style={{ width: 40, height: 19.8 }}
            />  
            </MapView.Marker>
        ))}

    <View style={{
      flex: 1,
    }}
    >
    </View>
    <View style={{
      flexDirection: 'column',
      height: 150,
      width: 350,
      borderRadius: 10,
      padding: 10,
      backgroundColor: '#ffffff',
      shadowColor: '#333333',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.3,
      shadowRadius: 2,
      marginBottom: 10,
    }}>

        <View style={{
          flexDirection: 'row',
          padding: 5,
          borderBottomWidth: 1,
          borderColor: '#efefef',
          paddingBottom: 10,
          marginBottom: 10
        }}>
          <Text style={{
              flex: 1,
              textAlign: 'left',
              fontSize: 17,
              color: '#e5785c',
          }}>
            0/2
          </Text>
          <Text style={{
              flex: 1,
              textAlign: 'right',
              fontSize: 17,
              color: '#e5785c',
          }}>
            Current Orders:
          </Text>
        </View>

        <View style={{
          flexDirection: 'row',
          padding: 5,
        }}>
          <Text style={{
              flex: 1,
              textAlign: 'left',
              fontSize: 13,
              color: '#777777'
          }}>
            45.99 rs
          </Text>
          <Text style={{
              flex: 1,
              textAlign: 'right',
              fontSize: 13,
              color: '#777777'
          }}>
            #1009223
            </Text>
        </View>
    </View>

            <View style={styles.loginButtonContainer}>
                <TouchableHighlight  
                    style={styles.loginButton}
                    underlayColor={'#b84325'}
                    >
                    <Text
                        style={styles.loginButtonText}
                    >
                        New Order
                    </Text>
                </TouchableHighlight >
            </View>
        </MapView>
  );
}

}

const styles = StyleSheet.create({

loginButtonContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginBottom: 20,
},
loginButton: {
    height: 60,
    width: 335,
    fontSize: 20,
    color: '#ffffff',
    backgroundColor: '#e5785c',
    borderRadius:5,
    padding: 5,
    justifyContent: 'center',
    alignItems: 'center'
},
loginButtonText: {
    color: '#ffffff',
    fontSize: 15,
    fontWeight: 'bold',
}

});

export default Home;
`

this is what I get:

And this is what I'm trying to accomplish (the problem is this stays for 5 seconds and then it shifts to the previous screenshot - this is on Expo.io and it's the same thing on the phone ):

Any advise or guidance will be appreciated.
thank you in advance!

[christopherdro]

If you're looking for a static map your best bet might be to use google static maps api vs this library.
https://developers.google.com/maps/documentation/static-maps/

[rafetkhallaf]

i was hoping for a live feed map like Uber, is it will be showing the marker of the service provider's location.

Can it be done in ReactNative? if it cannot, I can still just set the map window to fill the rest of the screen and that should fix my problem, but i was hoping to get that idea done, as it will look much better from a UI point of view.

[alvelig]

Here's how:

<View style={StyleSheet.absoluteFillObject}>

        <MapView style={StyleSheet.absoluteFillObject} />

        <View style={{ position: 'absolute', top: 50, left: 0, right: 0, height: 50, borderWidth: 1  }}>
          <Text>12312</Text>
        </View>

        <View style={{ position: 'absolute', bottom: 50, left: 0, right: 0, height: 50, borderWidth: 1 }}>
          <Text>12312</Text>
        </View>
      </View>

If you use it as a background, have it in background, don't have it as parent element.