react-native-complete-flatlist v2.0.17

react-native-complete-flatlist

Extended version of react native flat list with many built in function such as search, pull to refresh, no data available message if empty row

Caution:

renderItem props return item and index parameters item parameter returns a single element in item array. But if search text is not empty dan highlightColor props is set to any color, item parameter will return new structure of JSON object (in order to render highlighted text in jsx). This might break your logic. Therefore, if you want to access original structure of your data, it will be under item.cleanData. Remember, item.cleanData only exist if highlightColor props and search textfield is not empty (user is searching)

Usage :

import React, {useRef} from 'react';
import { Text, SafeAreaView, TouchableOpacity } from 'react-native';
import CompleteFlatList from 'react-native-complete-flatlist';

const list = [
  { name: 'Fattah', status: 'Active', time: '8:10 PM', date: '1 Jan 2018' },
  { name: 'Syah', status: 'Active', time: '9:14 PM', date: '1 Dec 2018' },
  { name: 'Izzat', status: 'Active', time: '8:15 PM', date: '1 Jan 2018' },
  { name: 'Ali', status: 'Active', time: '8:10 PM', date: '1 Jan 2018' },
  { name: 'Abu', status: 'Active', time: '8:11 PM', date: '1 Jan 2018' },
  { name: 'Fitri', status: 'Active', time: '8:20 PM', date: '1 Jan 2018' },
  { name: 'Armi', status: 'Active', time: '8:33 PM', date: '1 Jan 2018' },
  { name: 'Eidit', status: 'Active', time: '9:10 PM', date: '1 Jan 2018' },
  { name: 'Hamdan', status: 'Active', time: '10:10 PM', date: '1 Jan 2018' },
  {
    name: 'Muhyiddeen',
    status: 'Blocked',
    time: '10:10 PM',
    date: '9 Feb 2018',
  },
];

const App = () => {
  const ref = useRef();
  const renderItem = ({item, index}) => {
    const data = item.cleanData ? item.cleanData : item;

    console.log('item (if search bar is not empty and prop highlightColor is not empty, item will contains extra data to enable highlight feature)', item);
    console.log('cleanData (if search bar is not empty and prop highlightColor is not empty, cleanData will contain original data structure without extra data)', item.cleanData);


    console.log('this is index number : ' + index);

    console.log(data + ' this is original data');

    return <Text>{item.name}</Text>;
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <CompleteFlatList
        searchKey={['name', 'status', 'time', 'date']}
        pullToRefreshCallback={() => console.log('refreshing')}
        data={list}
        // renderSeparator={null}
        ref={ref}
        highlightColor="yellow"
        renderItem={renderItem}
      />
      <TouchableOpacity onPress={() => ref.current.clearSearch()} style={{ padding: 5 }}>
        <Text>Clear Search</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

export default App;

Upgrading from V 1.x.x to V 2.x.x

Change from renderItem={(data, index) => {} } to renderItem={({item, index, separators}) => {} } (similar like the on in Original Flatlist)

Properties

All FlatList props should work plus props mentioned below

Methods

If you have ref to the component,

const completeFlatList = useRef();
...
 <CompleteFlatList
   ...
    ref={completeFlatList}
   ...
 />

or in component based

<CompleteFlatList
   ...
   ref={c => this.completeFlatList = c}
   ...
/>

you can use any method(s) below: completeFlatList.current.methodName()

or in component based

this.completeFlatList.methodName()