0.1.2 • Published 6 years ago

react-native-collapsibleflatlist v0.1.2

Weekly downloads
1
License
ISC
Repository
github
Last release
6 years ago

you can use yarn or npm

    npm install react-native-collapsibleflatlist

or

    yarn add react-native-collapsibleflatlist

alt text

/**
 * @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,
  },
});