[SOLVED] cannot scroll native-base FlatList inside ScrollView

Issue

This Content is from Stack Overflow. Question asked by CCP

im using native base for my component, so the case is i have DropdownBox/Select then i have FlatList but i want the FlatList scrolling is to follow the parent scrollview scrolling so if i scroll the FlatList then the DropdownBox move along as the list scrolled but my list won’t even scroll i don’t know why

 <ScrollView
  showsVerticalScrollIndicator={false}
  contentContainerStyle={{ width: "100%", alignItems: "center" }}
>
  <Stack flexWrap={"wrap"} justifyContent="center">
    <SelectBox />
    <FlatList
      mt={"4"}
      showsVerticalScrollIndicator={false}
      data={data}
      keyExtractor={(item, index) => index}
      numColumns={2}
      renderItem={(data, index) => {
        return <PortfolioCard />;
      }}
    />
  </Stack>
</ScrollView>

enter image description here



Solution

i’m not sure your question, maybe can you give a video detail,

<ScrollView
  showsVerticalScrollIndicator={false}
  nestedScrollEnabled // add this
  contentContainerStyle={{ width: "100%", alignItems: "center" }}
>
  <Stack flexWrap={"wrap"} justifyContent="center">
    <SelectBox />
    <FlatList
      mt={"4"}
      showsVerticalScrollIndicator={false}
      data={data}
      nestedScrollEnabled
      style={{height: 300}} // also this
      keyExtractor={(item, index) => index}
      numColumns={2}
      renderItem={(data, index) => {
        return <PortfolioCard />;
      }}
    />
  </Stack>
</ScrollView>


This Question was asked in StackOverflow by CCP and Answered by TimoDevs It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?