react-native-according-smashup
Version:
This is React native javaScript component which is used to expand the list hide/show the list etc...
171 lines (136 loc) • 5.08 kB
Markdown
# react-native-according-smashup
This is React native javaScript component which is used to expand the list hide/show the list etc...
## Installation
npm install react-native-according-smashup
yarn add react-native-according-smashup
## Usage
import {SmashUp,Head, Body, ClickToExpand} from 'react-native-according-smashup';
//Simple collapsable
<SmashUp>
<Head>
<View>
<Text>Click here</Text>
</View>
</Head>
<Body>
<Text>Ta daa!</Text>
</Body>
</SmashUp>
//click to Expand
<ClickToExpand
list={this.state.list}
header={this._head}
body={this._body}
keyExtractor={item => item.key}
/>
SmashUp Components are considered as View , so you can use all the props of the View Component like style.
## Demo
***Simple Collapse***
import { View,Text } from 'react-native';
import { SmashUp, Head, Body } from "react-native-according-smashup";
import { Thumbnail, List, ListItem, Separator } from 'native-base';
<View>
<SmashUp>
<Head>
<Separator bordered>
<Text>FORWARD</Text>
</Separator>
</Head>
<Body>
<ListItem >
<Text>Aaron Bennet</Text>
</ListItem>
<ListItem>
<Text>Claire Barclay</Text>
</ListItem>
<ListItem last>
<Text>Kelso Brittany</Text>
</ListItem>
</Body>
</SmashUp>
<SmashUp>
<Head>
<Separator bordered>
<Text>FORWARD</Text>
</Separator>
</Head>
<Body>
<ListItem >
<Text>Aaron Bennet</Text>
</ListItem>
<ListItem>
<Text>Claire Barclay</Text>
</ListItem>
<ListItem last>
<Text>Kelso Brittany</Text>
</ListItem>
</Body>
</SmashUp>
</View>
***Click To Expand List***
import {ClickToExpand} from "react-native-according-smashup";
import { Separator } from 'native-base';
import { View, Text} from 'react-native';
this.state={
list:[
{
id:1,
title: 'Getting Started',
body: 'React native according?smashUp component, very good to use in toggles & show/hide content'
},
{
id:2,
title: 'Components',
body: 'ClickToExpand,SmashUp,Head & Body'
}
],
}
_head(item){
return(
<Separator bordered style={{alignItems:'center'}}>
<Text>{item.title}</Text>
</Separator>
);
}
_body(item){
return (
<View style={{padding:10}}>
<Text style={{textAlign:'center'}}>{item.body}</Text>
</View>
);
}
render() {
return (
<ClickToExpand
list={this.state.list}
header={this._head}
body={this._body}
keyExtractor={item => `${item.id}`}
/>
);
}
## Components
**Head & Body**
you can use Head and Body as a view and you can styule it as per your prefences when you touched the header it will SmashUp(that means it will expand) the body will be appear
**Collapse**
yopu need to use SmashUp to wrap your Head and body
| Props Name | Default | Type | Description |
| :--: | :--: | :--: | :------------------------- |
| isExpanded | false | boolean | show the Body if true |
| disabled | false | boolean | disable the click on the collapse header if true |
| onToggle | ()=> boolean | Function(isExpanded:boolean) | this function take a input in boolean |
| handleLongPress | void() | Function() | it handless the longPress if user longPress on header at that time this function calls |
| touchableOpacityProps | {} | Object | you can pass extra props to yopu touch events
if you want to change the state of parent then you can use the onToggle or isExoanded as an input and output to syncronise the parenr srare and child state
**ClickToExpand**
ClickToExpand components allow you to show an accordion with list of sections (head&body)
It's based on FlatList. Which means all the props related to FlatList are supported.
| Props Name | Default | Type | Description |
| :--: | :----- | :--: | :------------------------- |
| list or data | [] | Array | |
| header | (item, index, isExpanded)=>function | Function | this function takes an array as an input and render the array into header |
| body | (item, index, isExpanded)=>function | Function | this function takes an array as an input and render the array into body |
| onToggle | (keyExtractor(item, index) or index, index, isExpanded) => undefined | Function ||
| expandedKey | undefined | Any | |
| expandedIndex | undefined | number | |
| isDisabled | (item, index) => undefined | Function | this function will allow boolean value and it will disable the List |