Problema: estoy mostrando todas las imágenes de LIBROS usando Flatlist que está almacenada en una URL de Google. Estoy usando expo. Cuando abro la aplicación en un navegador con expo funciona. Pero cuando lo ejecuto en mi teléfono, me muestra un error como se indica a continuación.

Error: error de procesamiento: las cadenas de texto deben representarse dentro de un componente. Aquí está el código:

 import React, { Component } from 'react'; import { Text, View, Image, TextInput, FlatList, SectionList, StyleSheet, Button, } from 'react-native'; class App extends React.Component { constructor() { super(); this.state = { bookName: 'javascript', }; } componentDidMount() { this.fetchApi(); } fetchApi = async () => { let apiKey = 'AIzaSyDxoyfayTuP-hFon-b-nuzGjPdDAbpIPCY'; const response = await fetch('https://www.googleapis.com/books/v1/volumes?q=' + this.state.bookName + '&key=' + apiKey + '&maxResults=5'); const json = await response.json(); this.setState({ data: json.items }); }; render() { return ( <View style={styles.container}> <Text style={{ fontFamily: 'Arial', fontSize: 20, fontWeight: 'bold', fontStyle: 'underline', color: 'yellow', marginTop: -300, }}> <Text>Random Users Data</Text> </Text> <View style={{ width: 210, height: 50, marginTop: 50, justifyContent: 'center', }}> <TextInput style={{ width: 210, height: 45, fontSize: 18, borderWidth: 3, borderRadius: 12, borderColor: 'royalblue', textAlign: 'center', backgroundColor: 'white', }} placeholder="Enter book name" onChangeText={(item) => this.setState.bookName(item)} />{' '} </View> <View> <FlatList data={this.state.data} keyExtractor={(x, i) => i} renderItem={({ item }) => ( <View> <View style={{ marginTop: 200 }}> <Image style={{ width: 128, height: 204, margin: 10 }} source={{ uri: item.volumeInfo.imageLinks.thumbnail }} /> </View> </View> )} /> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'black', }, }); export default App;