Ref in flatlist items does not return correct PageY position when loading more data in a list - react-native

Question

I am trying to display dropdown below flatlist items. Pagination is implemented in Flatlist, so when i load data for first-page, the dropdown position is calculated accurately. but when i load data for another pages, pageY postion in ref measure method is increased by list size. So due to this dropdown isn't displayed in visible area. I am attaching my code for reference.
this is my render method.
render() {
let { list, } = this.props;
const {top,listVisibity,articleDropdown} = this.state;
return (
<View style={{flex:1}}>
<OptimizedFlatList
maxToRenderPerBatch={10}
windowSize={16}
onEndReached={() => this.onEndReached()}
nestedScrollEnabled={false}
onScrollBeginDrag = {() => this.setState({listVisibity:false})}
onEndReachedThreshold={Platform.OS === 'ios' ? 0 : 0.01}
onMomentumScrollBegin={() => { this.onEndReachedCalledDuringMomentum = false; }}
data={list}
renderItem={({ item }) => this._renderItem(item)}
keyExtractor={item => item.id}
style={{ flexGrow: 1}}
ListFooterComponent={this.footer}
/>
</view>
}
And here is list and sublist rendering
_renderItem = item => {
return (
<View style={styles.container}>
<ShadowView style={styles.shadowStyle}>
<View style={styles.listItem} >
<View style={{ flex: 0.6, flexDirection: 'row' }}>
<Image
source={constants.images.dot}
style={{ alignSelf: 'center', width: RFValue(12), resizeMode: 'contain', marginRight: 10 }}
/>
<Highlighter
highlightStyle={{backgroundColor: 'yellow'}}
searchWords={[this.props.searchedText]}
textToHighlight= {item.name.toUpperCase()+" ("+item.topics.length+")"}
style={{ color: "#0C3C7F", alignSelf: 'center', fontWeight: '500', fontFamily:constants.fontFamily.SFProDisplay }}
/>
</View>
<View style={{ flex: 0.4}}>
<TouchableOpacity onPress={() => {
this.updateSelection(item)
}}>
{item.isExpanded ? <Image
source={constants.images.dropdownArrow}
style={{ alignSelf: 'flex-end', resizeMode: 'contain' }}
/> :
<Image
source={constants.images.arrowUp}
style={{ alignSelf: 'flex-end', resizeMode: 'contain' }}
/>
}
</TouchableOpacity>
</View>
</View>
</ShadowView>
{this.renderSubList(item)}
</View>
);
}
renderSubList = (item) => {
return <Collapsible collapsed={!item.isExpanded}>
<FlatList
data={item.topics}
scrollEnabled={false}
renderItem={({ item }) => (
<ShadowView style={item.isSelected? styles.topicShadowStyle_1:styles.topicShadowStyle}>
<View ref={ref => this.parentView = ref}
onLayout={(event) => {
this.find_dimesions(event.nativeEvent.layout) }}
style={[{flexDirection: 'row'}, item.isSelected ? { borderColor: constants.colors.lightBlue, borderTopLeftRadius: 10,borderBottomLeftRadius: 10,borderRadius:8, borderWidth: 2 } : {}]}>
{(item.fullTextUrl!=null && item.fullTextUrl!='') || (item.pdfLink!=null && item.pdfLink!='') ?
<View style={{ width: width * 4 / 100, backgroundColor: constants.colors.lightBlue, borderTopLeftRadius: 8, borderBottomLeftRadius: 8 }}></View>:
<View style={{ width: width * 4 / 100, backgroundColor: constants.colors.lightGray_1, borderTopLeftRadius: 8, borderBottomLeftRadius: 8 }}></View>
}
<View style={{ width: '95%' }}>
<TouchableWithoutFeedback onLongPress={() => this.props.updateShowSelectedIcon(item)} onPress={() => this.props.showDetails(item)}>
<View style={{ flexDirection: 'row', width: '100%' }}>
<View style={{ flex: 1, marginHorizontal: width * 3 / 100, marginVertical: height * 1.5 / 100, backgroundColor: constants.colors.white }}>
<View style={{ flexDirection: 'row', width: '100%' }}>
<View style={{ alignContent: 'flex-start', width: '65%' }}>
<Highlighter
highlightStyle={{backgroundColor: 'yellow'}}
searchWords={[this.props.searchedText]}
textToHighlight= {item.journal.toUpperCase()}
style={styles.jurnalTitle}
numberOfLines={2}
/>
</View>
<View style={{ alignContent: 'flex-end', width: '35%', }}>
<Text style={styles.dateStyle} >{item.date}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', width: '100%', marginTop: height * 1 / 100 }}>
<View style={{ alignItems: 'flex-start', width: '70%' }}>
<Highlighter
highlightStyle={{backgroundColor: 'yellow'}}
searchWords={[this.props.searchedText]}
textToHighlight= {item.article}
style={{ fontWeight: 'bold', color: constants.colors.black_1, alignContent: 'flex-start' }}
numberOfLines={2}
/>
</View>
{!this.props.showSelectedIcon?
<View
ref={(ref) => { this.rowRefs[item.id] = ref; }}
// ref={ref => this[`myView${item.id}`]=ref}
onLayout={(event) => {
const {x, y, width, height} =event.nativeEvent.layout
}}
style={{position:'relative', alignItems: 'flex-end', width: '30%' }}>
<TouchableOpacity style={{ height: RFValue(20), width: RFValue(20) }}
onPress={() => this.calculateIconPosition(item)}>
{(item.fullTextUrl!=null && item.fullTextUrl!='') || (item.pdfLink!=null && item.pdfLink!='') ?
<Image
source={constants.images.Oval}
style={{ height: RFValue(20), width: RFValue(20) }}
/>:
<Image
source={constants.images.dropdown}
style={{ height: RFValue(20), width: RFValue(20) }}
/>
}
</TouchableOpacity>
{/* { <View onLayout={(event) => {
const {x, y, width, height} =event.nativeEvent.layout
console.log(y)
}} > </View>} */}
</View>:
<View
style={{ alignItems: 'flex-end', width: '30%' }}>
{item.isSelected?
<Image
source={constants.images.selected}
style={{ height: RFValue(20), width: RFValue(20) }}
/>:
<Image
source={constants.images.unselect}
style={{ height: RFValue(20), width: RFValue(20) }}
/>
}
</View>
}
</View>
</View>
</View>
</TouchableWithoutFeedback>
{this.renderNotesView(item)}
</View>
</View>
</ShadowView>
)}
keyExtractor={item => item.id}
/>
</Collapsible>
}
Item Measurement Method Call
calculateIconPosition = (item) => {
this.rowRefs[item.id].measure( (fx, fy, width, height, px, py) => {
console.log("=================PY=====================")
console.log(py)
})
}
Is there any way to get exact pageY position in flat list.