Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6314

React native ScrollView resets positon on setState

$
0
0

I have a ScrollView with buttons on it. I populate ScrollView dynamicaly. After I press on the buttons inside the ScrollView, I'm changing the state of the current selected index and the posiotion of ScrollView is resetting.

<ScrollView  ref={ref => {    this._scrollview = ref;  }}  style={styles.scrollview}  horizontal  showsHorizontalScrollIndicator={false}  snapToInterval={64}  snapToAlignment="start"  decelerationRate="fast"  contentContainerStyle={{ paddingRight: 8, paddingLeft: 8 }}>    {this._channels.map((item, index) =><TouchableWithoutFeedback        onLayout={event => {          const layout = event.nativeEvent.layout;          this._channelsPositions[index] = layout.x;        }}        key={item.userId}        onPress={() => this._changeIndex(index)}><Image          source={{ uri: videos[index][0].channelThumbnails.high.url }}          style={[styles.channelLogo, index == this.state.currentIndex ? { borderWidth: 2 } : {}]}        /></TouchableWithoutFeedback>    )}</ScrollView>_changeIndex = (newIndex: number) => {  const { currentIndex } = this.state;  if (newIndex == currentIndex) return;  this.setState({    currentIndex: newIndex  });  const newX = 16 + 48 * newIndex  this._scrollview.scrollTo({    x: 16 + 48 * newIndex,    y: 0,    animated: true  })}

And after I press the button I want ScrollView to move to x position of this button inside the ScrollView.Demo: https://streamable.com/gu1edy

Update: After i replace scrollview for Flatlist in header i think i understand why is it happening. But i still don't know how to fix it. So the behavior is same, i am getting scroll reset every time i press on the button/cell/item of scrollview/flatlist. How looks my flatlist with nested flatlist in header

\ |CHANNEL ICON 0|CHANNEL ICON 1|CHANNEL ICON 2| ... \     header with flatlist         \ FIRST ITEM IN FLATLIST WHICH CONTAINS VIDEO OF CHANNEL\  cell 0\ SECOND ITEM IN FLATLIST WHICH CONTAINS VIDEO OF CHANNEL\ cell 1

...

So after i klick on channel icon all main flatlist populates with new data so if i understand right the header rerendering and repopulates with new data too. So is there a possibility to update header with flatlist that way my scroll in header stays on it's position without resetting?


Viewing all articles
Browse latest Browse all 6314

Trending Articles