Question 33745 in React native Question posted in
The official React Native documentation can be found here.

React native : Flatlist inside scrollview

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>
  );
Tags:

2

Answers


  1. 0

    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>
  );
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search