react-native error
Warning: React.createElement: type is invalid-expected a string (for built-in components) or a class/function

import React, { Component } from "react";
import {
    AppRegistry,
    TabBarIOS,
    FlatList
    TouchableHighlight,
    Image,
    Dimensions,
    StyleSheet,
    Text,
    View
} from "react-native";
import Icon from "react-native-vector-icons/Ionicons";

const width = Dimensions.get("window").width

class ChatList extends Component{
    constructor(props){
        super(props)
        this.state = {
            data: [
                {
                    "id":"230000201707307019",
                    "thumb":"http://dummyimage.com/600x300/058a9d)",
                    "video":"http://p.you.video.sina.com.cn/swf/opPlayer20180330_V5_1_1_63.swf?v=1523591005626"
                },
                {
                    "id":"150000200110173287",
                    "thumb":"http://dummyimage.com/600x300/3594ad)",
                    "video":"http://p.you.video.sina.com.cn/swf/opPlayer20180330_V5_1_1_63.swf?v=1523591005626"
                }
            ],
        }
    }
    _renderItem = (item, index) => {
        return(
            <TouchableHighlight>
                <View style={styles.item}>
                    <Text style={styles.title}>{item.id}</Text>
                    <Image
                        source={{uri: item.thumb}}
                        style={styles.img}
                    >
                        <Icon
                            name="ios-play"
                            size={25}
                            style={styles.play}
                        />
                    </Image>
                    <View style={styles.itemFooter}>
                        <View style={styles.itemFooterBox}>
                            <Icon
                                name="ios-heart-outline"
                                size={25}
                                style={styles.up}
                            />
                            <Text style={styles.handlerText}></Text>
                        </View>
                        <View style={styles.itemFooterBox}>
                            <Icon
                                name="ios-chatboxes-outline"
                                size={25}
                                style={styles.comment}
                            />
                            <Text style={styles.handlerComment}></Text>
                        </View>
                    </View>
                </View>
            </TouchableHighlight>
        )
    }
    _keyExtractor = (item, index) => index
    render(){
        return(
            <View style={styles.container}>
                <View style={styles.header}>
                    <Text style={styles.headerTitle}>Header</Text>
                </View>
                <FlatList
                    data={this.state.data}
                    renderItem={this._renderItem}
                    keyExtractor={this._keyExtractor}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "-sharpF5FCFF",
    },
    header: {
        paddingTop: 25,
        paddingBottom: 15,
        backgroundColor: "-sharpee735c"
    },
    headerTitle: {
        color: "-sharpfff",
        fontSize: 15,
        fontWeight: "600",
        textAlign: "center"
    },
    item: {
        width: width,
        marginBottom: 10,
        backgroundColor: "-sharpfff"
    },
    title: {
        padding: 10,
        fontSize: 18,
        color: "-sharp333"
    },
    img: {
        width: width,
        height: width * 0.5,
        resizeMode: "cover"
    },
    play: {
        position: "absolute",
        bottom: 14,
        right: 14,
        width: 46,
        height: 46,
        paddingTop: 9,
        paddingLeft: 18,
        backgroundColor: "transparent",
        borderColor: "-sharpfff",
        borderWidth: 1,
        borderRadius: 23,
        color: "-sharped7b66"
    },
    itemFooter: {
        flexDirection: "row",
        justifyContent: "space-between",
        backgroundColor: "-sharpeee"
    },
    itemFooterBox: {
        padding: 10,
        flexDirection: "row",
        width: width / 2 - 0.5,
        justifyContent: "center",
        backgroundColor: "-sharpfff"
    },
    handlerText: {
        color: "-sharp333",
        paddingLeft: 12,
        fontSize: 18
    },
    up: {
        color: "-sharp333",
        fontSize: 22
    },
    handlerComment: {
        color: "-sharp333",
        fontSize: 22
    }
})


export default ChatList

the online answer is if you use
import. From.
use
export default.

if you use
require (".. / xxx")
, replace it with
module.exports = xxx

I find that my code problem doesn"t seem to be here, but I don"t know what went wrong. I always get this error.