Неизменяемое нарушение: текстовые строки должны отображаться в компоненте <Text>при использовании flatList

Question

Я использую плоский список для отображения данных, поступающих из unspla sh api. Но здесь он продолжает жаловаться, говоря это

Неизменяемое нарушение: текстовые строки должны отображаться внутри компонента

Я даже не использую какой-либо текстовый компонент. Понятия не имею, что здесь не так.

Приложение. js

export default function App() {
  const [loading, setLoading] = useState(true);
  const [image, setImage] = useState([]);
  const {height, width} = Dimensions.get('window');


  const URL = `https://api.unsplash.com/photos/random?count=30&client_id=${ACCESS_KEY}`;
  useEffect(() => {
    loadWallpapers();
  }, [])


  const loadWallpapers =() =>  {
    axios.get(URL)
    .then((res) => {

      setImage(res.data);
      setLoading(false);
    }).catch((err) => {
      console.log(err)
    }).finally(() => {
      console.log('request completed')
    })
  } 
  const renderItem = (image) => {
    console.log('renderItem', image);
    return (
      <View style={{height, width}}>
        <Image 
        style={{flex: 1, height: null, width: null}} 
        source={{uri : image.urls.regular}}/>

      </View>
    )
  }
  return loading ? (
    <View style={{flex: 1, backgroundColor: 'black', justifyContent: 'center',alignItems: 'center'}}>
      <ActivityIndicator size={'large'} color="grey"/>
    </View>
  ): (
    <SafeAreaView style={{flex: 1, backgroundColor: 'black'}}>
      <FlatList
        horizontal
        pagingEnabled
        data={image}
        renderItem={({ item }) => renderItem(item)} />}
      />
    </SafeAreaView>
  )
}

Answer 1

Мне нужно было сделать что-то вроде этого, чтобы это работало.

const renderItem = ({ item }) => {   <---- I have destructured item here 
console.log(item)
    return (
      <View style={{ flex: 1 }}>

      </View>
    );
  };

<FlatList
          scrollEnabled={!focused}
          horizontal
          pagingEnabled
          data={image}
          renderItem={renderItem}
        />

Answer 2

Если данные Flatlist равны нулю, попробуйте

  <FlatList
    horizontal
    pagingEnabled
    data = {image ? image : []}
    renderItem={({ item }) => renderItem(item)} />}
  />