* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

아래와 같이 코딩한 내용을 EXPO로 확인해는데 뜨지 않습니다. 문제의 원인을 알고 싶습니다.  

import React from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';
const main = 'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F0Y3Wp%2FbtrSJEjYLjQ%2Fg4oY5jDPTOi1nv6arGQkKk%2Fimg.png'

export default function App() {
  return (
    <ScrollView style={styles.container}>
      <Text style={styles.title}> 하트야 놀자 </Text>
      <Image style={styles.mainImage} source={{uri:main}}/>
      <ScrollView style={styles.middleContainer} horizontal indicatorStyle={"white"}>
        <TouchableOpacity style={styles.middleButton01}><Text style={styles.middleButtonText}>취미🌱</Text> </TouchableOpacity>
        <TouchableOpacity style={styles.middleButton02}><Text style={styles.middleButtonText}>좋아하는 음식🌰</Text> </TouchableOpacity>
        <TouchableOpacity style={styles.middleButton03}><Text style={styles.middleButtonText}>몸무게</Text> </TouchableOpacity>
        <TouchableOpacity style={styles.middleButton04}><Text style={styles.middleButtonText}>나이👶</Text> </TouchableOpacity>
    </ScrollView>
    <View style={styles.cardContainer}>
      <View style={styles.card}>
        <Image style={styles.cardImage} source={{uri:'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbiez4l%2FbtrTmY9RBj1%2FFmIARpFG9kOG2f0VWQjjtk%2Fimg.jpg'}}/>
        <View style={styles.cardText}>
         <Text style={styles.cardTitle}>충격! 하트의 비밀 전격 공개 </Text>
         <Text style={styles.cardDesc} numberOfLines={4}>강아지인줄만 알았던 하트! 사실 그녀에게는 충격적인 비밀이 있는데, 바로... 그녀는 강아지가 아니라 곰인형이라는 사실! 자세한 내용이 궁금하다면</Text>
         <Text style={styles.cardDate}>2022.12.17</Text>
        </View>
      </View>
    </View>
    </ScrollView>
  );
}
const styles = StyleSheet.create({
  container:{
    backgroundColor:"#F6CED8",
    },
  title: {
    fontSize: 20,
    fontWeight: '700',
    marginTop:50,
    marginLeft:20
  },
  MainImage: {
    width:'90%',
    height:200,
    borderRadius:10, 
    marginTop:20,
    alighSelf:"center"
  },
  middleContainer:{
    marginTop:20,
    marginleft:10,
    height:60
  },
  middleButton01: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#fdc453",
    borderColor:"deeppink",
    borderRadius:15,
    margin:7
  },
  middleButton02: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#fe8d6f",
    borderRadius:15,
    margin:7
  },
  middleButton03: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#9adbc5",
    borderRadius:15,
    margin:7
  },
  middleButton04: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#f886a8",
    borderRadius:15,
    margin:7
  },
  middleButtonText: {
    color:"#fff",
    fontWeight:"700",
    //텍스트의 현재 위치에서의 정렬 
    textAlign:"center"
  },
  cardContainer: {
    marginTop:10,
    marginLeft:10
  },
  card:{
    flex:1,
    flexDirection:"row",
    margin:10,
    borderBottomWidth:0.5,
    borderBottomColor:"#eee",
    paddingBottom:10

  },
  cardImage: {
    flex:1,
    width:100,
    height:100,
    borderRadius:10,
  },
  cardText: {
    flex:2,
    flexDirection:"column",
    marginLeft:10,
  },
  cardTitle: {
    fontSize:20,
    fontWeight:"700"
  },
  cardDesc: {
    fontSize:15
  },
  cardDate: {
    fontSize:10,
    color:"#A6A6A6",
  }
});

작성한 코드 및 에러 메세지

Error: Text strings must be rendered within a <Text> component.

This error is located at:
  in RCTView (created by View)
  in View (created by AnimatedComponent)
  in AnimatedComponent
  in AnimatedComponentWrapper (created by TouchableOpacity)
  in TouchableOpacity (created by TouchableOpacity)
  in TouchableOpacity (created by App)
  in RCTScrollContentView (created by ScrollView)
  in RCTScrollView (created by ScrollView)
  in ScrollView (created by ScrollView)
  in ScrollView (created by App)
  in RCTScrollContentView (created by ScrollView)
  in RCTScrollView (created by ScrollView)
  in ScrollView (created by ScrollView)
  in ScrollView (created by App)
  in App (created by withDevTools(App))
  in withDevTools(App)
  in RCTView (created by View)
  in View (created by AppContainer)
  in RCTView (created by View)
  in View (created by AppContainer)
  in AppContainer
  in main(RootComponent)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:95:17 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:141:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:39 in handleError
at node_modules/expo/build/errors/ExpoErrorManager.js:25:19 in errorHandler
at node_modules/expo/build/errors/ExpoErrorManager.js:30:24 in <anonymous>
at node_modules/@react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError