Code Monkey home page Code Monkey logo

cnilton / react-native-expandable-list-view Goto Github PK

View Code? Open in Web Editor NEW
49.0 2.0 8.0 770 KB

A customizable react-native Expandable ListView (Accordion) component. Resembles the native Android ExpandableListView component, but for react-native (iOS and Android).

License: MIT License

JavaScript 3.36% TypeScript 30.09% Ruby 2.54% Starlark 1.19% Java 31.36% Makefile 3.02% C++ 13.86% Shell 0.95% Objective-C 4.80% Objective-C++ 8.83%
expandablelistview accordion react-native collapse collapsible

react-native-expandable-list-view's Introduction

npm npm npm

About

This is a React-Native ExpandableListView component that you can freely modify its styles.

Instalation

To install just input the following command:

npm i react-native-expandable-listview

or

yarn add react-native-expandable-listview

Data Structure

const CONTENT = [
  {
    id: '1', // required, id of item
    categoryName: 'Item 1', // label of item expandable item
    subCategory: [
      // required, array containing inner objects
      {
        id: '3', // required, of inner object
        name: 'Sub Cat 1', // required, label of inner object
      },
      {
        id: '4',
        name: 'Sub Cat 3',
      },
    ],
  },
  {
    id: '2',
    categoryName: 'Item 8',
    subCategory: [{id: '22', name: 'Sub Cat 22'}],
  },
];

Basic Usage

//...
import React, {Component} from 'react';
import {ExpandableListView} from 'react-native-expandable-listview';

const CONTENT = [
  {
    id: '42',
    categoryName: 'Item 1',
    subCategory: [
      {
        id: '1',
        name:
          "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged",
      },
      {id: '2', name: 'Sub Item 2'},
    ],
  },
  {
    id: '95',
    categoryName: 'Item 2',
    subCategory: [{id: '1', name: 'Sub Item 1'}],
  },
  {
    id: '94',
    categoryName: 'Item 3',
    subCategory: [{id: '1', name: 'Sub Item 1'}],
  },
  {
    id: '93',
    categoryName: 'Item 4',
    subCategory: [{id: '1', name: 'Sub Item 1'}],
  },
  {
    id: '92',
    categoryName: 'Item 5',
    subCategory: [{id: '1', name: 'Sub Item 1'}],
  },
  {
    id: '96',
    categoryName: 'Item 6',
    subCategory: [{id: '1', name: 'Sub Item 1'}],
  },
];

function YourComponent() {
  function handleItemClick({index}) {
    console.log(index);
  };

  function handleInnerItemClick({innerIndex, item, itemIndex}) {
    console.log(innerIndex);
  };

  render() {
    return (
      <ExpandableListView
        data={CONTENT} // required
        onInnerItemClick={handleInnerItemClick}
        onItemClick={handleItemClick}
      />
    );
  }
}

Advanced Usage

//...
import React, {Component} from 'react';
import {Text, Image} from 'react-native';
import {ExpandableListView} from 'react-native-expandable-listview';

const CONTENT = [
  {
    id: '42',
    categoryName: 'Item 1',
    customItem: (
      <View style={{flexDirection: 'column'}}>
        <Text>Custom Item</Text>
        <Text>With</Text>
        <Text>what you</Text>
        <Text>want</Text>
      </View>
    ),
    subCategory: [
      {
        customInnerItem: (
          <View style={{flexDirection: 'column', marginLeft: 15}}>
            <Text>Inner Item</Text>
            <Text>With whatever you need</Text>
          </View>
        ),
        id: '1',
        name: '',
      },
      {id: '2', name: 'Sub Item 2'},
    ],
  },
  {
    id: '96',
    categoryName: 'Item 2',
    subCategory: [{id: '1', name: 'Sub Item 1'}],
  },
  {
    id: '12',
    categoryName: 'Item 3',
    subCategory: [
      {id: '1', name: 'Category 1'},
      {id: '2', name: 'Category 2'},
      {id: '3', name: 'Category 3'},
    ],
  },
];

function YourComponent() {
  const [listDataSource, setListDataSource] = useState([])

  function handleItemClick({index}) {
    console.log(index);
  };

  function handleInnerItemClick({innerIndex, item, itemIndex}) {
    console.log(innerIndex);
  };

  render() {
    return (
      <ExpandableListView
        // ExpandableListViewStyles={{borderTopWidth:1}} // styles to expandable listview
        // renderInnerItemSeparator={false} // true or false, render separator between inner items
        // renderItemSeparator={false} // true or false, render separator between Items
        // itemContainerStyle={{}} // add your styles to all item container of your list
        // itemLabelStyle={{}} // add your styles to all item text of your list
        // customChevron={{}} // your custom image to the indicator
        // chevronColor="white" // color of the default indicator
        // innerItemContainerStyle={{}} // add your styles to all inner item containers of your list
        // itemLabelStyle={{}} // add your styles to all inner item text of your list
        // itemImageIndicatorStyle={{}} // add your styles to the image indicator of your list
        // animated={true} // sets all animations on/off, default on
        // defaultLoaderStyles?: ViewStyle; // Set your styles to default loader (only for animated={true})
        // customLoader?: JSX.Element; Pass your custom loader, while your content is measured and rendered (only for animated={true})
        data={listDataSource}
        onInnerItemClick={handleInnerItemClick}
        onItemClick={handleItemClick}
      />
    );
  }
}
  • All commented options above are optional.

  • If you want to use the "customLoader" prop, provide JSX.Element or a Component, for example:

import {View, ActivityIndicator} from 'react-native';
// ...
  const myLoader = (<View><ActivityIndicator /></View>)
  • If you want to use the "customChevron" prop, provide a image path, for example:
import chevron from '../assets/images/yourImage';
// ...
customChevron = {chevron};

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

react-native-expandable-list-view's People

Contributors

cnx-caiobarroso avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

react-native-expandable-list-view's Issues

Missing content

This is a very specific bug that occurs when one of the items is selected and then the data is updated, inner items may not appear.

UWP support

Hey there, Does the library supports UWP development, aka, react native for windows?

Flatlist not render in subcategory

customInnerItem: _SubCategory(),

function _SubCategory() {
    return (
      <View style={{ flex: 1, backgroundColor: "yellow", height: 500 }}>
        <FlatGrid
          itemDimension={50}
          data={items}
          style={styles.gridView}
          // staticDimension={300}
          // fixed
          spacing={10}
          renderItem={({ item }) => (
            <View
              style={[styles.itemContainer, { backgroundColor: item.code }]}
            >
              <Text style={styles.itemName}>{item.name}</Text>
              <Text style={styles.itemCode}>{item.code}</Text>
            </View>
          )}
        />
      </View>
    );
  }

If I render this method directly it works but if I render it inside a subcategory it just shows blank screen

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.