react-native-customizable-actionsheet

Demos

default	notitle	customize title or item	customize items

Code

// notitle
<ActionSheet
  ref={ref => this.actionsheet = ref}
  funcs={actionSheetFuncs}
  actions={actionSheetActions}
/>
 
// customize the title 
<ActionSheet
  title={<IconElement name='call' size={15} color='red'/>}
  ref={ref => this.actionsheet = ref}
  funcs={actionSheetFuncs}
  actions={actionSheetActions}
/>
 
// OR
 
<ActionSheet
  title={'电话'}
  ref={ref => this.actionsheet = ref}
  funcs={actionSheetFuncs}
  actions={actionSheetActions}
/>
 
// customize items
import {Icon as IconElement} from 'react-native-elements';
import Communications from 'react-native-communications';
<ActionSheet
  title={'电话'}
  ref={ref => this.actionsheet = ref}
  buttonComponents={<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}><IconElement name='call' size={50} color='red' raised reverse/></View>}
/>
 
// actionSheetFuncs: [() => Communications.phonecall(phone, true), () =>  Communications.text(phone), () => {Clipboard.setString(phone);this.actionsheet.hide();} ],
// actionSheetActions: [<View style={{flexDirection: 'row'}}><IconElement name='call' color='blue' size={15}/><Text>{phone}</Text></View>, '发短信给' + phone, '复制号码' ],
 

API

Property	Type	Default	Description
funcs	array of function	[]	function
actions	arrayof (React.Component or string)	[]	item title name
title	React.Component or string	''	top title
buttonShows	number	6	number of items to show
buttonHeight	number	50	item height
buttonComponents	React.Component	null	customize it youself when set, actions and funcs will be useless
buttonComponentsHeight	number	150	buttonComponentsHeight use with buttonComponents
animationType	Easing	Easing.elastic(1)	Animated.timing(v,{easing: animationType})

You Can Enjoy Customization

License