Entonces, tengo una pantalla que los usuarios pueden usar para completar una matriz, que luego se pasa a una FlatList y luego usa dicha matriz para su clave de datos, y quiero que estos elementos de FlatList aparezcan verticalmente, y con cada nuevo elemento agregado, se expandirá el contenedor en el que se encuentra, apilando cada elemento uno encima del otro.

EJEMPLO : DoorDash; digamos que está en la página de un restaurante y puede desplazarse hacia arriba y hacia abajo a medida que muestra cada elemento del menú verticalmente.

Lo que intenté implementar fue una FlatList dentro de ScrollView con scrollEnabled establecido en falso en dicha FlatList, sin embargo, esto causa un retraso inmenso dentro del emulador cuando completo la matriz de datos para FlatList, así como ScrollView saltando hacia arriba y hacia abajo cuando llegas al final de la página.

 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>

Como puede ver, el usuario terminará manipulando newItem al agregar un nuevo elemento en FlatList, lo que funciona perfectamente bien, solo comienza a retrasar la aplicación después de que ScollView comienza a expandirse hacia abajo.

Gracias por la ayuda, y puedo proporcionar más aclaraciones si es necesario.

EDITAR : como referencia, así es como se ven los elementos de FlatList cuando se procesan:

Entonces, esencialmente estoy buscando un método para poder cargar objetos de matriz dinámica de forma diferida en una lista plana que se encuentra simultáneamente en ScrollView sin retrasos, ¿es posible?