react-native-hiddenflatlist

0.2.1 • Public • Published

This package has been renamed to react-native-collapsibleflatlist

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-hiddenFlatList

or

    yarn add react-native-hiddenFlatList

Preview

alt text

Usage

  • Simple Usage
/**
 * @flow
 */

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

type Props = {};

export default class App extends Component<Props> {
  renderItem = ({ item }) => (
    <View style={{ flex: 1 }}>
        <Text 
            style={{
                fontSize: 20,
                color: '#fff'
            }}
        >
            {item}
        </Text>
    </View>
  );

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

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!

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
0.2.10latest

Version History

VersionDownloads (Last 7 Days)Published
0.2.10
0.2.00
0.1.80

Package Sidebar

Install

npm i react-native-hiddenflatlist

Weekly Downloads

0

Version

0.2.1

License

ISC

Unpacked Size

170 kB

Total Files

18

Last publish

Collaborators

  • hank121314