React native : Flatlist inside scrollview

Question

My goal is for this entire block to be scrollable. I tried all kinds of ways to achieve the goal but without success. I tried with ListHeaderComponent and moved the entire top view to it and it didn't work. And I also tried <FlatList nestedScrollEnabled /> And it didn't work either. What is the correct way to reach the scroll?

I come from here :

const renderAccordians = () => {
    const items: JSX.Element[] = [];
    areaData.forEach(item => {
      items.push(<Accordian item={item} key={item.title} />);
    });
    return items;
  };

To here :

return (
    <View>
      <View style={styles.row}>
        <TouchableOpacity onPress={() => onClickFather()}>
          <MaterialIcons size={24} name={data.checked ? 'check-box' : 'check-box-outline-blank'} color={'black'} />
        </TouchableOpacity>
        <Text style={[styles.title]}>{data.title}</Text>
        <TouchableOpacity style={styles.row} onPress={() => toggleExpand()}>
          <MaterialIcons name={expanded ? 'arrow-drop-up' : 'arrow-drop-down'} size={30} color={'black'} />
        </TouchableOpacity>
      </View>
      <View style={styles.parentHr} />
      {expanded && (
        <FlatList
          data={data.data}
          numColumns={1}
          scrollEnabled={false}
          renderItem={({ item, index }) => (
            <View>
              <TouchableOpacity style={[styles.childRow, styles.button]} onPress={() => onClick(index)}>
                <MaterialIcons
                  size={24}
                  name={item.checked ? 'check-box' : 'check-box-outline-blank'}
                  color={'black'}
                />
                <Text style={[styles.itemInActive]}>{item.key}</Text>
              </TouchableOpacity>
              <View style={styles.childHr} />
            </View>
          )}
        />
      )}
    </View>
  );

why did you disable scrollenabled?

Hend El-Sahli
– Hend El-Sahli

2022-11-30 10:36:01 +00:00
Commented Nov 30, 2022 at 10:36 — Hend El-Sahli
– Hend El-Sahli, Commented Nov 30, 2022 at 10:36

Hend El-Sahli · Accepted Answer · 2022-11-30 11:13:26Z

1

Since your FlatList will be part of an Accordion component, you "can't" embed the ExpandButton inside the Flatlist > ListHeaderComponent ... cause It'll simply hide the whole FlatList along with it's Header when you collapse your accorddion...

keyExtractor is also missing in your FlatList .. I added index as a key here which is not recommended BTW, you better use a unique field in your listItem like id...

    return (
    <View style={{ flex: 1}}> // <<--- Look here
      <View style={styles.row}>
        <TouchableOpacity onPress={() => onClickFather()}>
          <MaterialIcons
            size={24}
            name={data.checked ? 'check-box' : 'check-box-outline-blank'}
            color={'black'}
          />
        </TouchableOpacity>
        <Text style={[styles.title]}>{data.title}</Text>
        <TouchableOpacity style={styles.row} onPress={() => toggleExpand()}>
          <MaterialIcons
            name={expanded ? 'arrow-drop-up' : 'arrow-drop-down'}
            size={30}
            color={'black'}
          />
        </TouchableOpacity>
      </View>
      <View style={styles.parentHr} />
      {expanded && (
        <FlatList
          data={data.data}
          numColumns={1}
          scrollEnabled={true} // <<--- Look here
          keyExtractor={(_, index) => index.toString()} // <<=== Look here
          contentContainerStyle={{flexGrow: 1}} // <<--- Look here
          renderItem={({ item, index }) => (
            <View>
              <TouchableOpacity
                style={[styles.childRow, styles.button]}
                onPress={() => onClick(index)}
              >
                <MaterialIcons
                  size={24}
                  name={item.checked ? 'check-box' : 'check-box-outline-blank'}
                  color={'black'}
                />
                <Text style={[styles.itemInActive]}>{item.key}</Text>
              </TouchableOpacity>
              <View style={styles.childHr} />
            </View>
          )}
        />
      )}
    </View>
  );

edited Nov 30, 2022 at 11:13

answered Nov 30, 2022 at 9:35

Hend El-Sahli

6,8685 gold badges31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

emma Over a year ago

its not works .

Hend El-Sahli Over a year ago

Add more explanation, plz about "What went wrong"... cause "not works" won't be enough for anyone who want to help...

emma Over a year ago

I edit my question in up. If this is not enough for you then tell me and I will throw away the 2 full components .

Hend El-Sahli Over a year ago

I'd be great if you add a screenshot of what you get after applying my answer...

emma Over a year ago

The accordion simply disappears and is not shown

|

vuminh · Accepted Answer · 2022-12-03 21:33:57Z

0

If it does not work, I think you should create a component and use map datalist to render all the items and putting them into the ScrollView tag.

<ScrollView
                style={styles.messageContain}
                ref={ref => {
                  this.scrollView = ref;
                }}
                {data.data.map((item, index) => {
                  return <YourComponent key={index} data={item} />;
                })}
              </ScrollView>

edited Dec 3, 2022 at 21:33

user14264568

answered Nov 30, 2022 at 10:03

vuminh

393 bronze badges

1 Comment

emma Over a year ago

Can you show me please how you implement your idea in my code ?

Collectives™ on Stack Overflow

React native : Flatlist inside scrollview

2 Answers 2

10 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related