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

NamebuttonTextTypestringdefault-descriptionText inside the botton
NamebodyTextTypestringdefault-description Description content inside the bottomsheet
NamebuttonStyles.widthTypeintdefault200description buttonStyles - width of the button
NamebuttonStyles.heightTypeintdefault50description buttonStyles - height of the button
NamebuttonStyles.borderRadiusTypeintdefault0description buttonStyles - Border Radius of the button
NamebuttonStyles.alignItemsTypestringdefaultcenterdescription buttonStyles - button alignment with regards to width
NamebuttonStyles.justifyContentTypestringdefaultcenterdescription buttonStyles - button justifyContent with regards to height
NamebuttonStyles.fontSizeTypeintdefault15description buttonStyles - button justifyContent with regards to height
NamebuttonStyles.buttonTextColorTypeintdefault15description buttonStyles - color of the button text
NamebuttonStyles.backgroundColorTypeintdefault15description buttonStyles - backgroundColor of the button
NamebottomSheetStyles.backgroundColorTypeintdefault15description bottomSheetStyles -Background animation ('none', 'fade', 'slide')
NamebottomSheetStyles.animationDurationTypeintdefault300description bottomSheetStyles - animationDuration of the Background animation
NamebottomSheetStyles.heightTypeintdefault15description bottomSheetStyles -height of the bottom sheet
NamebottomSheetStyles.borderTopLeftRadiusTypeintdefault30description bottomSheetStyles - Top Left border radius of the bottom sheet
NamebottomSheetStyles.borderTopRightRadiusTypeintdefault30description bottomSheetStyles - Top right border radius of the bottom sheet
NamebottomSheetStyles.backgroundColorTypestringdefaultwhitedescription bottomSheetStyles - Background color of the bottom sheet
NamebottomSheetStyles.textFontSizeTypestringdefault-description bottomSheetStyles - Font size of the bottom sheet content(bodyText)