어플에 render error

Text strings must be rendered within a <Text> component.라고 떠요.

작성한 코드 및 에러 메세지

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


const main = 'https://storage.googleapis.com/sparta-image.appspot.com/lecture/main.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={true}>
        <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>
      
    </ScrollView>
  )
}


const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 30,
    fontWeight: '700',
    marginTop: 50,  
    marginLeft: 20,
  },
  mainImage: {
    width: '90%',
    height: 250,
    borderRadius: 10,
    marginTop: 20,
    alignSelf: "center",  
  },
  middleContainer: {
    height: 60,
    marginTop: 20,
    marginLeft: 10,
  },
  middleButton01: {
    width: 100,
    height: 50,
    padding: 15,
    margin: 7,
    borderRadius: 15,
    backgroundColor: "#fdc453",
  },
  middleButton02: {
    width: 100,
    height: 50,
    padding: 15,
    margin: 7,
    borderRadius: 15,
    backgroundColor: "#fdc453",
  },
  middleButton03: {
    width: 100,
    height: 50,
    padding: 15,
    margin: 7,
    borderRadius: 15,
    backgroundColor: "#fdc453",
  },
  middleButton04: {
    width: 100,
    height: 50,
    padding: 15,
    margin: 7,
    borderRadius: 15,
    backgroundColor: "#fdc453",
  },
  middleButtonText: {
    color: '#fff',
    fontSize: 20,
    fontWeight: '500', 
    textAlign: "center",
  },
})

Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!