Recibo este error en mi aplicación:
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.Tengo e index.js
<ScrollView style={styles.container} showsVerticalScrollIndicator={false}> //... {selected === 1 && <Component1 />} { selected === 2 && <Component2 />} </ScrollView>Ahora dentro de mi Component2 tengo
<View> //.... <CustomFlatList data={dataPermission()} </View>Uso este permiso de datos para completar "datos"
y al final en mi CustomFlatList uso FlatList
const renderItem = () => { <TouchableOpacity style={[styles.row]}> //.... </TouchableOpacity> } if (data.length == 0) { return ( <View style={styles.container}> //.... </View> ) } else { return ( <View style={styles.container}> <FlatList data={data} renderItem={renderItem} /> </View> ) }Ahora mi problema es que he usado en index.js un ScrollView con FlatList dentro y supongo que ese es el problema.
En su opinión, ¿cómo puedo hacer para corregir este error?
Gracias
El mensaje de error es sencillo: nunca debe anidar una FlatList dentro de un ScrollView . Esto se debe a que la scroll action dominates the child scroll action .
Este problema es fácil de resolver. Reemplace el ScrollView principal con una View normal. FlatList ya admite el desplazamiento. Si tiene varias secciones (es decir, diferentes conjuntos de datos), es posible que desee utilizar una SectionList .
Observación: por lo general, puede lograr visualmente lo mismo con ScrollView que con FlatList PERO
ScrollView representa todos sus componentes secundarios de reacción a la vez, pero esto tiene una desventaja de rendimiento.
Por lo tanto, se recomienda utilizar FlatList siempre que se desee representar datos dentro de un contenedor desplazable.