CODEWITHSUNDEEP
react-native
angry kiwi
angry kiwi

Reputation: 11445

what react native component for creating list with sub item

what react native component for creating list with sub items? I checked the docs, it could be flatlist, but flatlist doesn't say anything about sliding in sub item.

enter image description here

Upvotes: 0

Views: 1001

Answers (2)

ashish pandey
ashish pandey

Reputation: 1693

You can use <FlatList> for efficient displaying of a large list. This <FlatList> is recommended if you have a large list. Then you can contain each content of a list in <TouchableWithoutFeedback> and provide onPress event handler. for eg.

<FlatList>
    <TouchableWithoutFeedback onPress={/*---include your selection logic here*/}>
        /* your content come here */
    </TouchableWithoutFeedback>
</FlatList>

Also, if you want to apply animation to drop down list I would recommend you to use <LayoutAnimation>

Upvotes: 1

Hardik Virani
Hardik Virani

Reputation: 1755

You can use react-native-collapsible.

it will help you to achieve same things and you can design your own styling by creating customizable view.

Installation

npm install --save react-native-collapsible

Example

import React, { Component } from 'react-native';
import Accordion from 'react-native-collapsible/Accordion';

const SECTIONS = [
  {
    title: 'First',
    content: 'Lorem ipsum...'
  },
  {
    title: 'Second',
    content: 'Lorem ipsum...'
  }
];

class AccordionView extends Component {
  state = {
    activeSections: []
  };

  _renderSectionTitle = section => {
    return (
      <View style={styles.content}>
        <Text>{section.content}</Text>
      </View>
    );
  };

  _renderHeader = section => {
    return (
      <View style={styles.header}>
        <Text style={styles.headerText}>{section.title}</Text>
      </View>
    );
  };

  _renderContent = section => {
    return (
      <View style={styles.content}>
        <Text>{section.content}</Text>
      </View>
    );
  };

  _updateSections = activeSections => {
    this.setState({ activeSections });
  };

  render() {
    return (
      <Accordion
        sections={SECTIONS}
        activeSections={this.state.activeSections}
        renderSectionTitle={this._renderSectionTitle}
        renderHeader={this._renderHeader}
        renderContent={this._renderContent}
        onChange={this._updateSections}
      />
    );
  }
}

You can customize the view by using Properties

Upvotes: 0

Related Questions