BottomSheet
Modern way of Showing modal in Mobile app is Bottom Sheet. Build a completely configurable bottomsheet based notification using this component.
Usage
import {BottomSheet} from "react-native-lights";const BottomSheet = () => {const data ={buttonText: 'card1',buttonStyles:{borderRadius:5,backgroundColor:"#42f5e9", buttonTextColor:"black"},bottomSheetStyles:{backgroundColor:"#edfcfb", textFontSize:15},bodyText: 'Lorem ipsum dolor sit amet et nuncat mergitur',}return (<View style={{flex:1}}><BottomSheet data={data}/></View>);};
Props
NamebuttonText | Typestring | default- | descriptionText inside the botton |
NamebodyText | Typestring | default- | description Description content inside the bottomsheet |
NamebuttonStyles.width | Typeint | default200 | description buttonStyles - width of the button |
NamebuttonStyles.height | Typeint | default50 | description buttonStyles - height of the button |
NamebuttonStyles.borderRadius | Typeint | default0 | description buttonStyles - Border Radius of the button |
NamebuttonStyles.alignItems | Typestring | defaultcenter | description buttonStyles - button alignment with regards to width |
NamebuttonStyles.justifyContent | Typestring | defaultcenter | description buttonStyles - button justifyContent with regards to height |
NamebuttonStyles.fontSize | Typeint | default15 | description buttonStyles - button justifyContent with regards to height |
NamebuttonStyles.buttonTextColor | Typeint | default15 | description buttonStyles - color of the button text |
NamebuttonStyles.backgroundColor | Typeint | default15 | description buttonStyles - backgroundColor of the button |
NamebottomSheetStyles.backgroundColor | Typeint | default15 | description bottomSheetStyles -Background animation ('none', 'fade', 'slide') |
NamebottomSheetStyles.animationDuration | Typeint | default300 | description bottomSheetStyles - animationDuration of the Background animation |
NamebottomSheetStyles.height | Typeint | default15 | description bottomSheetStyles -height of the bottom sheet |
NamebottomSheetStyles.borderTopLeftRadius | Typeint | default30 | description bottomSheetStyles - Top Left border radius of the bottom sheet |
NamebottomSheetStyles.borderTopRightRadius | Typeint | default30 | description bottomSheetStyles - Top right border radius of the bottom sheet |
NamebottomSheetStyles.backgroundColor | Typestring | defaultwhite | description bottomSheetStyles - Background color of the bottom sheet |
NamebottomSheetStyles.textFontSize | Typestring | default- | description bottomSheetStyles - Font size of the bottom sheet content(bodyText) |