Porque o react necessita de um objeto vazio para renderizar informações da FlatList

é necessário informar o valor inicial, se você não quer renderizar, a menos que tenha dados, é só fazer:

 this.data = [];

	e então:

return data.length && (
 <FlatList

Boa tarde Wiliam. Penso que não dei a explicação correta. Não entendi muito bem o que você quis dizer mas obrigado. Vou tentar refazer a pergunta pois este é meu tcc.

Estou fazendo uma consulta a uma api que eu mesmo fiz (esta parte acho que tu entendeu). Este é  um componente que faz uma simples busca por um touro na API (server side). Não sou muito familiarizado com front-end por isso estou tendo dificuldades na hora de exibir a informação. Já procurei no Youtube mas nada. Para fazer a busca estou utilizando o fetch que até então estava tranquilo. Na parte de exibição dos dados estou utilizando o FlatList. Quando faço daquela forma ele está renderizando porem o objeto que é inicializado também, ocupando o espaço. Gostaria de sabe se tem outra forma de fazer isso. Segue o novo código

import React, { Component } from 'react';
import { Text, Button, View, TextInput, Alert, StyleSheet, FlatList, SafeAreaView } from 'react-native';
import Styles from '../../components/Styles';
import { urlServer } from '../../config/constant';

export default class Fetch extends Component {

constructor() {

 super();
 this.data = [{}];
 }

 componentDidMount(id=1) {
 let urlQuery = '/animal/bull/getBull'
 if (id != null) {
 urlQuery = '/animal/bull/getBull/'+id;
 }

 fetch(urlServer+urlQuery)
 .then(response => response.json())
 .catch(erro => alert('Erro ao pesquisar'))
 .then(response => {
 if (id != null) {
 this.data.push(response);
 } else {
 for (const iterator in response) {
 this.data.push(response[iterator]);
 }
 }
 console.log(this.data);
 });

 }

 render() {

 let styles = StyleSheet.create({
 text: {
 fontSize: 20,
 },
 });

 return (
 <FlatList
 data={this.data}
 renderItem={ ({item}) => (
 <>
 <Text style={styles.text}>Id: {item.idEarring}</Text>
 <Text style={styles.text}>Name: {item.name}</Text>
 <Text style={styles.text}>Breed: {item.breed}</Text>
 <Text style={styles.text}>Date of Birth: {item.dateOfBirth}</Text>
 <Text style={styles.text}>Weigth: {item.weigth}</Text>
 <Text/>
 </>
 )}
 />
 );
 }
}

	Repositório, se por um acaso facilitar: [https://github.com/alvarengacarlos/miruku-app/tree/dev](https://github.com/alvarengacarlos/miruku-app/tree/dev)

Fiz uma busca e encontrei um video gringo no youtube que mostra. Segue código. O único detalhe é que ele fica lançando uns Warns sem parar, ou seja, está fazendo buscas na api mesmo após obter os resultados

import React, { Component, useEffect, useState } from 'react';
import { Text, FlatList, SafeAreaView, ActivityIndicator } from 'react-native';
import Styles from '../../components/Styles';
import { urlServer } from '../../config/constant';

const Fetch = () => {
 let urlQuery = '/animal/bull/getBull'

 const [data, setData] = useState([]);

 useEffect( () => {
 fetch(urlServer+urlQuery)
 .then(response => response.json())
 .then(response => setData(response))
 .catch(error => alert('Erro ao pesquisar:'+ error));
 });

 return (
 <>
 <FlatList
 data={data}
 renderItem={({ item }) => (
 <Text>{item.idEarring}, {item.name}, {item.breed}, {item.weigth}</Text>
 )}/>
 </>

 );
};

export default Fetch;

	![imagem](https://forum.imasters.com.br/monthly_2021_02/476307594_Capturadetelade2021-02-0119-53-02.png.963aee975f54fa8b77c683dfaf4e57ca.png)

Se alguém tiver o mesmo problema. consertei utilizando Hulcks.

import React, { Component, useEffect, useState } from 'react';
import { Text, FlatList, SafeAreaView, ActivityIndicator, View, Button, TextInput } from 'react-native';
import Styles from '../../components/Styles';
import { urlServer } from '../../config/constant';

const Fetch = ({id}) => {
 let urlQuery = '/animal/bull/getBull/';

 if (id != null)
 urlQuery = '/animal/bull/getBull/'+id;

 const [data, setData] = useState([]);
 const [value, setValue] = useState(false);
 const [limit, setLimit] = useState(false);

 useEffect( () => {
 if (limit != false) {
 fetch(urlServer+urlQuery)
 .then(response => response.json())
 .then(response => {
 if (id == null)
 setData(response);
 else
 setData([response]);
 })
 .catch(error => alert('Erro ao pesquisar:'+ error));
 }
 setLimit(false);
 });

 const set = () => {
 setValue(true);
 setLimit(true);
 };

 return (

 <View style={Styles.base}>
 <View style={Styles.alineXCenterYCenter}>
 <Text style={{paddingTop:0, fontSize: 30, color: 'ivory', textAlign: 'center'}}>Search Bull</Text>
 <TextInput style={Styles.textInput} placeholder='Earring'></TextInput>
 <Button
 title=' Search '
 color='gray'
 onPress={() => {set()}}
 />
 </View>
 {value ?
 <View style={{flex: 2}}>
 <FlatList
 data={data}
 keyExtractor={}
 renderItem={({ item }) => (
 <Text>{item.idEarring}, {item.name}, {item.breed}, {item.weight}, {item.dateOfBirth}</Text>
 )}/>
 </View>
 : false}
 </View>
 );
};

export default Fetch;