로딩페이지를 만들고 있는데 에러가 떠서 질문드립니다.

혹시 코드에 어떤점이 틀렸을까요??ㅠ

*Loding.js는 실행이 잘 됩니다.

작성한 코드 및 에러 메세지

<components - Loding 코드>

import React from 'react';
import {View,Image,StyleSheet} from 'react-native';


export default function Loading(){
    return(
    <View style={styles.container}>
   <Image
   source={require('poongenan-app/Image/loading.jpg')}/>
 </View>
    )}



    const styles = StyleSheet.create({
      container: {
      flex: 1,
      backgroundColor: '#fff',
      justifyContent:"center",
      alignContent:"center"
      },      
})

<MainPage에 사용할 코드 *현재는 일단 app.js에 입력함>

import React from 'react';
import { StyleSheet, Text, ScrollView, TouchableOpacity, View, Image} from 'react-native';


import data from './data.json';
import Card from './components/Card';
import Loading from './components/Loading';



export default function App() {


  const [state,setState] = useState([])


  //컴포넌트에 상태를 여러개 만들어도 됨
//관리할 상태이름과 함수는 자유자재로 정의할 수 있음
//초기 상태값으로 리스트, 참거짓형, 딕셔너리, 숫자, 문자 등등 다양하게 들어갈 수 있음.
const [ready,setReady] = useState(true)


  useEffect(()=>{
    //뒤의 1000 숫자는 1초를 뜻함
    //1초 뒤에 실행되는 코드들이 담겨 있는 함수
    setTimeout(()=>{
    setState(data)
    setReady(false)
    },1000)
    },[])
    


  return  ready ? <Loading/> : (
    <ScrollView style={styles.container}>
    <Text>메인페이지</Text>
    </ScrollView>
  )
}



const styles = StyleSheet.create({
  container: {
backgroundColor:'#fff',
  },



})