CODEWITHSUNDEEP
react-native
Midhun
Midhun

Reputation: 41

How can we render 2 vertical Flatlist inside a single scrollView?

I managed to build it but I'm getting a bad user experience in scrolling the two vertical flatlist inside my scroll view, I'm getting a warning also like

"VirtualizedLists should never be nested inside plain ScrollViews"

transaction and charging session are the two flatlists inside the scrollView

enter image description here

Upvotes: 1

Views: 975

Answers (3)

Emre Şahiner
Emre Şahiner

Reputation: 1

You can map your lists into scrollView Don't forget to give key values for performance. You have only 3-5 items in your lists so you don't have to worry about performance much.

example approach like that

let section1Arr = [{}]
let section2Arr = [{}]

render() {
 return (
  <ScrollView>
     <Text>
       Transaction
     </Text>
    {
     section1Arr.map((item, index) => {
      return (
       <View key={`myKeyString${index}`}>
         <Text>
           {item.title}
         </Text>
       </View>
      )
     })
    }
    //section2arr same approach 
  <ScrollView/>
)
}

This is the best approach if you don't want to see "yellow error that "VirtualizedLists should never be nested inside plain ScrollViews"".

BUT you can use nested virtualizedLists not a big deal but don't forget to set "scrollEnabled" to false for inner scrollable views. Actually this is very close thing to mapping approach.

(please give vote if this answer is correct for you)

Upvotes: 0

Sharqi
Sharqi

Reputation: 121

try this approach by using ListHeaderComponent and ListFooterComponent

import * as React from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  const list = [
    { id: '1', title: 'title 1' },
    { id: '2', title: 'title 2' },
    { id: '3', title: 'title 3' },
    { id: '4', title: 'title 4' },
    { id: '5', title: 'title 5' },
    { id: '5', title: 'title 6' },
    { id: '7', title: 'title 7' },
    { id: '8', title: 'title 8' },
  ];

  const renderHeader = () => {
    return (
      <View>
        <Text>render profile here</Text>
      </View>
    );
  };

  const renderFooter = () => {
    return (
      <View>
        <Text>render footer here</Text>
      </View>
    );
  };

  const renderItem = ({ item }) => {
    return (
      <View style={{ height: 60, marginVertical: 20, padding:5, backgroundColor:'red' }}>
        <Text>{item.title}</Text>
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <FlatList
      contentContainerStyle={{margin:10, paddingBottom:50}}
        ListHeaderComponent={renderHeader}
        ListFooterComponent={renderFooter}
        data={list}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

you can see result here https://snack.expo.dev/@sharqiyem/flatlist

Upvotes: 0

Ankit Vora
Ankit Vora

Reputation: 584

You Can not use Flatlist and Scrollview with the same orientation,you can use Scrollview with Vertical and flatlist is as horizontal.

==> You need to use for same orientation as the using of the map and use the scrollview.

Upvotes: 2

Related Questions