Hooray! The new version 3 has been released.

Installation

npm i react-native-raw-bottom-sheet --save

or

yarn add react-native-raw-bottom-sheet

Example

Single Bottom Sheet

importReact,{useRef}from'react';import{View,Button}from'react-native';importRBSheetfrom'react-native-raw-bottom-sheet';exportdefaultfunctionExample(){constrefRBSheet=useRef();return(<Viewstyle={{flex:1}}><Buttontitle="OPEN BOTTOM SHEET"onPress={()=>refRBSheet.current.open()}/><RBSheetref={refRBSheet}useNativeDriver={true}customStyles={{wrapper:{backgroundColor:'transparent',},draggableIcon:{backgroundColor:'#000',},}}customModalProps={{animationType:'slide',statusBarTranslucent:true,}}customAvoidingViewProps={{enabled:false,}}><YourOwnComponent/></RBSheet></View>);}

Multiple Bottom Sheet

constrefRBSheet=useRef([]);constrenderItem=({item, index})=>{return(<View><TouchableOpacitystyle={styles.button}onPress={()=>refRBSheet.current[index].open()}><Textstyle={styles.buttonText}>ITEM{item+1}</Text></TouchableOpacity><RBSheetref={ref=>(refRBSheet.current[index]=ref)}><Viewstyle={styles.bottomSheetContainer}><Textstyle={styles.bottomSheetText}>I AM ITEM{item+1}</Text></View></RBSheet></View>);};

Props

Available Custom Style

customStyles:{wrapper:{...},// The Root of component (Change the mask's background color here).container:{...},// The Container of bottom sheet (The animated view that contains your component).draggableIcon:{...}// The style of Draggable Icon (If you set `draggable` to `true`).}

Methods

CONTRIBUTING

How to contribute:

License

Author