I have an error alert "Warning: Each child in a list should have a unique key'' prop react native FlatList" on Expo Go for iOS but there is no error showing in terminal.

My attempts to solve this error:-

1. I did wrap FlatList inside SafeAreaView but new error came out "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead."
2. I removed key={}, then error to ask for key for each list, instead I already added keyExtractor={}, when I reinstated to add both key={} and keyExtractor={}, the error is gone.
3. Then, there's only 1 error alert in Expo Go for iOS but there's no error showing in terminal.

Can I anyone spot where I went wrong?

My All.js code:-

```
import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, LogBox } from 'react-native';
import { NativeBaseProvider, FlatList, ScrollView, Divider, Image, Spinner, SafeAreaView } from 'native-base';
import { services } from '../services/Services';
import moment from 'moment';

function All(){
    const [newsData, setNewsData] = useState([]);

    useEffect(() => {
        services('general')
            .then(data => {
                setNewsData(data)
            })
            .catch(error => {
                alert(error)
            })
    }, []);

    return(
        <NativeBaseProvider>

                {newsData.length > 1 ? (
                    <FlatList
                        data={newsData}
                        keyExtractor={(item) => {
                            return item.id
                        }}

                        renderItem={({ item }) => (
                        <View>
                            <View style={styles.newsContainer}>
                                    <Image
                                        width={550}
                                        height={250}
                                        resizeMode={"cover"}
                                        source={{
                                            uri: item.urlToImage,
                                        }}
                                        alt="Alternate Text"
                                    />
                                <Text style={styles.title}>
                                    {item.title}
                                </Text>
                                <Text style={styles.date}>
                                        {moment(item.publishedAt).format('LLL')}
                                </Text>
                                <Text style={styles.newsDescription}>
                                    {item.description}
                                </Text>
                            </View>
                            <Divider my={2} bg="#e0e0e0" />
                        </View> 
                        )}
                    />
                ) : (
                    <View style={styles.spinner}>
                        <Spinner color="danger.400" />
                    </View>
                )}
        </NativeBaseProvider>
    );
}

const styles = StyleSheet.create({
    newsContainer: {
        padding: 10
    },
    title: {
        fontSize: 18,
        marginTop: 10,
        fontWeight: "600"
    },
    newsDescription: {
        fontSize: 16,
        marginTop: 10
    },
    date: {
        fontSize: 14
    },
    spinner: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: 400
    },
});
export default All;

```

[![enter image description here](https://i.stack.imgur.com/AyX9c.jpg)](https://i.stack.imgur.com/AyX9c.jpg)
[![enter image description here](https://i.stack.imgur.com/Y6056.png)](https://i.stack.imgur.com/Y6056.png)