Home

Awesome

react-native-expand

travis-ci

A expandable component for React Native

image

Getting started

npm install react-native-expand --save

Example usage

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 (
      <View key={index} style={styles.row}>
        <Image style={styles.thumb} source={rowData}/>
        <Text style={styles.text}>Row{index + 1} {LOREM_IPSUM}</Text>
      </View>
    );
  }

  render() {
    return (
      <ExpandablePanel
        contentPanelStyle={styles.container}
        dataSource={this.ds}
        renderRow={this.renderRowData}
      />
    )
  }
}

Properties

PropDescriptionDefault
contentPanelStyleThe style for the component container.None
footerPanelStyleThe style for the footer container.None
footerTextStyleThe style for the footer text.None
dataSourceThe dataSource for the component to use.None
renderRowThe function to defined how the item to be showed.None
renderHeaderThe function to render customer header for this component.None
minRowCountThe 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