CODEWITHSUNDEEP
iosreact-nativemapsreact-native-maps
Peter Chappy
Peter Chappy

Reputation: 1179

React Native Maps red outline ios

I'm trying to solve the red border issue with react-native-maps. I've tried all the usual of styling, re-installing/re-linking, and adding airmaps to my xcode project, I'm not trying to use google maps. Any help would be greatly appreciated.

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

import MapView from 'react-native-maps';

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

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
    width: width,
    height: height,
  },
});

export default class Map extends Component {

  render(){
    const { container, map } = styles;
    return(
      <View style={container}>
        <MapView
          style={map}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
          showUserLocation
        />
      </View>
    );
  }

};

Upvotes: 1

Views: 851

Answers (2)

Ben Rawner
Ben Rawner

Reputation: 401

Problem solved.

First, I made sure to exit out of the NPM running in the command prompt (ctrl+C)

Second, I ran File->"Reset Content and Settings" in the simulator, to completely erase any old project files

Third, while the simulator was resetting itself I ran "react-native link" in the command prompt to make sure all links were set up, when this finished running

Fourth, I then recompiled the by running "react-native run-ios" in the command prompt.

Problem solved. This probably happened because there are probably files on the simulator that do not get updated and are only downloaded when the project is first loaded. (I'm probably wrong, but I'm sure an engineer will point that out to me)

Upvotes: 0

Artal
Artal

Reputation: 9143

When you get a red border instead of a component you're trying to use, it means that the library which contains the native view for this component was not linked to your project.

You should follow the installation instructions carefully and see if you didn't miss any steps.

In case you did link the package and you're still getting the red border, it means that you didn't compile the native project after it was linked. You need to build it again for the link changes to take effect.

Upvotes: 2

Related Questions