How Swipable List use FlatList not ListView?

[Jancat]

react-native, react and native-base version

react-native 0.49 react 16.0.0 native-base 2.3.4

Expected behaviour

Use Swipable List with recommended FlatList

Actual behaviour

Now the example in the docs using Swipable List with depleted ListView

Steps to reproduce (code snippet or screenshot)

render() {
    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    return (
      <Container>
        <Header />
        <Content>
          <List
            dataSource={this.ds.cloneWithRows(this.state.listViewData)}
            renderRow={data =>
              <ListItem>
                <Text> {data} </Text>
              </ListItem>}
            renderLeftHiddenRow={data =>
              <Button full onPress={() => alert(data)}>
                <Icon active name="information-circle" />
              </Button>}
            renderRightHiddenRow={(data, secId, rowId, rowMap) =>
              <Button full danger onPress={_ => this.deleteRow(secId, rowId, rowMap)}>
                <Icon active name="trash" />
              </Button>}
            leftOpenValue={75}
            rightOpenValue={-75}
          />
        </Content>
      </Container>
    );

Question

How can I use FlatList with Swipeable List and Swipeable Row?

[akhil-ga]

@Jancat Pasting a sample code

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

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = { data: [{ key: 1, value: 'one' }, { key: 2, value: 'two' }, { key: 3, value: 'three' }, { key: 4, value: 'four' }, { key: 5, value: 'five' }] }
  }

  removeItem(key) {
    let data = this.state.data
    data = data.filter((item) => item.key !== key)
    this.setState({ data })
  }

  render() {
    return (
      <Container>
        <Header />
        <Content scrollEnabled={false}>

          <FlatList
            data={this.state.data}
            renderItem={({ item }) => <SwipeRow
              leftOpenValue={75}
              rightOpenValue={-75}
              left={
                <Button success onPress={() => alert(item.value)} >
                  <Icon active name="add" />
                </Button>
              }
              body={
                <View>
                  <Text style={{ paddingLeft: 15 }}>{item.value}</Text>
                </View>
              }
              right={
                <Button danger onPress={() => this.removeItem(item.key)}>
                  <Icon active name="trash" />
                </Button>
              }
            />}
          />
        </Content>
      </Container>
    );
  }
}

Gif

[Jancat]

@akhil-geekyants Thanks, I thought about this way using SwipeRow. But the default behavior such closing rows when other rows are opened will be lost. And the press event seems to be invalid, like this:

renderItem={({ item }) => (
  <TouchableHighlight onPress={() =>alert('press')}>  // don't alert
    <SwipeRow ... />
  </TouchableHighlight >
)       

I want to know whether there is a plan to use FlatList in Swipable List for better performance?

[akhil-ga]

yes, NativeBase will be using FlatList in the upcoming major release.

[Jancat]

By the way. I can't customize list item style in SwipeRow. Such as I can't modify the default SwipeRow body style below:

Why not give a style property ?

[SupriyaKalghatgi]

Fixed with 2.3.6

[gs-rbarman]

Does NativeBase 2.12.0 use FlatList for Swipable List too @akhil-geekyants ?

[iKrushYou]

@akhil-geekyants do you know if NativeBase ever switched over to FlatList?