https://github.com/akshit5230/React-Native-Collapsible-Section

A collapsible section / section list with customizable section body and child body. Supports both iOS and Android.
https://github.com/akshit5230/React-Native-Collapsible-Section

Last synced: about 1 month ago
JSON representation

A collapsible section / section list with customizable section body and child body. Supports both iOS and Android.

• Host: GitHub
• URL: https://github.com/akshit5230/React-Native-Collapsible-Section
• Owner: akshit5230
• Created: 2019-05-29T04:09:38.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2019-06-03T14:11:47.000Z (about 5 years ago)
• Last Synced: 2024-01-27T01:28:19.276Z (4 months ago)
• Language: JavaScript
• Size: 6.84 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Lists

• awesome-react-native - rn-collapsible-section - A collapsible section / section list with customizable section body and child body. Supports both iOS and Android. (Components / UI)
• awesome - rn-collapsible-section - A collapsible section / section list with customizable section body and child body. Supports both iOS and Android. (Components / UI)
• awesome-react-native - rn-collapsible-section - A collapsible section / section list with customizable section body and child body. Supports both iOS and Android. (Components / UI)
• awesome-react-native - rn-collapsible-section - A collapsible section / section list with customizable section body and child body. Supports both iOS and Android. (Components / UI)
• awesome-react-native - rn-collapsible-section - A collapsible section / section list with customizable section body and child body. Supports both iOS and Android. (Components / UI)

README

        
# React-Native-Collapsible-Section

A collapsible section / section list with customizable section body and child body. Supports both iOS and Android.

## Installation

`npm i --save rn-collapsible-section`

## Usage

### 1. Minimal Example

```

    This is header

  

}>

  

    This is body

  

```

### 2. Full Example

```

import React from 'react';

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

import CollapsibleSection from 'rn-collapsible-section';

export default class MyExample extends React.Component {

  

  render() {

    return (

      

        

              This is header/collapsed section title

            

          }

        >

          

            This is body seen when section is expanded

          

        

      

    )

  }

  

}

```

### 3. Flatlist Example (Usage as expandable section list)

```

import React from 'react';

import { View, Text, FlatList } from 'react-native;

import CollapsibleSection from 'rn-collapsible-section';

const favouriteMovies = [

    'Mood of the Day',

    'On your Wedding Day',

    'Seducing Mr. Perfect',

    'Whatcha wearing',

    'Spell Bound',

    '100 Days with Mr. Arrogant',

    'Be with you',

    'My Sassy Girl',

    '200 Pounds Beauty',

    'Cheese in Trap',

    'Love 911'

  ]

export default class MyExample extends React.Component {

  

  render() {

    return (

      

        {this.renderExpandableList()}

      

    )

  }

  

  renderExpandableList() {

    return(

       (

          this.renderCollapsibleItem(item)

        )

      />

    )

  }

              

  renderCollapsibleItem(item) {

    return (

      

            {item}

          

        }

      >

        

          Details about the movie...

        

      

    )

  }

}

```

## Props

| Name  | Usage | Example Value |

| --- | --- | --- |

| header | define the header / collapsed view / default view of the expandable view. On press expand or collapse |  |

Thanks!