Closing SwipeRow inside FlatList using Native-Base

Question

How can I close SwipeRow inside FlatList?

This is the easy thing to do with ListView, but since the next release is going to use FlatList it should be possible.

From reading their source code, it seems like it is not implemented yet.

Answer 1

can you try this

import React, { Component } from 'react';
import { FlatList } from 'react-native';
import { Container, Header, Content, SwipeRow, View, Text, Icon, Button } from 'native-base';

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = { data: [{ key: 'a' }, { key: 'b' }] }
    this.component = [];
    this.selectedRow;
  }
  render() {
    return (
      <Container>
        <Header />
        <Content>
          <FlatList
            data={[{ key: 'a', value: 'Row one' }, { key: 'b', value: 'Row two' }, { key: 'c', value: 'Row three' }, { key: 'd', value: 'Row four' }, { key: 'e', value: 'Row five' }]}
            keyExtractor={(item) => item.key}
            renderItem={({ item }) => <SwipeRow
              ref={(c) => { this.component[item.key] = c }}
              leftOpenValue={75}
              rightOpenValue={-75}
              onRowOpen={() => {
                if (this.selectedRow && this.selectedRow !== this.component[item.key]) { this.selectedRow._root.closeRow(); }
                this.selectedRow = this.component[item.key]
              }}
              left={
                <Button success onPress={() => alert('Add')}>
                  <Icon active name="add" />
                </Button>
              }
              body={
                <View style={{ paddingLeft: 20 }}>
                  <Text>{item.value}</Text>
                </View>
              }
              right={
                <Button danger onPress={() => alert('Delete')}>
                  <Icon active name="trash" />
                </Button>
              }
            />}
          />
          <Button style={{ margin: 20 }} onPress={() => this.selectedRow._root.closeRow()}><Text>Close row</Text></Button>
        </Content>
      </Container>
    );
  }
}