Error: Element type is invalid with Check the render method in React Native

Question

I got this Error trying to use this Component .

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 Toolbar .

Here's the code:

 import React, {useState} from 'react'; import {View, TouchableWithoutFeedback, TouchableOpacity} from 'react-native'; import {RNCamera} from 'react-native-camera'; import {Ionicons} from 'react-native-vector-icons/Ionicons'; import {Col, Row, Grid} from 'react-native-easy-grid'; import styles from './styles'; const Toolbar = () =>{ const { FlashMode: CameraFlashModes, Type: CameraTypes } = RNCamera.Constants; const [capturing, setCapturing] = useState(false); const [cameraType, setCameraType] = useState(RNCamera.Constants.Type.back); const [flashMode, setFlashMode] = useState(RNCamera.Constants.Type.off); const onCaptureIn = (''); const onCaptureOut = (''); const onLongCapture = (''); const onShortCapture = (''); return ( <Grid style={styles.bottomToolbar}> <Row> <Col style={styles.alignCenter}> <TouchableOpacity onPress={() => setFlashMode( flashMode === CameraFlashModes.on? CameraFlashModes.off: CameraFlashModes.on )}> <Ionicons name={flashMode == CameraFlashModes.on? "md-flash": 'md-flash-off'} color="white" size={30} /> </TouchableOpacity> </Col> <Col size={2} style={styles.alignCenter}> <TouchableWithoutFeedback onPressIn={onCaptureIn} onPressOut={onCaptureOut} onLongPress={onLongCapture} onPress={onShortCapture}> <View style={[styles.captureBtn, capturing && styles.captureBtnActive]}> {capturing && <View style={styles.captureBtnInternal} />} </View> </TouchableWithoutFeedback> </Col> <Col style={styles.alignCenter}> <TouchableOpacity onPress={() => setCameraType( cameraType === CameraTypes.back? CameraTypes.front: CameraTypes.back )}> <Ionicons name="md-reverse-camera" color="white" size={30} /> </TouchableOpacity> </Col> </Row> </Grid> ); }; export default Toolbar;

I don't know what am doing wrong

Answer 1

Your icon import is wrong, its exported as default component

Change this

import {Ionicons} from 'react-native-vector-icons/Ionicons';

To

import Ionicons from 'react-native-vector-icons/Ionicons';

Whenever you see this error, check the imports in a given file, it more likely you mistook default export with named export.