Problem: I am displaying all the BOOKS imgs using Flatlist that is stored in a google URL. I am using 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 Component here is the code:

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;