react-native-expand

A expandable component for React Native

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

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