Text strings must be rendered within a component

Изучаю react native, подключаю axios, получаю данные, подставляю в <Text>{данные}</Text> и при рендеринге на android устройстве вылетает ошибка

import { StatusBar } from 'expo-status-bar'
import { StyleSheet, Text, View } from 'react-native'
import React, { useEffect, useState } from 'react'
import axios from 'axios'

export default function App() {
  const [posts, setPosts] = useState([])

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios('http://timetable.na4u.ru/posts/get.php')
      setPosts(result.data)
    }
    fetchData()
  }, [])

  let res = posts.map(function (item) {
    return (
      <div key={item.id}>
        <span>{item.title}</span>
      </div>
    )
  })

  return (
    <View style={styles.container}>
      <Text style={styles.text}>{res}</Text>
      <StatusBar hidden style="auto" />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#333333',
  },
  text: {
    fontSize: 24,
    color: 'purple',
  },
})

Но в веб версии нет никаких ошибок. С чем это может быть связано?