get index from flatlist react native

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>
    );
}