scrollToIndex not working with child component
See original GitHub issueI have a component that renders a List and will properly scroll to the bottom of the List every time it is updated:
import React from 'react'
import { CellMeasurerCache, CellMeasurer } from 'react-virtualized'
import SpeechBubble from './SpeechBubble'
import { List, AutoSizer } from 'react-virtualized'
import './styles/Conversation.css'
const cache = new CellMeasurerCache( {
fixedWidth: true,
minHeight: 75,
defaultHeight: 100,
} )
const Conversation = ( { messages } ) => {
const rowRenderer = ( { index, key, style, parent } ) => {
const message = messages[ index ]
return (
<CellMeasurer
cache={ cache }
columnIndex={ 0 }
key={ key }
parent={ parent }
rowIndex={ index }
>
<SpeechBubble
direction={ message.direction }
key={ key }
style={ style }
>
{ message.text }
</SpeechBubble>
</CellMeasurer>
)
}
return (
<div className="Conversation" >
<AutoSizer>
{ ( { width, height } ) => (
<List
deferredMeasurementCache={ cache }
height={ height }
overscanRowCount={ 20 }
rowCount={ messages.length }
rowHeight={ cache.rowHeight }
rowRenderer={ rowRenderer }
scrollToAlignment="end"
scrollToIndex={ messages.length - 1 }
width={ width }
/>
) }
</AutoSizer>
</div>
)
}
export default Conversation
When I merely extract the AutoSizer / List into a child component, the list still updates properly, but it no longer scrolls to the bottom when it is updated:
import React from 'react'
import { CellMeasurerCache, CellMeasurer } from 'react-virtualized'
import SpeechBubble from './SpeechBubble'
import ConversationList from './ConversationList'
import './styles/Conversation.css'
const cache = new CellMeasurerCache( {
fixedWidth: true,
minHeight: 75,
defaultHeight: 100,
} )
const Conversation = ( { messages } ) => {
const rowRenderer = ( { index, key, style, parent } ) => {
const message = messages[ index ]
return (
<CellMeasurer
cache={ cache }
columnIndex={ 0 }
key={ key }
parent={ parent }
rowIndex={ index }
>
<SpeechBubble
direction={ message.direction }
key={ key }
style={ style }
>
{ message.text }
</SpeechBubble>
</CellMeasurer>
)
}
return (
<div className="Conversation" >
<ConversationList
cache={ cache }
messages={ messages }
rowRenderer={ rowRenderer }
/>
</div>
)
}
export default Conversation
import React, { Component } from 'react'
import { AutoSizer, List } from 'react-virtualized'
class ConversationList extends Component {
render() {
const { cache, messages, rowRenderer } = this.props
return (
<AutoSizer>
{ ( { width, height } ) => (
<List
deferredMeasurementCache={ cache }
height={ height }
overscanRowCount={ 20 }
rowCount={ messages.length }
rowHeight={ cache.rowHeight }
rowRenderer={ rowRenderer }
scrollToAlignment="end"
scrollToIndex={ messages.length }
width={ width }
/>
) }
</AutoSizer>
)
}
}
export default ConversationList
Any ideas on why the mere extraction of a component would make a difference in whether it scrolls to the bottom or not?
Issue Analytics
- State:
- Created 6 years ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
ScrolltoIndex not working react-native on a flatlist
4 version of react native. I somehow got access to scrollToIndex() using "ref._reactInternalFiber.child.stateNode.scrollToIndex()", but this ...
Read more >Scroll to a Specific Item in ScrollView List View - About React
We are going to use the onLayout prop of the View component provided by React Native. In this example, we will create a...
Read more >ScrollView - React Native
ScrollView renders all its react child components at once, but this has a performance downside. Imagine you have a very long list of...
Read more >Usage | FlashList
You can try out FlashList by changing the component name and adding ... This can sometimes cause issues when used with initialScrollIndex in ......
Read more >A deep dive into React Native FlatList - LogRocket Blog
So why isn't our list visible? This is where FlatList comes in to mitigate this problem. It is a React Native component that...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@bvaughn Thanks for the response. I filed it because it appeared to be a bug, but I totally understand closing it since I didn’t have a complete working repo.
Since I found a workaround, I’m not going to take the time to create a repo and dig further here. But, I definitely appreciate your time here and your great contributions to this library!
Note for future readers: I have noticed differences in behavior in this library when you merely swap between using a stateless vs. class component and also when you put the react-virtualized components in the same code block vs. extracting them into separate components. When debugging, I would highly recommend collapsing all the nested RV components into a single code block to eliminate possible issues with nesting components.
Thanks for being so understanding and for leaving a summary for people who might come across this issue in the future.