1

I'm trying to get an element in a scrollview to always stay to the left of the screen. Kinda like the number rows in Excel. They stay to the left when scrolling horizontally but scroll also down when scrolled vertically. So far I tried animating the element by hooking up the onscroll element to it. It does work but it feels very choppy. It is fast but not fluid. Almost looks like the element is vibrating.

Are there any other techniques in react native to get the desired result? Here the important lines I'm using.

scrollPositionX: new Animated.Value(0),    

scrollEventThrottle={16}
onScroll={Animated.event([{nativeEvent: {contentOffset: {x: this.state.scrollPositionX}}}] )}

<Animated.View style={[styles.times, {
     transform: [{translateX: this.state.scrollPositionX}]
}]}>
   ...
</Animated.View>

enter image description here

FreeJ
  • 266
  • 1
  • 3
  • 7
  • Did you ever get this working well? I've got a semi working approach but it isn't great. https://stackoverflow.com/questions/44973820/react-native-sticky-row-and-header-scroll-performance – GollyJer Jul 07 '17 at 14:53

1 Answers1

2

A crude way to do it is to render the sticky columns outside of the horizontal ScrollView. Just make sure your stick and non sticky cells end up being the same height so everything lines up.

If you want to scroll vertically as well, wrap them both inside of another ScrollView.

<ScrollView>
  <View>
    // render the sticky cells
  </View>
  <ScrollView horizontal={true}>
    // render the non sticky cells
  </ScrollView>
</ScrollView>

The problem is that if you have a lot of rows, especially with more complex components within them, you'll have performance issues.

ListViews are better at handling lots of data, but I haven't found a way to make use of them for this scenario. You'd need one for both the sticky column and normal cells, and there's no way to keep them in sync without watching onScroll as you're doing.

I'm hoping someone has better way to do this though. I really need this functionality as well.

Travis Kochel
  • 53
  • 4
  • Yeah the way you nested it was actually one of my first attempts. The bad thing about is that you are locked in scrolling one way or another. Diagonally isn't possible. The way I "fixed" it was by taking the Sticky Elements (I actually have two, left and top) outside of the scrollview and then set transforms on them. That noticeably improved it. For some reason when they are inside a scrollview and transformed really made them go bananas as I described initially. There is still a delay of about 1 or 2 frames. Only synced UIScrollViews would do the trick 100%. – FreeJ Oct 21 '15 at 08:45
  • Btw I switched the sticky rows from Listview to map as the onScroll transformation needed quite some time to start responding. Switch to map and it worked right away. – FreeJ Oct 21 '15 at 08:48
  • Ah yeah, not sure to to implement this diagonally. What do you mean by switching from ListView to map? Using `{[1,2,3].map(this.renderRow)} ` in a ScrollView vs the `renderRow` ListView method? – Travis Kochel Oct 21 '15 at 19:34
  • I've also been wondering if there's a way to bring this logic into the React. I don't have any experience hooking up Native UI Components though. http://www.brightec.co.uk/ideas/uicollectionview-using-horizontal-and-vertical-scrolling-sticky-rows-and-columns – Travis Kochel Oct 21 '15 at 19:39