React Native, Element type is invalid expected a string

I am new to React native and I am trying to build a simple tic tac toe app. Everything worked but when I added this code the program would throw an Element type is invalid: expected a string (for-built-in components)

Here is where the problem is

    import React, { Component } from 'react'import { StyleSheet, Text, View,TouchableWithoutFeedback } from 'react-native';import {CENTER_POINTS,AREA} from './gameConstants';import {Cross} from './cross';const styles = StyleSheet.create({    container: {      flex: 1,      backgroundColor: '#fff',        alignItems:"center"    },    player:{        fontSize:30    },    line: {        position: 'absolute',        width: 3,        height: 306,        backgroundColor: '#000',        transform: [          {translateX: 100}        ]      },      board: {        width: 312,        height: 312,        borderWidth: 3,        borderColor: '#000'      }   });export default class Board extends Component{    constructor(){        super()        this.state={            board:[[1,0,0],[0,0,0],[0,0,0]],            result:0,            player:1        };    }    render(){        let {player}=this.state;        let {board}=this.state;        let arr=[]        let key=0;        for(let y=0;y<3;y++){            for(let x=0;x<3;x++){                if(board[y][x]==1){                   arr.push(<Cross key={key} xTranslate={CENTER_POINTS[key].x} yTranslate={CENTER_POINTS[key].y} />)                }                key+=1;            }                   }        return (<View style={styles.container}>                {                    player==1 ?(<Text style={styles.player}>Player 1</Text>                               ):(<Text style={styles.player}>Player 2</Text>                    )                }<TouchableWithoutFeedback><View style={styles.board}><View style={styles.line} /><View                style={[styles.line, {                    width: 3,                    height: 306,                    transform: [                    {translateX: 200}                    ]                }]}            /><View              style={[styles.line, {                width: 306,                height: 3,                transform: [                  {translateY: 100}                ]              }]}            /><View              style={[styles.line, {                width: 306,                height: 3,                transform: [                  {translateY: 200}                ]              }]}            />            { arr }</View></TouchableWithoutFeedback></View>        )    }}

After I added this code it threw the error can anyone help me out?

Here is Cross

    import React, { Component } from 'react'import {  StyleSheet,  Text,  View} from 'react-native'export default class Cross extends Component {  render() {    const { xTranslate, yTranslate, color } = this.props    return (<View style={[styles.container, {        transform: [          {translateX: (xTranslate ? xTranslate : 10) + 35},          {translateY: (yTranslate ? yTranslate : 10) - 12},        ]      }]}><View style={[styles.line, {          transform: [            {rotate: '45deg'},          ],          backgroundColor: color ? color : '#000'        }]} /><View style={[styles.line, {          transform: [            {rotate: '135deg'},          ],          backgroundColor: color ? color : '#000'        }]} /></View>    )  }}const styles = StyleSheet.create({  container: {    position: 'absolute',    width: 80,    height: 80,  },  line: {    position: 'absolute',    width: 8,    height: 105,  },})