Invariant Violation react native - react-native

Question

I have this error in my application:
Invariant Violation: 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, or you might have mixed
up default and named imports.
I don't know why this happens to me, becouse I don't see any problems. Look at my screen code:
import React, { Component } from 'react';
import { Text, View,StyleSheet,TouchableOpacity,TextInput,FlatList,ListItem } from 'react-native';
import { Alert,Input } from 'native-base';
import {BoxShadow} from 'react-native-shadow';
import Dimensions from 'Dimensions';
import Icon from 'native-base';
const DEVICE_WIDTH = Dimensions.get('window').width;
export default class ticketDiaryHours1 extends Component {
constructor(props) {
super(props);
this.state = {
text: '',
textOpombe: '',
data: [
{key: 'Devin Dank'},
{key: 'Jackson Will'},
{key: 'James Jones'},
{key: 'Joel Noah'},
{key: 'John Degenkolb'},
{key: 'Jillian Calmejain'},
{key: 'Jimmy Butler'},
{key: 'Julie Hell'},
],
showList: false,
}
}
onShowStudent() {
if(this.state.showList) {
this.setState({
showList: false,
});
} else {
this.setState({
showList: true,
});
}
}
render() {
const shadowOpt = {
height:40,
width: DEVICE_WIDTH-40,
color:"#000",
border:2,
radius:8,
opacity:0.2,
x:0,
y:3,
style:{marginVertical:3}
};
const {
student,
startTime,
endTime,
headingText,
roomText,
apsent,
finished
} = this.props;
return (
<View style={styles.main}>
<Text>{startTime} - {endTime}</Text>
<Text style={styles.headingText}>{headingText} - {student}</Text>
<Text style={styles.hourContent}>VSEBINA URE </Text>
<BoxShadow setting={shadowOpt}>
<TextInput
style={styles.textInputStyle}
placeholder='Vnesite vsebino ure'
placeholderTextColor="rgba(0,0,0,0.5)"
onChangeText={(text) => this.setState({text})}
value={this.state.text}
underlineColorAndroid='transparent'
/>
</BoxShadow>
<Text style={styles.hourContent}>OPOMBE </Text>
<BoxShadow setting={shadowOpt}>
<TextInput
style={styles.textInputStyle}
placeholder='Vnesite opombe'
placeholderTextColor="rgba(0,0,0,0.5)"
onChangeText={(textOpombe) => this.setState({textOpombe})}
value={this.state.textOpombe}
underlineColorAndroid='transparent'
/>
</BoxShadow>
<View style={styles.markedRow}>
<View style={{flexDirection: 'column', justifyContent: 'center', justifyContent: 'flex-start' }}>
<Text style={styles.textIcon}>OPRAVLJENO</Text>
<TouchableOpacity
style={ [styles.touchable1, styles.iconStyle] }
onPress={this.onShowStudent.bind(this)}>
<Icon name='checkmark' style={{color: '#fff', fontSize: 20, alignSelf: 'center' }}/>
</TouchableOpacity>
</View>
<View style={{flexDirection: 'column', justifyContent: 'center', position: 'absolute', right: 0, top: 15 }}>
<Text style={styles.textIcon}>NEOPRAVLJENO</Text>
<TouchableOpacity
style={ [styles.touchable2, styles.iconStyle] }
onPress={this.onShowStudent.bind(this)}>
<Icon name='close'
style={{color: '#fff', fontSize: 20,alignSelf: 'center'}} />
</TouchableOpacity>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
main: {
paddingLeft: 20,
paddingRight: 20,
flexDirection: 'column',
paddingTop: 15
},
headingText: {
fontWeight: '400',
color: '#000000',
fontSize: 20,
},
hourContent: {
fontWeight: '400',
color: '#000000',
fontSize: 20,
paddingBottom: 15,
paddingTop: 15,
},
textInputStyle: {
backgroundColor: 'white',
paddingLeft: 10,
height: 40,
borderRadius: 8,
width: DEVICE_WIDTH-40,
},
markedRow: {
flexDirection: 'row',
paddingTop: 15,
},
touchable1: {
backgroundColor: '#48BFD3',
justifyContent: 'center',
},
touchable2: {
backgroundColor: '#EE9CA0',
justifyContent: 'center',
},
iconStyle: {
borderRadius: 8,
width: 50,
height: 40,
alignSelf: 'center',
},
textIcon: {
paddingBottom: 10,
fontWeight: '400',
color: '#000000',
fontSize: 20,
},
listItemStyle: {
flexDirection: 'row',
}
});

Answer 1

That is an issue with your import. try import {Icon} from 'native-base';. This is a member import (named import). Member imports are exported with export... and not export default ...