So I have a screen that users can use to populate an array, which then is passed into a FlatList then uses said array for its data key, and I want these FlatList items to appear vertically, and with each new item added, it will expand the container that it is in, stacking each item on top of one another.

EXAMPLE: DoorDash; say you're on a restaurant's page and you're able to scroll up and down throughout it as it displays each menu item vertically.

What I attempted to implement was a FlatList inside of a ScrollView with scrollEnabled set to false on said FlatList, however, this causes immense lag within the emulator when I populate the data array for the FlatList, as well as the ScrollView jumping up and down when you reach the bottom of the page.

const [items, setItems] = React.useState([])
const [newItem, setNewItem] = React.useState(newItem)

const newItem = [
{
    name: null,
    about: null,
    picture: null,
    price: null
}]

<ScrollView>
    <SafeAreaView>
        <FlatList
            data={items}
            keyExtractor{(item, index) => index.toString()}
            scrollEnabled={false}
            renderItem={renderItems()}
        />
    </SafeAreaView>
</ScrollView>

As you can see, the user will end up manipulating newItem when adding a new item into the FlatList, which works perfectly fine, it just begins to lag the application after the ScollView begins to expand downward.

Thanks for the assistance, and I can provide more clarification if needed.

EDIT: For reference, this is what the FlatList items look like when rendered:

So I'm essentially looking for a method to be able to lazy load dynamic array objects in a flatlist that is simultaneously in a ScrollView without lagging, is it possible?