@redbluenat/react-native-expandable-flatlist v1.0.3

React Native Expandable Flatlist

Description

React Native Expandable Flatlist component for React Native, with support for iOS, Android, and React Native Web. It works with custom components and styles.

Library is using react-native-reanimated version 2 for animations. Make sure you have installed it.

Support: RN >=0.59.0

Demo

Android	iOS

Getting started

Installation

Install the package with npm.

npm install @redbluenat/react-native-expandable-flatlist

or with yarn

yarn add @redbluenat/react-native-expandable-flatlist

Run example

 cd example
 yarn install
 cd ios
 pod install
 cd ..
 yarn android or yarn ios

Flatlist Example

import React from 'react';
import {SafeAreaView, Text, View, Image, StyleSheet} from 'react-native';

import ExpandableList from '@redbluenat/react-native-expandable-flatlist';

const LIST_ITEMS = 25;

const FlatListDemo = () => {
  function generateData() {
    let data: string[] = [];
    for (let i = 0; i < LIST_ITEMS; i++) {
      data.push('Item list ' + i);
    }
    return data;
  }

  return (
    <SafeAreaView style={styles.container}>
      <ExpandableList
        sectionList={false}
        listData={generateData()}
        expandItemHeight={250}
        initialNumToRender={10}
        renderExpandListItem={({item}) => (
          <View style={styles.expandItemStyle}>
            <Text style={styles.expandText}>{item} expanded</Text>
            <Image source={require('../assets/leo.png')} style={styles.image} />
          </View>
        )}
        duration={500}
        defaultItemHeight={70}
        listItemStyle={styles.itemList}
        renderItem={({item}) => (
          <View style={styles.itemListContainer}>
            <View style={styles.leftItemSection}>
              <Text style={styles.itemText}>{item}</Text>
            </View>
            <View style={styles.rightItemSection}>
              <Image
                source={require('../assets/chevron.png')}
                style={styles.icon}
              />
            </View>
          </View>
        )}
      />
    </SafeAreaView>
  );
};

export default FlatListDemo;

const styles = StyleSheet.create({
  container: {backgroundColor: '#EFF0F4', flex: 1},
  scrollView: {
    height: '100%',
  },
  itemList: {
    backgroundColor: 'white',
    borderRadius: 12,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  sectionListConfiner: {
    justifyContent: 'center',
    marginLeft: 24,
    flexDirection: 'row',
    marginTop: 24,
    marginBottom: 12,
  },
  itemListContainer: {
    justifyContent: 'center',
    marginLeft: 24,
    flexDirection: 'row',
    marginTop: 24,
    marginBottom: 12,
  },
  leftItemSection: {flex: 0.9},
  rightItemSection: {flex: 0.1},
  icon: {width: 20, height: 20},
  image: {width: 100, height: 100, marginTop: 10},
  itemText: {fontWeight: '600'},
  expandItemStyle: {
    marginLeft: 24,
    marginTop: 24,
    marginBottom: 12,
  },
  expandText: {fontSize: 20, fontWeight: 'bold'},
});

Section list Example

import React from 'react';
import {Text, View, Image, StyleSheet} from 'react-native';

import ExpandableList from '@redbluenat/react-native-expandable-flatlist';

const SectionListDemo = () => {
  return (
    <ExpandableList
      sectionList={true}
      sectionData={[
        {
          data: ['Item list 1', 'Item list 2', 'Item list 3'],
          title: 'Section 1',
        },
        {
          data: ['Item list 1', 'Item list 2', 'Item list 3'],
          title: 'Section 2',
        },
        {
          data: ['Item list 1', 'Item list 2', 'Item list 3'],
          title: 'Section 3',
        },
      ]}
      expandItemHeight={200}
      duration={500}
      renderExpandListItem={({item}) => (
        <View style={styles.expandItemStyle}>
          <Text style={styles.expandText}>{item} expanded</Text>
        </View>
      )}
      renderSectionHeader={title => (
        <View style={styles.sectionListConfiner}>
          <View style={styles.leftItemSection}>
            <Text style={styles.itemText}>{title}</Text>
          </View>
        </View>
      )}
      sectionListHeaderStyle={styles.sectionListConfiner}
      defaultItemHeight={70}
      sectionItemStyle={styles.itemList}
      listItemStyle={styles.itemList}
      renderItem={item => {
        return (
          <View style={styles.sectionListConfiner}>
            <View style={styles.leftItemSection}>
              <Text style={styles.itemText}>{item.item}</Text>
            </View>
            <View style={styles.rightItemSection}>
              <Image
                source={require('../assets/chevron.png')}
                style={styles.icon}
              />
            </View>
          </View>
        );
      }}
    />
  );
};

export default SectionListDemo;

const styles = StyleSheet.create({
  container: {backgroundColor: '#EFF0F4', flex: 1},
  scrollView: {
    height: '100%',
  },
  itemList: {
    backgroundColor: 'white',
    borderRadius: 12,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  sectionListConfiner: {
    justifyContent: 'center',
    marginLeft: 24,
    flexDirection: 'row',
    marginTop: 24,
    marginBottom: 12,
  },
  itemListContainer: {
    justifyContent: 'center',
    marginLeft: 24,
    flexDirection: 'row',
    marginTop: 24,
    marginBottom: 12,
  },
  leftItemSection: {flex: 0.9},
  rightItemSection: {flex: 0.1},
  icon: {width: 20, height: 20},
  itemText: {fontWeight: '600'},
  expandItemStyle: {
    marginLeft: 24,
    marginTop: 24,
    marginBottom: 12,
  },
  expandText: {fontSize: 20, fontWeight: 'bold'},
});

Attributes

Properties for this component:

Author & support

Natalia MS - Github