react-native-expand
A expandable component for React Native
Getting started
npm install react-native-expand --saveExample 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 |
