Installation

npm i -S react-native-custom-actionsheet

Usage of ActionSheetCustom

importReact,{Component}from'react'import{View,Text,StyleSheet}from'react-native'import{ActionSheetCustomasActionSheet}from'react-native-custom-actionsheet'constCANCEL_INDEX=0constDESTRUCTIVE_INDEX=4constoptions=['Cancel','Apple',{component:<Textstyle={{color:'orange',fontSize:24}}>Banana</Text>,height:80,},'Watermelon',{component:<Textstyle={{color:'blueviolet'}}>Apple</Text>,height:40,},]consttitle=<Textstyle={{color:'crimson',fontSize:18}}>Which one do you like?</Text>classCustomExampleextendsComponent{state={selected:1,}showActionSheet=()=>this.actionSheet.show()getActionSheetRef=ref=>(this.actionSheet=ref)handlePress=index=>this.setState({selected:index})render(){const{ selected}=this.stateconstselectedText=options[selected].component||options[selected]return(<Viewstyle={styles.wrapper}><Textstyle={{marginBottom:20}}>          I like{selectedText}</Text><Textstyle={styles.button}onPress={this.showActionSheet}>          Custom ActionSheet</Text><ActionSheetref={this.getActionSheetRef}title={title}message="custom message custom message custom message custom message custom message custom message "options={options}cancelButtonIndex={CANCEL_INDEX}destructiveButtonIndex={DESTRUCTIVE_INDEX}onPress={this.handlePress}/></View>)}}

Usage

importReactfrom'react'import{View,Text,StyleSheet}from'react-native'importActionSheetfrom'react-native-custom-actionsheet'constCANCEL_INDEX=0constDESTRUCTIVE_INDEX=4constoptions=['Cancel','Apple','Banana','Watermelon','Durian']consttitle='Which one do you like?'classDefaultExampleextendsReact.Component{state={selected:'',}showActionSheet=()=>this.actionSheet.show()getActionSheetRef=ref=>(this.actionSheet=ref)handlePress=(index)=>this.setState({selected:index})render(){return(<Viewstyle={styles.wrapper}><Textstyle={{marginBottom:20}}>          I like{options[this.state.selected]}</Text><Textstyle={styles.button}onPress={this.showActionSheet}>          Default ActionSheet</Text><ActionSheetref={this.getActionSheetRef}title={title}message="custom message custom message custom message custom message custom message custom message "options={options}cancelButtonIndex={CANCEL_INDEX}destructiveButtonIndex={DESTRUCTIVE_INDEX}onPress={this.handlePress}/></View>)}}

Props