React native get View - reactjs

Question

I have Scroll View as a header and List view as Body.So I have to swipe scroll view pro-grammatically on list swipe.so in my current code i am getting the id of the scroll view where i need the component actually using which i can call, scrollview.scrollTo(); method.
render() {
return (
<View style={styles.container}>
<View style={styles.scrollContainer}>
<ScrollView
ref={'abc'}
directionalLockEnabled={false}
horizontal={true}>
<View style={styles.scrollItemStyle}>
<Image source={shield} style={homescreenstyle.imagestyle}/>
</View>
<View style={styles.scrollItemStyle}>
<Image source={shield} style={homescreenstyle.imagestyle}/>
</View>
<View style={styles.scrollItemStyle}>
<Image source={shield} style={homescreenstyle.imagestyle}/>
</View>
<View style={styles.scrollItemStyle}>
<Image source={shield} style={homescreenstyle.imagestyle}/>
</View>
<View style={styles.scrollItemStyle}>
<Image source={shield} style={homescreenstyle.imagestyle}/>
</View>
<View style={styles.scrollItemStyle}>
<Image source={shield} style={homescreenstyle.imagestyle}/>
</View>
<View style={styles.scrollItemStyle}>
<Image source={shield} style={homescreenstyle.imagestyle}/>
</View>
</ScrollView>
</View>
<View style={styles.listcontainer}>
<ListView
dataSource={this.state.todaysData}
renderRow={this.renderRow}
onScroll={this.handleScroll}
style={styles.container}
/>
</View>
</View>
);
}
renderRow(rowData){
return (
<CustomListRowCards
title={rowData.title}/>
);
}
handleScroll(event: Object) {
// var input = this.refs.scrollview;
customViewNativeID.scrollTo(500, 0, true)
// alert(event.nativeEvent.contentOffset.y);
}
//CutomViewNativeId returns the id..But I need the view actually.Actually i am looking for something which works like findViewById() in android.I am an android developer..I am new to React-Native..Please suggest.Thank you in advance

Answer 1

In order to access any view you would normally do something like this:
class MyComponent extends React.Component {
viewOne = null
//state = {...}
useViewOne = () => {
this.viewOne.doSomething()
}
render() {
return (
<View ref={(viewRef) => this.viewOne = viewRef}>
</View>
)
}
}
Keep in mind that this.viewOne will be null in componentWillMount() and instead you should use it in componentDidMount()

Answer 2

I suggest looking into using the ref prop on your components. You can find more info here.