CollapsibleFlatList

A FlaList is collapsible,it can contain all data in the list,and re-render while data has change

Installation

you can use yarn or npm

    npm install react-native-collapsibleflatlist

or

    yarn add react-native-collapsibleflatlist

Preview

Usage

• Simple Usage

/**
 * @flow
 */

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import HiddenFlatlist from 'react-native-collapsibleflatlist';
import { textStyle } from 'src/utils/styles';

type Props = {};

export default class App extends Component<Props> {
  renderItem = ({ item }) => (
    <View style={{ flex: 1 }}>
      <Text style={textStyle.regular}>{item}</Text>
    </View>
  );

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.innerContainer}>
          <HiddenFlatlist
            ref={ref => (this.list = ref)}
            data={['HaHa', '12312412', 'gwhwhdfns', 'hfndfnewr']}
            ListHeaderComponent={
              <View style={{ flex: 1, backgroundColor: '#fff' }}>
                <Text>Header</Text>
              </View>
            }
            keyExtractor={item => item}
            renderItem={this.renderItem}
            defaultValue={false}
            title={'HiddenList'}
            duration={3000}
            titleStyle={{
              backgroundColor: '#000034',
              borderTopWidth: 1,
              borderBottomWidth: 1,
              borderTopColor: '#fff',
              borderBottomColor: '#fff',
            }}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#000034',
  },
  innerContainer: {
    marginTop: 64,
  },
});

Prop

There is some Props can be available.

Props	Description	Data Type	Example
data	Data for the FlatList	Array,[]	['HaHa', '12312412', 'gwhwhdfns', 'hfndfnewr']
keyExtractor	keyExtractor for the FlatList	function	item=>item
renderItem	Takes an item from data and renders it into the list.	function
defaultValue	default of list is shown up or not.	boolean	true
title	title of Header	String	HiddenList
titleStyle	style of title	style
titleTextStyle	style of title text	style
renderTitle	render custom title	ReactComponents

Function

There is some function that can be used by ref.

Function	Description	Example
toggle	toggle the list	this.refs.list.toggle()

About

Author:hank121314

Please let me know,if there is some feature which you want to add!