Gathering detailed insights and metrics for react-native-raw-bottom-sheet
Gathering detailed insights and metrics for react-native-raw-bottom-sheet
Gathering detailed insights and metrics for react-native-raw-bottom-sheet
Gathering detailed insights and metrics for react-native-raw-bottom-sheet
npm install react-native-raw-bottom-sheet
Module System
Min. Node Version
Typescript Support
Node Version
NPM Version
1,087 Stars
164 Commits
195 Forks
7 Watching
3 Branches
15 Contributors
Updated on 26 Nov 2024
JavaScript (100%)
Cumulative downloads
Total Downloads
Last day
-13.1%
5,401
Compared to previous day
Last week
8.1%
32,740
Compared to previous week
Last month
3.2%
135,345
Compared to previous month
Last year
27.3%
1,267,526
Compared to previous year
Please pay close attention if you are upgrading the RBSheet from version 2 to version 3.
Showcase iOS | Showcase Android |
---|---|
npm i react-native-raw-bottom-sheet --save
yarn add react-native-raw-bottom-sheet
Please check the example folder to explore more example codes.
1import React, {useRef} from 'react'; 2import {View, Button} from 'react-native'; 3import RBSheet from 'react-native-raw-bottom-sheet'; 4 5export default function Example() { 6 const refRBSheet = useRef(); 7 8 return ( 9 <View style={{flex: 1}}> 10 <Button 11 title="OPEN BOTTOM SHEET" 12 onPress={() => refRBSheet.current.open()} 13 /> 14 <RBSheet 15 ref={refRBSheet} 16 useNativeDriver={true} 17 customStyles={{ 18 wrapper: { 19 backgroundColor: 'transparent', 20 }, 21 draggableIcon: { 22 backgroundColor: '#000', 23 }, 24 }} 25 customModalProps={{ 26 animationType: 'slide', 27 statusBarTranslucent: true, 28 }} 29 customAvoidingViewProps={{ 30 enabled: false, 31 }}> 32 <YourOwnComponent /> 33 </RBSheet> 34 </View> 35 ); 36}
1const refRBSheet = useRef([]); 2 3const renderItem = ({item, index}) => { 4 return ( 5 <View> 6 <TouchableOpacity 7 style={styles.button} 8 onPress={() => refRBSheet.current[index].open()}> 9 <Text style={styles.buttonText}>ITEM {item + 1}</Text> 10 </TouchableOpacity> 11 12 <RBSheet ref={ref => (refRBSheet.current[index] = ref)}> 13 <View style={styles.bottomSheetContainer}> 14 <Text style={styles.bottomSheetText}>I AM ITEM {item + 1}</Text> 15 </View> 16 </RBSheet> 17 </View> 18 ); 19};
Props | Type | Description | Default |
---|---|---|---|
height | number | The height of bottom sheet. | 260 |
openDuration | number | Duration of the animation when opening bottom sheet. | 300 (ms) |
closeDuration | number | Duration of the animation when closing bottom sheet. | 200 (ms) |
closeOnPressMask | boolean | Press the outside area (mask) to close bottom sheet. | true |
closeOnPressBack | boolean | Press hardware back android to close bottom sheet (Android only). | false |
draggable | boolean | Enable the drag-down gesture to close the bottom sheet. | false |
dragOnContent | boolean | The draggable is only worked on the draggable icon. Set this to true if you want to drag on the content as well (doesn't work with ScrollView). | false |
useNativeDriver | boolean | Use the native driver to run smoother animation. | false |
customStyles | object | Add custom styles to bottom sheet. | {} |
customModalProps | object | Add custom props to modal. | {} |
customAvoidingViewProps | object | Add custom props to KeyboardAvoidingView. | {} |
onOpen | function | Callback function that will be called after the bottom sheet has been opened. | null |
onClose | function | Callback function that will be called after the bottom sheet has been closed. | null |
1customStyles: { 2 wrapper: {...}, // The Root of component (Change the mask's background color here). 3 container: {...}, // The Container of bottom sheet (The animated view that contains your component). 4 draggableIcon: {...} // The style of Draggable Icon (If you set `draggable` to `true`). 5}
Method Name | Description | Usage |
---|---|---|
open | The method to open bottom sheet. | refRBSheet.current.open() |
close | The method to close bottom sheet. | refRBSheet.current.close() |
I'm really glad you're reading this, because we need volunteer developers to help bring this project to life.
yarn
to install devDependenciesexample
folderyarn
& yarn start
to run the example projectexample/App.js
README.md
to update documentation (Optional)__tests__
folder (Optional)index.d.ts
to update typing (Optional)This project is licensed under the MIT License - see the LICENSE.md file for details.
Made with ❤️ by NY Samnang.
No vulnerabilities found.
Reason
no vulnerabilities detected
Reason
no dangerous workflow patterns detected
Reason
all dependencies are pinned
Details
Reason
tokens are read-only in GitHub workflows
Reason
license file detected
Details
Reason
no binaries found in the repo
Reason
update tool detected
Details
Reason
GitHub code reviews found for 15 commits out of the last 30 -- score normalized to 5
Details
Reason
0 commit(s) out of 30 and 0 issue activity out of 30 found in the last 90 days -- score normalized to 0
Reason
no badge detected
Reason
security policy file not detected
Reason
project is not fuzzed
Reason
branch protection not enabled on development/release branches
Details
Score
Last Scanned on 2022-08-15
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More