Skip to content

Commit c170ffd

Browse files
nysamnangnysamnang
committed
Release v3.0.0
1 parent 4cee37b commit c170ffd

35 files changed

+14142
-13680
lines changed

‎.babelrc‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎.eslintrc‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎.eslintrc.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
root: true,
3+
extends: '@react-native',
4+
ignorePatterns: ['node_modules/*'],
5+
};

‎.github/workflows/ci.yml‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
name: CI workflow for Codecov
2+
on: [push, pull_request]
3+
jobs:
4+
run:
5+
runs-on: ubuntu-latest
6+
steps:
7+
- name: Checkout
8+
uses: actions/checkout@v4
9+
- name: Set up Node 18
10+
uses: actions/setup-node@v3
11+
with:
12+
node-version: 18
13+
- name: Install dependencies
14+
run: yarn install
15+
- name: Run tests and collect coverage
16+
run: yarn test --coverage
17+
- name: Upload coverage reports to Codecov
18+
uses: codecov/codecov-action@v4.0.1
19+
with:
20+
token: ${{ secrets.CODECOV_TOKEN }}
21+
slug: nysamnang/react-native-raw-bottom-sheet
22+
files: ./coverage/*.json

‎.gitignore‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
# OSX
22
.DS_Store
33

4-
# Node Module
5-
node_modules/
6-
74
# Jest Test Coverage
85
coverage/
96

10-
# Ignore editor config
11-
.idea
7+
# Example Code
8+
example/node_modules/
9+
example/.expo/
10+
11+
# Node Module
12+
node_modules/

‎.npmignore‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
# OSX
22
.DS_Store
33

4-
# Node Module
5-
node_modules/
4+
# Github Actions
5+
.github/
66

77
# Jest Test Coverage
88
coverage/
99

10-
# Example
11-
example/
10+
# Example Code
11+
example/
12+
13+
# Node Module
14+
node_modules/

‎.prettierrc.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
arrowParens: 'avoid',
3+
bracketSameLine: true,
4+
bracketSpacing: false,
5+
singleQuote: true,
6+
trailingComma: 'all',
7+
};

‎.travis.yml‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎README.md‎

Lines changed: 93 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,29 @@
11
# react-native-raw-bottom-sheet
22

3-
> ## Motivation
4-
>
5-
> Thank you for using the `react-native-raw-bottom-sheet` library.
6-
>
7-
> This library has been published for over 5 years and I've noticed that new libraries are being published frequently, and I hope that those newer libraries will replace this small library with time, that's why I have stopped maintaining this project for the past few years.
8-
>
9-
> However, I was pleasantly surprised to see that the number of installations has remained high over the past year. Therefore, I have decided to continue to maintain this project.
10-
>
11-
> I will ensure that this project remains simple and lightweight, without requiring any configuration or external dependencies.
12-
>
13-
> I would also like to express my gratitude to all the contributors who have made pull requests. Thank you!
3+
## Hooray! The new version 3 has been released.
4+
5+
Please pay close attention if you are upgrading the RBSheet from version 2 to version 3.
6+
7+
- Functional Components: Starting from v3.0.0, RBSheet has been completely rewritten using Functional Components. This improves performance and aligns with modern React practices.
8+
- Prop Removal & Renaming: Several props have been removed and renamed for improved clarity and maintainability. Please refer to the updated documentation for a complete list of available props and their intended behavior.
9+
10+
<hr>
1411

1512
[![npm version](https://badge.fury.io/js/react-native-raw-bottom-sheet.svg)](//npmjs.com/package/react-native-raw-bottom-sheet)
1613
[![npm downloads](https://img.shields.io/npm/dm/react-native-raw-bottom-sheet.svg)
1714
](//npmjs.com/package/react-native-raw-bottom-sheet)
18-
[![Build Status](https://travis-ci.org/nysamnang/react-native-raw-bottom-sheet.svg?branch=master)](https://travis-ci.org/nysamnang/react-native-raw-bottom-sheet)
15+
[![codecov](https://codecov.io/gh/nysamnang/react-native-raw-bottom-sheet/graph/badge.svg?token=tJuJsd1V8e)](https://codecov.io/gh/nysamnang/react-native-raw-bottom-sheet)
1916

2017
- Super Lightweight Component
21-
- Add Your own Component To Bottom Sheet
18+
- Add Your Own Component To Bottom Sheet
2219
- Customize Whatever You Like
2320
- Support Drag Down Gesture
2421
- Support All Orientations
2522
- Support Both Android And iOS
2623
- Smooth Animation
2724
- Zero Configuration
2825
- Zero dependency
29-
- Top Search Ranking (react native bottom sheet) at [npms.io](https://npms.io/search?q=react%20native%20bottom%20sheet)
26+
- Millions of Downloads
3027

3128
| Showcase iOS | Showcase Android |
3229
| :--------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------: |
@@ -46,140 +43,129 @@ yarn add react-native-raw-bottom-sheet
4643

4744
## Example
4845

49-
#### Class component
46+
Please check the [example](https://github.com/nysamnang/react-native-raw-bottom-sheet/tree/master/example) folder to explore more example codes.
5047

51-
```jsx
52-
import React, { Component } from "react";
53-
import { View, Button } from "react-native";
54-
import RBSheet from "react-native-raw-bottom-sheet";
55-
56-
export default class Example extends Component {
57-
render() {
58-
return (
59-
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
60-
<Button title="OPEN BOTTOM SHEET" onPress={() => this.RBSheet.open()} />
61-
<RBSheet
62-
ref={ref => {
63-
this.RBSheet = ref;
64-
}}
65-
height={300}
66-
openDuration={250}
67-
customStyles={{
68-
container: {
69-
justifyContent: "center",
70-
alignItems: "center"
71-
}
72-
}}
73-
>
74-
<YourOwnComponent />
75-
</RBSheet>
76-
</View>
77-
);
78-
}
79-
}
80-
```
81-
82-
#### Functional component
48+
#### Single Bottom Sheet
8349

8450
```jsx
85-
import React, { useRef } from "react";
86-
import { View, Button } from "react-native";
87-
import RBSheet from "react-native-raw-bottom-sheet";
51+
import React, {useRef} from 'react';
52+
import {View, Button} from 'react-native';
53+
import RBSheet from 'react-native-raw-bottom-sheet';
8854

8955
export default function Example() {
9056
const refRBSheet = useRef();
57+
9158
return (
92-
<View
93-
style={{
94-
flex: 1,
95-
justifyContent: "center",
96-
alignItems: "center",
97-
backgroundColor: "#000"
98-
}}
99-
>
100-
<Button title="OPEN BOTTOM SHEET" onPress={() => refRBSheet.current.open()} />
59+
<View style={{flex: 1}}>
60+
<Button
61+
title="OPEN BOTTOM SHEET"
62+
onPress={() => refRBSheet.current.open()}
63+
/>
10164
<RBSheet
10265
ref={refRBSheet}
103-
closeOnDragDown={true}
104-
closeOnPressMask={false}
66+
useNativeDriver={true}
10567
customStyles={{
10668
wrapper: {
107-
backgroundColor: "transparent"
69+
backgroundColor: 'transparent',
10870
},
10971
draggableIcon: {
110-
backgroundColor: "#000"
111-
}
72+
backgroundColor: '#000',
73+
},
11274
}}
113-
>
75+
customModalProps={{
76+
animationType: 'slide',
77+
statusBarTranslucent: true,
78+
}}
79+
customAvoidingViewProps={{
80+
enabled: false,
81+
}}>
11482
<YourOwnComponent />
11583
</RBSheet>
11684
</View>
11785
);
11886
}
11987
```
12088

121-
#### Dynamic Bottom Sheet
89+
#### Multiple Bottom Sheet
12290

12391
```jsx
124-
renderItem = (item, index) => (
125-
<View>
126-
<Button title={`OPEN BOTTOM SHEET-${index}`} onPress={() => this[RBSheet + index].open()} />
127-
<RBSheet
128-
ref={ref => {
129-
this[RBSheet + index] = ref;
130-
}}
131-
>
132-
<YourOwnComponent onPress={() => this[RBSheet + index].close()} />
133-
</RBSheet>
134-
</View>
135-
);
92+
const refRBSheet = useRef([]);
93+
94+
const renderItem = ({item, index}) => {
95+
return (
96+
<View>
97+
<TouchableOpacity
98+
style={styles.button}
99+
onPress={() => refRBSheet.current[index].open()}>
100+
<Text style={styles.buttonText}>ITEM {item + 1}</Text>
101+
</TouchableOpacity>
102+
103+
<RBSheet ref={ref => (refRBSheet.current[index] = ref)}>
104+
<View style={styles.bottomSheetContainer}>
105+
<Text style={styles.bottomSheetText}>I AM ITEM {item + 1}</Text>
106+
</View>
107+
</RBSheet>
108+
</View>
109+
);
110+
};
136111
```
137112

138113
## Props
139114

140-
| Props | Type | Description | Default |
141-
| ---------------------------| -------- | ------------------------------------------------------- | -------- |
142-
| animationType | string | Background animation ("none", "fade", "slide") | "none" |
143-
| height | number | Height of Bottom Sheet | 260 |
144-
| minClosingHeight | number | Minimum height of Bottom Sheet before close | 0 |
145-
| openDuration | number | Open Bottom Sheet animation duration | 300 (ms) |
146-
| closeDuration | number | Close Bottom Sheet animation duration | 200 (ms) |
147-
| closeOnDragDown | boolean | Use gesture drag down to close Bottom Sheet | false |
148-
| closeOnTouchablesDragDown | boolean | Use gesture drag down on touchable components to close Bottom Sheet<br/> (Doesn't work for touchable components inside a scrollView) <br/> (closeOnDragDown must be enabled for this to work) | false |
149-
| dragFromTopOnly | boolean | Drag only the top area of the draggableIcon to close Bottom Sheet instead of the whole content | false |
150-
| closeOnPressMask | boolean | Press the area outside to close Bottom Sheet | true |
151-
| closeOnPressBack | boolean | Press back android to close Bottom Sheet (Android only) | true |
152-
| onClose | function | Callback function when Bottom Sheet has closed | null |
153-
| onOpen | function | Callback function when Bottom Sheet has opened | null |
154-
| customStyles | object | Custom style to Bottom Sheet | {} |
155-
| keyboardAvoidingViewEnabled | boolean | Enable KeyboardAvoidingView | true (ios) |
156-
| customModalProps | object | Custom props to Bottom Sheet Modal | {} |
115+
| Props | Type | Description | Default |
116+
| ----------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- |
117+
| height | number | The height of bottom sheet. | 260 |
118+
| openDuration | number | Duration of the animation when opening bottom sheet. | 300 (ms) |
119+
| closeDuration | number | Duration of the animation when closing bottom sheet. | 200 (ms) |
120+
| closeOnPressMask | boolean | Press the outside area (mask) to close bottom sheet. | true |
121+
| closeOnPressBack | boolean | Press hardware back android to close bottom sheet (Android only). | false |
122+
| draggable | boolean | Enable the drag-down gesture to close the bottom sheet. | false |
123+
| dragOnContent | boolean | The draggable is only worked on the draggable icon. Set this to `true`<br />if you want to drag on the content as well (doesn't work with ScrollView). | false |
124+
| useNativeDriver | boolean | Use the native driver to run smoother animation. | false |
125+
| customStyles | object | Add [custom styles](#available-custom-style) to bottom sheet. | {} |
126+
| customModalProps | object | Add [custom props](https://reactnative.dev/docs/modal#props) to modal. | {} |
127+
| customAvoidingViewProps | object | Add [custom props](https://reactnative.dev/docs/keyboardavoidingview#props) to KeyboardAvoidingView. | {} |
128+
| onOpen | function | Callback function that will be called after the bottom sheet has been opened. | null |
129+
| onClose | function | Callback function that will be called after the bottom sheet has been closed. | null |
157130

158131
### Available Custom Style
159132

160-
```
133+
```js
161134
customStyles: {
162-
wrapper: {...}, // The Root of Component (You can change the `backgroundColor` or any styles)
163-
container: {...}, // The Container of Bottom Sheet
164-
draggableIcon: {...} // The Draggable Icon (If you set closeOnDragDown to true)
135+
wrapper: {...}, // The Root of component (Change the mask's background color here).
136+
container: {...}, // The Container of bottom sheet (The animated view that contains your component).
137+
draggableIcon: {...} // The style of Draggable Icon (If you set `draggable` to `true`).
165138
}
166139
```
167140

168141
## Methods
169142

170-
| Method Name | Description |
171-
| ----------- | ------------------ |
172-
| open | Open Bottom Sheet |
173-
| close | Close Bottom Sheet |
143+
| Method Name | Description | Usage |
144+
| ----------- | --------------------------------- | ---------------------------- |
145+
| open | The method to open bottom sheet. | `refRBSheet.current.open()` |
146+
| close | The method to close bottom sheet. | `refRBSheet.current.close()` |
147+
148+
## CONTRIBUTING
149+
150+
I'm really glad you're reading this, because we need volunteer developers to help bring this project to life.
174151

175-
## Note
152+
#### How to contribute:
176153

177-
- If you combind `RBSheet` with <a href="https://github.com/kmagiera/react-native-gesture-handler" target="_blank">react-native-gesture-handler</a>, the components inside RBSheet will not fire onPress event on Android [#37](https://github.com/nysamnang/react-native-raw-bottom-sheet/issues/37).
178-
- The demo source codes are in `example folder`.
154+
1. Clone this repository
155+
2. Open project, then run `yarn` to install devDependencies
156+
3. Add your magic code for contribution
157+
4. Test your code
158+
- Navigate to `example` folder
159+
- Run `yarn` & `yarn start` to run the example project
160+
- Test your code in `example/App.js`
161+
5. Update `README.md` to update documentation (Optional)
162+
6. Write unit testing in `__tests__` folder (Optional)
163+
7. Update `index.d.ts` to update typing (Optional)
164+
8. Make a pull request, Genius!
179165

180166
## License
181167

182-
This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/nysamnang/react-native-raw-bottom-sheet/blob/master/LICENSE) file for details
168+
This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/nysamnang/react-native-raw-bottom-sheet/blob/master/LICENSE) file for details.
183169

184170
## Author
185171

0 commit comments

Comments
 (0)