Fixed a TypeScript Error

[PaitoAnderson]

Fix a bug I found after submitting PR #1601.

I was getting this error:
[TS] Exports and export assignments are not permitted in module augmentations.

Thanks!

[luiseduardobrito]

Also having this issue, waiting for the merge.

[SrikanthKabadi]

Hi @PaitoAnderson @gpeal ,

Getting this exception when I am trying to load MapView from .tsx file.

Same works beautifully if I load it from Javascript(.js) file. Please help.

Unhandled JS Exception: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

// MapComponent.tsx
import MapView from 'react-native-maps'
export class MapComponent extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <MapView
                    style={styles.map}
                    initialRegion={{
                        latitude: 12.934533,
                        longitude: 77.626579,
                        latitudeDelta: 0.0922,
                        longitudeDelta: 0.0421
                    }}
                />
            </View>
        )
    }
}

[luiseduardobrito]

@SrikanthKabadi

Have you tried: import * as MapView from 'react-native-maps?

[SrikanthKabadi]

@luiseduardobrito Brilliant, it worked :) Thank you so much :)

[marcmo]

@PaitoAnderson adding support for typescript is greatly appreciated! To make it easier to use this package with typescript, would you mind adding a little example? I first struggled with the import issue, but I still cannot get my code to typecheck. e.g. I use a Callout with a style attribute, but the typescript definitions do not seem to find it.

error TS2339: Property 'style' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Callout> & Readonly<{ children?: ReactNode; }> & R...'.

or more visible even: where is the definition for PROVIDER_DEFAULT etc.?

error TS2304: Cannot find name 'PROVIDER_DEFAULT'.

having a little example to start with would for sure help the typescript users. For my part I switched back to 0.16.4 since I did not find a quick solution.

[PaitoAnderson]

@marcmo Here is a quick example, looks like I forgot the style property for <MapView.Callout>. I'll do a quick PR to add it, maybe I should just inherit from View props or something. I am surprised it crashes for you though, it just warns me in Visual Studio Code if I use it anyway.

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

const { width, height } = Dimensions.get('window');

const ASPECT_RATIO = width / height;
const LATITUDE_DELTA = 0.25;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
const ZOOM_LEVEL = 1;

interface IMarker {
    Title: string;
    Coordinates: {
        latitude: number;
        longitude: number;
    };
}

interface IProps { navigation: any; }
interface IState { location: IMarker; }

const styles = StyleSheet.create({
    map: {
        flex: 1,
    },
});

class ExampleMap extends React.PureComponent<IProps, IState> {

    private map: any;
    private locationMarker: any;

    constructor(props: IProps) {
        super(props);

        const initialState = {
            location: {
                Coordinates: {
                    latitude: 42.2951067,
                    longitude: -83.0729218,
                },
                Title: 'Hi @marcmo!',
            },
        } as IState;

        this.state = initialState;
    }

    public render() {
        return (<MapView
            provider={'google'}
            ref={(ref: any) => (this.map = ref)}
            style={styles.map}
            showsScale={true}
            loadingEnabled={true}
            showsCompass={true}
            onLayout={this.onLayout.bind(this)}
            mapType={'standard'}>
                <MapView.Marker ref={(ref: any) => (this.locationMarker = ref)}
                    coordinate={this.state.location.Coordinates}>
                    <MapView.Callout>
                        <Text style={{ color: 'blue' }}>{this.state.location.Title}</Text>
                    </MapView.Callout>
                </MapView.Marker>
            </MapView>);
    }

    private onLayout = () => {
        const zoomCoordinates = {
            latitude: this.state.location.Coordinates.latitude,
            latitudeDelta: LATITUDE_DELTA / ZOOM_LEVEL,
            longitude: this.state.location.Coordinates.longitude,
            longitudeDelta: LONGITUDE_DELTA / ZOOM_LEVEL,
        };
        this.map.animateToRegion(zoomCoordinates);

        if (this.locationMarker) {
            this.locationMarker.showCallout();
        }
    }
}

export default ExampleMap;

[marcmo]

super awesome @PaitoAnderson ! I bet this will help others as well.