The components won't show for Android if Google Maps is enabled.

Expo Development Tools
1

Hi, I hope someone can assist me with this issue. I’ve been trying to figure it out for 3 days now and I just can’t find the issue.

The issue is when I enable Google Maps on my application, it runs normal on iOS but for Android devices, the components are gone (Navigation, and buttons). But when I try to comment out the Google Map component, the button shows up. I’ll attach a screenshot of the issue.

Screen Shot 2021-05-15 at 5.15.59 AM
Screen Shot 2021-05-15 at 5.15.59 AM2214×1386 683 KB

Here’s also the code for the “GoogleMaps” component:

import React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';

const GoogleMaps = props => {
    return (
        <View style={styles.container}>
            <MapView 
            style={styles.map}
            provider={PROVIDER_GOOGLE}
            region={{
                latitude: 14.651070,
                longitude: 121.049467,
                latitudeDelta: 0.050,
                longitudeDelta: 0.0121,
            }}
            on
            />
        </View>
    );
};

const styles = StyleSheet.create({

    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    map: {
        width: '100%',
        height: '100%',
        position: 'absolute',
    }

});

export default GoogleMaps;

Then here’s the Dashboard Screen where everything should render:

import React from 'react';
import { View, Text, StyleSheet, Dimensions, Platform, Linking } from 'react-native';
import { MaterialCommunityIcons, AntDesign } from '@expo/vector-icons';

// Components Import
import GoogleMaps from '../components/GoogleMaps';
import EmegencyButton from '../components/EmergencyButton';
import CallButton from '../components/CallButton';

const DashboardScreen = props => {

    return (
        <View style={styles.screen}>

            {/* Navigation Container */}
            <View style={styles.navigationContainer}>
                <CallButton onPress={() => {
                    props.navigation.toggleDrawer(); // Toggle side-menu
                }}>
                    <AntDesign name="menuunfold" size={24} color="black" />
                </CallButton>
            </View>

            {/* Call and Geolocating Buttons */}
            <View style={styles.callButtonContainer}>
                <CallButton onPress={() => {}}>
                    <MaterialCommunityIcons name="target" size={24} color="black" />
                </CallButton>
                <CallButton onPress={() => {
                    Linking.openURL('tel: 122');
                }}>
                    <MaterialCommunityIcons name="phone-in-talk" size={24} color="black" />
                </CallButton>
            </View>
            
            {/* Emergency Button */}
            <View style={styles.emergencyButtonContainer}>
                <EmegencyButton title="Emegency" onEmergency={() => {
                    // Put Emergency Code Here
                }}/>
            </View>

            {/* Google Map */}
            <GoogleMaps />
        </View>
    );
};


// Styles
const styles = StyleSheet.create({
    screen: {
        flexDirection: 'column-reverse',
        flex: 1,
    },
    emergencyButtonContainer: {
        position: 'absolute',
        width: Dimensions.get('window').width,
        alignItems: 'center',
        bottom: 30,
        zIndex: 1,
    },
    callButtonContainer: {
        position: 'absolute',
        width: Dimensions.get('window').width,
        justifyContent: 'flex-end',
        alignItems: 'center',
        bottom: 100,
        right: Dimensions.get('window').width ? 70 : 85,
        zIndex: 1,
        flex: 1,
        flexDirection: 'row'
    },
    navigationContainer: {
        zIndex: 1,
        position: 'absolute',
        top: 70,
        left: 25,
    },
});

export default DashboardScreen;

I’ve tried posting this issue on Programming Discord servers, also in some Programming Facebook Groups, but no one can seem to assist me with it.

I really hope someone here can help me with this :confused:

I can provide the screenshot of the Drawer Navigation component if someone wants to see it also.

Thank you!