CODEWITHSUNDEEP
javascripthtmlcssreactjsreact-native
Saikat Saha
Saikat Saha

Reputation: 838

Multiple view component stick to top on scroll inside ScrollView

I am having a page which consists of 2 different list sections(listComponent1 and listComponent2) and above each list I have created a custom label using and , and kept the complete section inside ScrollView, now I have a requirement where if the lists are too long whenever I scroll the 2 labels(labelComponent1 and labelComponent2) should stick to the top below header even though the list items goes out of the viewport.

I have tried adding stickyHeaderIndices={[1]} and showsVerticalScrollIndicator={false} properties inside ScrollView component, still it didn't work, not sure if I am doing some mistake

Code:

  <SafeAreaView>
    <ScrollView alwaysBounceHorizontal={false} horizontal={false} contentContainerStyle={testStyle}>
      {true && <View>
        <labelComponent1 data={test1} />
        <listComponent1 data={testData1} />
        <Spacing />
        <labelComponent2 data={test2} />
        <listComponent2 data={testData2} />
      </View >}
    </ScrollView>
  </SafeAreaView>

Upvotes: 0

Views: 2806

Answers (1)

kafinsalim
kafinsalim

Reputation: 485

you can use stickyHeaderIndices={[0]} so the first child will be sticky. but dont wrap the child of ScrollView in one View. it wrap them into one component so the ScrollView will only have on child. Try this:

<SafeAreaView>
   {booleanVar && <ScrollView stickyHeaderIndices={[0]} horizontal={false}>
        <labelComponent1 data={test1} />
        <listComponent1 data={testData1} />
        <Spacing />
        <labelComponent2 data={test2} />
        <listComponent2 data={testData2} />
    </ScrollView>}
</SafeAreaView>

Upvotes: 2

Related Questions