Element type is invalid. Expected string

Question

When I try this code it shows this strange error. And most interesting part is that there was not any change in render method. It worked perfectly unless I add mapvew inside the view. Here is the code:

import React, {Component} from "react";
import {View, Image, MapView} from "react-native";
import {
  Container,
  Header,
  Content,
  Footer,
  FooterTab,
  Button,
  Icon,
  Text,
  Left,
  Right,
  Body,
  Title,
  Thumbnail,
  Grid,
  Row,
  Col,

} from "native-base";

import  typographystyles  from '../styles/typographystyles'; 
import { primary, secondary } from '../styles/variables';
class PostScreen extends Component {

  render() {
    return (
      <Container style={styles.container}>

        <Content>


        <View>  
              <Grid>
              <Row>
       <Col style={styles.col} >

        <Text style={typographystyles.heading1}> Jennifer </Text>
        <Text style={{marginTop:-20, fontSize:16, marginLeft:15}}> Vew and Edit Profile </Text>
       </Col>
<Col style={styles.col}>       
        <Thumbnail style={{marginTop:20}} source={require("../img/profile2.jpg")}/ >
     </Col> 
     </Row>
     </Grid>       

       </View>
       <View style={{marginLeft:15, marginBottom:20}}>
       <Text style={{marginTop:10,marginBottom:10, fontSize:18}}> 90 EUR per night </Text>


           </View>
           <Text style={{marginLeft:5, marginRight:5}}>
           Lorem ipsum dolor sit amet, eum iisque accommodare cu, ex enim eligendi appareat nec. Magna quando aliquid mel ea, exerci nonumes maiestatis eum ei, harum possim sed ut. Mea omnis bonorum posidonium ne, pri ne illud suavitate assentior. His choro numquam ad, mei te integre vituperatoribus. An vim nobis similique theophrastus, mazim mandamus assentior pro id.

Ad bonorum senserit postulant eum, quo et virtute feugiat. Reque laudem referrentur ex mei. Eu vel dico sonet iudicabit. Eos et falli fabulas, eam quis timeam voluptatum ea. Nullam persequeris ne nec. Reque error vivendum sit id, te sit partem aeterno feugait.
</Text>
<View style={{flex: 1}}>
<MapView
  style={styles.map}
  showsUserLocation={true}/>
</View>
                </Content>


      </Container>
    );
  }
}

const styles = {
  img: {
height:200,
width: null,
flex:1,
  },

col:{
  marginTop:30,
  justifyContent: "center",
alignItems: "center",
},
 map:{
    flex:1
  },

}

export default PostScreen;

What is wrong with this code? How can it be fixed? As I said it was caused only after trying to add mapvew.

Thanks in advance :)

score 2 · Answer 1 · answered Jun 06 '18 at 09:51

2

MapView component is not present in react-native sdk.

You must install it from Here

Or, if you created your app with expo, just import it with import { MapView } from 'expo'; as mentionned here

answered Jun 06 '18 at 09:51

Poptocrack

2,879
1
12
28

I used an example which you adviced. Error disappeared but I don't see map itself. It shows just a white screen. – NewTech Lover Jun 07 '18 at 07:32
Since you got another issue, please mark this thread as resolved. For you new problem, if you use expo you might wanna add `flex: 1` in the `MapView` style prop. If you do not use it, you might wanna check the api key according to the MapView github documentation – Poptocrack Jun 07 '18 at 07:38

Element type is invalid. Expected string

1 Answers1