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
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() |