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

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>