Render Error : Text strings must be rendered within a <Text> Component - react-native

Question

I am developing a PDF viewer app.
Problem: I am displaying all the PDF's using Flatlist that is stored in a Firebase database. I am using react-native expo. When I open the application in a browser with expo it works. But when I run it on my phone it shows me an error as given below.
Error: Render Error : Text strings must be rendered within a <Text> Component
import React,{useEffect, useState} from "react";
import { FlatList, Text, StyleSheet, TouchableOpacity, View} from
"react-native";
import { config } from "../firebaseconfig";
import { getDatabase, ref ,onValue } from "firebase/database";
import { initializeApp } from "firebase/app";
const app = initializeApp(config);
function Books({navigation}) {
const [value ,setValue] = useState([]);
function readFunction() {
const db = getDatabase(app);
const reference = ref(db, "Books");
onValue(reference, (snapshot) => {
var main = [];
snapshot.forEach((childSnapshot) => {
const childKey = childSnapshot.key;
const childData = childSnapshot.val();
main.push({
title: childKey,
key:childData
});
});
setValue(main);
})
}
useEffect(() => {
readFunction()
},[]);
function renderItem({item}){
const path = item.key;
return (
<View style={styles.container}>
<View style={styles.square}>
<Text style={styles.h1}>{item.title}</Text>
<TouchableOpacity style={styles.button} onPress={() => navigation.navigate('Document', {path})}>Read</TouchableOpacity>
</View>
</View>
)
};
return (
<FlatList
data={value}
renderItem={renderItem}
keyExtractor={item => item.key}
/>
)
}
const styles = StyleSheet.create({
container:{
display: 'flex',
paddingLeft: '30px',
paddingRight:'30px',
paddingTop:'20px',
paddingBottom:'10px'
},
square:{
backgroundColor: 'white',
borderRadius: 4,
padding: '30px',
shadowColor: 'black',
shadowRadius: 10,
shadowOpacity: 1,
},
h1:{
textAlign: 'left',
fontFamily: 'Merriweather',
fontSize: 30,
},
p: {
textAlign: 'justify',
fontFamily: 'Open Sans',
fontSize: 15,
color: '#C8C8C8',
lineHeight: 18,
},
button: {
backgroundColor: '#3EDD84',
color: 'white',
width: '90px',
borderRadius: 3,
textAlign: 'center',
display: 'flex',
marginTop: '15px',
marginRight: '70px',
lineHeight:30,
fontSize: 25,
fontFamily: 'merriweather',
}
});
export default Books;

Answer 1

Try Doing this same
<View style={styles.container}>
<View style={styles.square}>
<Text style={styles.h1}>{item.title}</Text>
<TouchableOpacity style={styles.button} onPress={() => navigation.navigate('Document', {path})}>
<Text>Read</Text>
</TouchableOpacity>
</View>

Answer 2

You can't add Text inside TouchableOpacity component
Do this:
<TouchableOpacity style={styles.button} onPress={() => navigation.navigate('Document', {path})}>
<Text>Read</Text>
</TouchableOpacity>

Answer 3

I think the word Read between the TouchableOpacity tags should be within Text tags.