Make sure the Component is starting with the uppercase - React Native

Question

I’m trying to load Google Maps into a project with React Native and TypeScript but it is returning me the error that the Component shall be started with a capital letter:

Error: Invariant Violation: View config getter callback for Component div must be a Function (Received undefined). Make sure to start Component Names with a capital city.

The point is that the Component is capitalized...

And the error on line 36 is pointed out:

Follows code:

import React from 'react';
import { View, Text, StyleSheet} from 'react-native';



import {
    GoogleMap, 
    Polyline
} from '@react-google-maps/api';

var refMap = React.createRef();

const state = {

    origin: { 
        latitude: -20.6541912, 
        longitude: -45.2418339 
    },
    destination: {
        latitude: -22.6268954, 
        longitude: -44.7512302 },
    originText: '',
    destinationText: '',
    zoom: 13,
    latCenter:-20.525678,
    longCenter:-44.325637

 };

const DetailMaps = () => {

     return(
        <View>
            <GoogleMap
                id="mapaGoogle"
                mapContainerStyle={{
                    height: '100%',
                    width: '100%',
                    position: 'absolute'
                }}
                zoom={state.zoom}
          
                center={{
                    lat: state.latCenter,
                    lng: state.longCenter
                }}
            >
            </GoogleMap>
        </View>
    );
}

;

Answer 1

Hello, This problem is occurring because you are trying to enter a React instead of a React-Native, which means that within this Component there is html content that is not allowed within a React-Native project. I recommend you use the library: React-Native-maps