react-native-multiselect-sortable-flatlist v1.0.5

React Native Multiselect Sortable FlatList

A React Native FlatList that is sortable with the ability to select multiple list items.

Getting started

Install

npm install react-native-multiselect-sortable-flatlist --save

or

yarn add react-native-multiselect-sortable-flatlist

Usage

import MultiSelectSortableFlatlist from 'react-native-multiselect-sortable-flatlist';

Examples

Simple Example (Minimum needed for component to work)

<MultiSelectSortableFlatlist
  data={this.state.ListData}
  keyExtractor={(item, index) => item}
  onSort={data => this.onSort(data)}
  renderItem={({ item, index, selected }) => (
    //Note: To view selection changes, your component should take a prop that will render changes based on "selected" bool
    <View style={selected ? styles.selectedWrapper : styles.wrapper}>
      <View
        style={[
          styles.containerStyle,
          {
            borderColor: selected ? 'blue' : 'white',
            borderWidth: selected ? 1.5 : 0,
          },
        ]}>
        <Text style={styles.CardText}>{item}</Text>
      </View>
    </View>
  )}
/>

Advance Example

import React from 'react';
import { Alert, Text, StyleSheet, StatusBar } from 'react-native';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
import SelectableCard from './compoenents/SelectableCard';
import Header from './compoenents/Header';
import MultiSelectSortableFlatlist from 'react-native-multiselect-sortable-flatlist';

export default class App extends React.PureComponent {
 constructor(props) {
   super(props);
   this.state = {
     ListData: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
     ItemsSelected: [],
   };
 }

 onItemPress(item) {
   Alert.alert('Alert', item + ' Pressed', [{ text: 'OK', onPress: () => console.log('OK Pressed') }], {
     cancelable: true,
   });
 }

 onSelectionChanged(selectedItems) {
   this.setState({ ItemsSelected: selectedItems });
 }

 onSort(newListDataArray) {
   this.setState({ ListData: newListDataArray });
 }

 render() {
   return (
     <MultiSelectSortableFlatlist
       ref={MultiSelectSortableFlatlist => (this.MultiSelectSortableFlatlist = MultiSelectSortableFlatlist)}
       contentContainerStyle={styles.ListContainer}
       ListHeaderComponentStyle={styles.HeaderStyle}
       ListHeaderComponent={
         <Header
           SelectAll={() => this.MultiSelectSortableFlatlist.SelectAll()}
           DeselectAll={() => this.MultiSelectSortableFlatlist.DeselectAll()}
         />
       }
       data={this.state.ListData}
       keyExtractor={(item, index) => item}
       onItemTap={({ item, index }) => this.onItemPress(item)}
       onItemSelected={({ selectedItems, item, index }) => this.onSelectionChanged(selectedItems)}
       onItemDeselected={({ selectedItems, item, index }) => this.onSelectionChanged(selectedItems)}
       onSort={data => this.onSort(data)}
       renderItem={({ item, index, selected }) => (
         //Note: To view selection changes, your component should take a prop that will render changes based on "selected" bool
         <SelectableCard Selected={selected}>
           <Text style={styles.CardText}>{item}</Text>
         </SelectableCard>
       )}
     />
   );
 }
}

const styles = StyleSheet.create({
 ListContainer: {
   paddingTop: StatusBar.currentHeight + hp(2),
 },
 CardText: {
   textAlign: 'center',
 },
 HeaderStyle: {
   paddingHorizontal: wp(4),
 },
});

Manual Mode Example

import React from 'react';
import { Alert, View, Text, StyleSheet, StatusBar, TouchableWithoutFeedback } from 'react-native';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
import SelectableCard from './compoenents/SelectableCard';
import Header from './compoenents/Header';
import MultiSelectSortableFlatlist from 'react-native-multiselect-sortable-flatlist';

export default class App extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      ListData: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
      ItemsSelected: [],
    };
  }

  onItemPress(item) {
    Alert.alert('Alert', item + ' Pressed', [{ text: 'OK' }], {
      cancelable: true,
    });
  }

  onSelectionChanged(selectedItems) {
    this.setState({ ItemsSelected: selectedItems });
  }

  onSort(newListDataArray) {
    this.setState({ ListData: newListDataArray });
  }

  render() {
    return (
      <MultiSelectSortableFlatlist
        ref={MultiSelectSortableFlatlist => (this.MultiSelectSortableFlatlist = MultiSelectSortableFlatlist)}
        contentContainerStyle={styles.ListContainer}
        ListHeaderComponentStyle={styles.HeaderStyle}
        ListHeaderComponent={
          <Header
            SelectAll={() => this.MultiSelectSortableFlatlist.SelectAll()}
            DeselectAll={() => this.MultiSelectSortableFlatlist.DeselectAll()}
          />
        }
        mode="manual"
        data={this.state.ListData}
        keyExtractor={(item, index) => item}
        onItemSelected={({ selectedItems, item, index }) => this.onSelectionChanged(selectedItems)}
        onItemDeselected={({ selectedItems, item, index }) => this.onSelectionChanged(selectedItems)}
        onSort={data => this.onSort(data)}
        renderItem={({ item, index, selected, drag, dragEnd, reverseSelection }) => (
          //Create your Touchable component and control both selectability and sortability through exposed functions.
          <TouchableWithoutFeedback
            onPress={() => reverseSelection()}
            onLongPress={() => drag()}
            onPressOut={() => dragEnd()}>
            <View>
              <SelectableCard Selected={selected}>
                <Text style={styles.CardText}>{item}</Text>
              </SelectableCard>
            </View>
          </TouchableWithoutFeedback>
        )}
      />
    );
  }
}

const styles = StyleSheet.create({
  ListContainer: {
    paddingTop: StatusBar.currentHeight + hp(2),
  },
  CardText: {
    textAlign: 'center',
  },
  HeaderStyle: {
    paddingHorizontal: wp(4),
  },
});

Mobile Usage

Auto Mode

• Tap on your item to get onItemTap called.
• Press and hold on an item to start selecting phase. - After activating selecting phase, tap on any other item to select. - Tapping on a selected item will deselect that item. - Deselecting all items will stop selecting phase
• Press and hold on an item and drag to move it. - Drop the item anywhere to sort.

Manual Mode

• All controls are managed by calling exposed functions for each item in the renderItem prop. - Changing mode prop to "manual" will stop all Auto mode controls.

API

Props

All FlatList props are available too as the underlying component is a FlatList

renderItem Prop Variables

Functions

Use refs to call the functions on an instance of the component.

Running the example expo app

1. git clone https://github.com/yoeven/react-native-multiselect-sortable-flatlist.git
2. cd react-native-multiselect-sortable-flatlist/examples
3. npm install or yarn
4. npm start or yarn start

How to contribute

Check out this simple tutorial

• Use prettier to format all code by running yarn run format.
• Test code locally by using examples project with expo or your project before requesting for a pull request.

How to test locally

1. After making changes to the project code, cd into the root of the project
2. Run npm pack which will build a package file with an extension .tgz
3. Now cd into your react-native project folder or the examples expo project folder and run yarn add <filename>.tgz or npm install <filename>.tgz
4. Run your project and test it works
5. If you are installing the package with the same version number, yarn and npm install the cached version instead, use yarn cache clean before adding the package into your project

TODO

• Expose functions for manual select and sort
• Create version 2.0.0 with react-native-draggable-flatlist ^2.0.0 as sorting base for better perfomance.