https://github.com/hejiaji/react-native-expand

A expandable component for React Native
https://github.com/hejiaji/react-native-expand

component expandable react-native

Last synced: 5 days ago
JSON representation

A expandable component for React Native

• Host: GitHub
• URL: https://github.com/hejiaji/react-native-expand
• Owner: hejiaji
• License: mit
• Archived: true
• Created: 2017-02-21T15:44:23.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-02-09T06:08:27.000Z (almost 7 years ago)
• Last Synced: 2024-04-26T02:35:37.144Z (8 months ago)
• Topics: component, expandable, react-native
• Language: JavaScript
• Homepage:
• Size: 563 KB
• Stars: 25
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-expand ★19 - A react-native expandable component for both Android and iOS (Components / UI)
• awesome-reactnative-ui - react-native-expand - native-expand/master/Example/images/demo.gif)| (Others)
• awesome-react-native - react-native-expand ★19 - A react-native expandable component for both Android and iOS (Components / UI)
• awesome-reactnative-ui - react-native-expand - native-expand/master/Example/images/demo.gif)| (Others)
• awesome-react-native - react-native-expand ★19 - A react-native expandable component for both Android and iOS (Components / UI)
• awesome-react-native - react-native-expand ★19 - A react-native expandable component for both Android and iOS (Components / UI)

README

        
# react-native-expand

![travis-ci](https://travis-ci.org/hejiaji/react-native-expand.svg?branch=master)

A expandable component for React Native

![image](Example/images/demo.gif)

## Getting started

```bash

npm install react-native-expand --save

```

## Example usage

```javascript

class App extends React.Component {

  constructor(props) {

    super(props);

    this.ds = [BandageIcon,CallIcon,DislikeIcon,

    FistIcon, FlowersIcon, HeartIcon, LikeIcon,

    LikingIcon, PartyIcon, PokeIcon, SuperLikeIcon, VictoryIcon];

  }

  renderRowData(rowData, index) {

    return (

      

        

        Row{index + 1} {LOREM_IPSUM}

      

    );

  }

  render() {

    return (

      

    )

  }

}

```

## Properties

| Prop | Description | Default |

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

|**`contentPanelStyle`**|The style for the component container.|None|

|**`footerPanelStyle`**|The style for the footer container.|None|

|**`footerTextStyle`**|The style for the footer text.|None|

|**`dataSource`**|The dataSource for the component to use.| None |

|**`renderRow`**|The function to defined how the item to be showed.|None|

|**`renderHeader`**|The function to render customer header for this component.|None|

|**`minRowCount`**|The minimum count of rows to render when the component is collapsed .|`1`|

|**`expandText `**|The text to indicate expand operation.|`↓ Load More`|

|**`collapseText `**|The text to indicate collapse operation.|`↑ Collapse`|