Horizontal auto scroll to a React Component - reactjs

Question

I have a React app in which I render a horizontal list draft picks. At any point in time, one draft pick is active, but at a certain point that pick is made, and then the next one becomes active. When the next one becomes active, I'd like for the list to auto-scroll horizontally so that the active pick is always in view.
I'm sure this has been asked before, but I don't really know how to cause an auto-scroll event to a React component.
Here's the code I have:
DraftOrder.js:
class DraftOrder extends React.Component {
render() {
return (
<React.Fragment>
<div className="d-flex flex-row auto-scroll-x">
{this.props.draftPicks.map(aDraftPick => {
return <ADraftPickInOrder key={v4()} draftPick={aDraftPick} team={this.props.team} />
})}
</div>
</React.Fragment>
);
}
}
ADraftPickInOrder.js:
class ADraftPickInOrder extends React.Component {
constructor(props) {
super(props);
this.state = {
active: this.props.draftPick.active
}
this.renderUserName = this.renderUserName.bind(this);
this.renderDraftedPlayer = this.renderDraftedPlayer.bind(this);
}
renderUserName() {
...
}
renderDraftedPlayer() {
...
}
render() {
return (
<div className="text-center px-3">
<div className={classnames("font-weight-bold no-wrap", { "text-success" : this.props.draftPick.team.id === this.props.team.id } )}>{this.props.draftPick.team.name}</div>
{this.renderUserName()}
{this.renderDraftedPlayer()}
<div><small>{formatDraftPickNumber(this.props.draftPick)}</small></div>
</div>
);
}
}
Any help would be much appreciated!

Answer 1

Use ScrollView and the scrollTo method of it:
import { ScrollView } from 'react-native';
...
setScrollViewRef = ref => {
this.scrollView = ref;
};
handlePress = ({nativeEvent}) => {
const { pageX, pageY } = nativeEvent;
// find out x and y somehow
this.scrollView.scrollTo({x, y, animated: true})
}
render() {
<ScrollView
horizontal
ref={this.setScrollViewRef}
showsHorizontalScrollIndicator={false}>
<DraftPick onPress={this.handlePress} />
<DraftPick onPress={this.handlePress} />
...
</ScrollView>
}