Error: Element type is invalid: expected a string (for built-in components) or a class/function but got: undefined on HomeScreen - React native

AldrinBumiltac
April 7, 2023
227 views
2 votes
3 Answers

This is HomeScreen.js

import { StatusBar } from 'expo-status-bar';
import React, { useState,useRef,useEffect } from 'react';
import { StyleSheet,Text,View,Dimensions ,ScrollView,Image,FlatList} from 'react-native';
import { Icon } from 'react-native-elements';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps'; 
import * as Location from 'expo-location';

const SCREEN_WIDTH = Dimensions.get('window').width
import { colors,parameters } from '../global/styles';
import { filterData,carsAround } from '../global/data';
import { mapStyles } from "../global/mapStyle";


const HomeScreen = () => {     

  const [latlng,setLatLng] = useState({})

  const checkPermission =async()=>{
      const hasPermission = await Location.requestForegroundPermissionsAsync();
      if(hasPermission.status === 'granted') {
          const permission = await askPermission();
          return permission
      }
      return true
  };

  const askPermission = async()=>{
      const permission = await Location.requestForegroundPermissionsAsync()
      return permission.status === 'granted';
  };

  const getLocation = async()=>{
      try{
          const {granted} =await Location.requestForegroundPermissionsAsync();
          if(!granted)return;
          const {
              coords:{latitude,longitude},
          } = await Location.getCurrentPositionAsync();
          setLatLng({latitude:latitude,longitude:longitude})
      }catch(err){

      }
  }

  const _map = useRef(1);


  useEffect(()=>{
      checkPermission();
      getLocation()
      // console.log(latlng)
  ,[]})

    return( 
      <View style = {styles.container}>
        <View style = {styles.header}>
          <View style = {styles.icon1}>
              <Icon type = 'material-community'
                    name = "menu"
                    color = {colors.white}
                    size = {40}
              />
          </View>
        </View>
        <ScrollView bounces = {false}>
          <View style = {styles.home}>
              <Text style = {styles.text1}>TransPro destress your commute</Text>
              <View style = {styles.view1}>
                  <View style = {styles.view8}>
                      <Text style = {styles.text2}>Read a book. Take a nap. Stare out the window</Text>
                      <View style = {styles.button1}>
                          <Text style = {styles.button1Text}>Ride with TransPro App</Text>
                      </View>
                  </View>
                  <View>
                      <Image style = {styles.image1} source = {require('../../assets/TransProCar.png')}/>
                  </View>
              </View>
          </View>
          {/* style = {{alignItems:'center',justifyContent:'center'}} */}
          <View>
                  <FlatList 
                      numRows = {4} 
                      horizontal = {true}
                      showsHorizontalScrollIndicator = {false}
                      data = {filterData}
                      keyExtractor = {(item) => item.id}
                      renderItem = {({item}) => (
                          <View style = {styles.card}>
                              <View style = {styles.view2}>
                                  <Image style = {styles.image2} source = {item.image}/>
                              </View>
                              <View>
                                  <Text style = {styles.title}>{item.name}</Text>
                              </View>
                          </View>
                      )}
                  />
          </View>
          <View style = {styles.view3}>
              <Text style = {styles.text3}>Where to ?</Text>
              <View style = {styles.view4}>
                  <Icon type = 'material-community'
                      name = "clock-time-four"
                      color = {colors.grey1}
                      size = {26}
                  />
                  <Text style = {{marginLeft:5}}>Now</Text>
                  <Icon type = 'material-community'
                      name = "chevron-down"
                      color = {colors.grey1}
                      size = {26}
                  />
              </View>
          </View>
          <View style = {styles.view5}>
              <View style = {styles.view6}>
                  <View style = {styles.view7}>
                      <Icon type = 'material-community'
                          name = "map-marker"
                          color = {colors.black}
                          size = {22}
                      />
                  </View>
                      <View>
                          <Text style = {{fontSize:18,color:colors.black}}>19 Saint Theresa</Text>
                          <Text style = {{color:colors.grey3}}>Barangay 179 Maricaban Pasay City</Text>
                      </View>
              </View>
              <View>
              <Icon type = 'material-community'
                          name = "chevron-right"
                          color = {colors.grey}
                          size = {26}
                      />
              </View>
          </View>
          <View style = {{...styles.view5,borderBottomWidth:0}}>
              <View style = {styles.view6}>
                  <View style = {styles.view7}>
                      <Icon type = 'material-community'
                          name = "map-marker"
                          color = {colors.black}
                          size = {22}
                      />
                  </View>
                      <View>
                          <Text style = {{fontSize:18,color:colors.black}}>1 Ilang-ilang St.Peter</Text>
                          <Text style = {{color:colors.grey3}}>Barangay 184 Maricaban Pasay City</Text>
                      </View>
              </View>
              <View>
                  <Icon type = 'material-community'
                              name = "chevron-right"
                              color = {colors.grey}
                              size = {26}
                  />
              </View>
          </View>

          <Text style = {styles.text4}> EXPLORE</Text>

          <View style = {{alignItems:"center",justifyContent:"center"}}>
              <MapView
                  ref= {_map}
                  provider = {PROVIDER_GOOGLE}
                  style = {styles.map}
                  customMapStyle = {mapStyles}
                  showsUserLocation = {true}
                  followsUserLocation = {true}
                  rotateEnabled = {true}
                  zoomEnabled = {true}
                  toolbarEnabled = {true}
              >
                {
                  carsAround.map((item,index) =>
                  <MapView.Marker coordinate = {item} key = {index.toString()}>
                    <Image
                      source = {require('../../assets/carMarker.png')}
                      style = {styles.carsAround}
                      resizeMode = "cover"
                    />
                  </MapView.Marker>
                  )
                }
              
              </MapView>

          </View>
        </ScrollView>
        <StatusBar style = "light" backgroundColor = "#2058c0" translucent = {true} />
      

      </View>
      
    );

};

export default HomeScreen;

This is App.js

import React from 'react';
import { StyleSheet, View,  } from 'react-native'
import { colors, parameters } from './src/global/styles'
import HomeScreen from './src/screens/HomeScreen';

const App = () => {
  return(
    <View style={styles.container}>
      <HomeScreen/>
    </View>
  )
} 

export default App 

const styles = StyleSheet.create({

  container: {
    flex: 1,
    backgroundColor:colors.white,
    paddingBottom: 30
  }

})

export default App

This is the error I’m getting at

Error: 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, or you might have mixed up default and named imports.

Check the render method of `HomeScreen`.

Tags: android reactjs

Answers

- Mee
- April 7, 2023 at 7:25 am
- 0 votes
0
In HomeScreen.js, add export in the end.
```
  const HomeScreen = () => {
    something...
  }
+ export default HomeScreen
```
Login or Signup to reply.

- inkredusk
- April 7, 2023 at 7:34 am
- 0 votes
0
You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

As this error indicates that you are not indicating whether you are using a default or a named import.

Let me first explain you the concepts of default and named exports.

Export Default

The export default syntax allows you to export a single value from a module as the default export. When another module imports the module that uses export default, the imported value will be whatever value was exported as the default. You can only have one default export per module.

Here’s an example of using export default to export a greeting message:
```
// greetings.js
const greeting = "Hello, world!";
export default greeting;
```
and you can import it as follows:
```
// app.js
import greeting from "./greetings.js";
console.log(greeting); // outputs "Hello, world!"
```
Export with Named Exports

The export syntax with named exports allows you to export multiple values from a module using named exports. When another module imports the module that uses named exports, the imported values will be an object with the exported values as properties.

Here’s an example of using export with named exports to export both a greeting and a farewell message:
```
// greetings.js
export const greeting = "Hello, world!";
export const farewell = "Goodbye, world!";
```
And here’s an example of importing the named exports from another module:
```
// app.js
import { greeting, farewell } from "./greetings.js";
console.log(greeting); // outputs "Hello, world!"
console.log(farewell); // outputs "Goodbye, world!"
```
Hope that helps in understanding the difference between default and named imports.
Login or Signup to reply.

- BalaVigness
- April 7, 2023 at 8:44 am
- 0 votes
0
You haven’t exported your HomeScreen.
Just add this in your HomeScreen.js
expot default HomeScreen;
At the end of your HomeScreen.js. And your code will run smoothly
Login or Signup to reply.