Nativescript Angular ScrollView tether item to top of page

0
votes

I have a scrollview with an image at the top, then a searchbar and a list. I'm trying to make it so that the searchbar doesn't leave the top of the page when scrolling up so that the list keeps scrolling underneath it.

Format:

<ScrollView>
  <Image src="testimage.png"></Image>
  <Searchbar></Searchbar>
  <ListView items></ListView>
</ScrollView>
Is there a way to do this in NativeScript?
1
nativescriptscrollviewnativescript-angular
You should use GridLayout instead of ScrollView, define 3 rows (auto,auto,*). - Manoj

1 Answers

1
votes

Use GridLayout, ListView itself has built-in scrollbar.

<GridLayout rows="auto,auto,*">
  <!-- you might want to set a height for image, depends on your image source -->
  <Image row="0" src="testimage.png"></Image>
  <Searchbar row="1"></Searchbar>
  <ListView row="2" ...></ListView>
</GridLayout>