get index from flatlist react native - reactjs

Question

So I am basically looking for the error and what I am doing wrong,
I got a data with diffrent key for each, and I am trying to get the data of the activeRow,
for some reason I got undefined for some reason, what is going on? Thanks!
I am getting undefined after trying to log the "this.props.index" I already called constructor(props) and super(props), So I have no idea why why I am trying to log my prop it says undefined instead of giving me the index or the item...
there is my render!
render() {
const swipeSettings = {
autoClose: true,
buttonWidth: 130,
onClose: (secId, rowId, direction) => {
if (this.state.activeRowKey != null) {
this.setState({ activeRowKey: null })
}
},
onOpen: (secId, rowId, direction) => {
this.setState({ activeRowKey: this.props.index })
console.log(this.state.activeRowKey)
},
right: [
{
onPress: () => {
},
text: 'Verify', type: 'default', backgroundColor: 'lime', color: 'black', component: (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
}}
>
<Ionicons name="md-checkmark" size={40} />
</View>
)
}
],
left: [
{
onPress: () => {
},
text: '', type: 'default', backgroundColor: '#e6e6e6', color: 'black', component: (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
}}
>
<Ionicons style={{ color: 'green' }} name="ios-call" size={40} />
</View>
)
}
],
rowId: this.props.index,
sectionId: 1
};
if (this.state.loading) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<ActivityIndicator />
</View>
);
}
return (
<View style={{ flex: 1, backgroundColor: 'grey' }}>
<SearchBar
placeholder="Type Here..."
lightTheme
round
height={60}
onChangeText={text => this.searchFilterFunction(text)}
autoCorrect={false}
value={this.state.value}
/>
<FlatList
data={this.state.data}
renderItem={({ item,index }) => (
<Swipeout {...swipeSettings}>
<ListItem
keyExtractor={this.keyExtractor}
index={index}
titleStyle={{ textAlign: 'center', fontWeight: 'bold', color: 'black', fontSize: 20, height: 60, maxHeight: 35, justifyContent: 'center' }}
title={`${item.guestname}`}
/>
</Swipeout>
)}
keyExtractor={item => item.key}
contentContainerStyle={{ margin: 5, textAlign: 'center', }}
ItemSeparatorComponent={this.renderSeparator}
/>
<SafeAreaView style={{ height: 100, backgroundColor: '#3271e7', justifyContent: 'center', alignItems: 'center' }}>
<TouchableOpacity style={{ justifyContent: 'center', alignItems: 'center' }}>
<Ionicons style={styles.imagestyle} size={60} name="ios-barcode" />
</TouchableOpacity>
</SafeAreaView>
</View>
);
}

Answer 1

At the place your are trying to recover this.props.index you don't have the value yet i recomend passing the open and rowid props to your Swipeout and recover the index as it is:
render() {
const swipeSettings = {
autoClose: true,
buttonWidth: 130,
onClose: (secId, rowId, direction) => {
if (this.state.activeRowKey != null) {
this.setState({ activeRowKey: null })
}
},
right: [
{
onPress: () => {
},
text: 'Verify', type: 'default', backgroundColor: 'lime', color: 'black', component: (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
}}
>
<Ionicons name="md-checkmark" size={40} />
</View>
)
}
],
left: [
{
onPress: () => {
},
text: '', type: 'default', backgroundColor: '#e6e6e6', color: 'black', component: (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
}}
>
<Ionicons style={{ color: 'green' }} name="ios-call" size={40} />
</View>
)
}
],
sectionId: 1
};
if (this.state.loading) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<ActivityIndicator />
</View>
);
}
return (
<View style={{ flex: 1, backgroundColor: 'grey' }}>
<SearchBar
placeholder="Type Here..."
lightTheme
round
height={60}
onChangeText={text => this.searchFilterFunction(text)}
autoCorrect={false}
value={this.state.value}
/>
<FlatList
data={this.state.data}
renderItem={({ item, index }) => (
<Swipeout
{...swipeSettings}
onOpen={(secId, rowId, direction) => {
this.setState({ activeRowKey: index })
console.log(this.state.activeRowKey)
}
}
rowId={index}
>
<ListItem
keyExtractor={this.keyExtractor}
index={index}
titleStyle={{ textAlign: 'center', fontWeight: 'bold', color: 'black', fontSize: 20, height: 60, maxHeight: 35, justifyContent: 'center' }}
title={`${item.guestname}`}
/>
</Swipeout>
)}
keyExtractor={item => item.key}
contentContainerStyle={{ margin: 5, textAlign: 'center', }}
ItemSeparatorComponent={this.renderSeparator}
/>
<SafeAreaView style={{ height: 100, backgroundColor: '#3271e7', justifyContent: 'center', alignItems: 'center' }}>
<TouchableOpacity style={{ justifyContent: 'center', alignItems: 'center' }}>
<Ionicons style={styles.imagestyle} size={60} name="ios-barcode" />
</TouchableOpacity>
</SafeAreaView>
</View>
);
}