You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hope this looks good. Another feedback I have is to make the example under "Usage" section runnable by copy-pasting the code, and adding a "Try this example on Snack" link below it.
Built from scratch with [react-native-gesture-handler](https://github.com/kmagiera/react-native-gesture-handler) and [react-native-reanimated](https://github.com/kmagiera/react-native-reanimated).
4
5
5
6
Usable with Expo with no extra native dependencies!
6
7
@@ -9,19 +10,25 @@ Usable with Expo with no extra native dependencies!
9
10
10
11
11
12
## Installation
12
-
Make sure that you have previously installed and linked [react-native-gesture-handler](https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html) and [react-native-reanimated](https://github.com/kmagiera/react-native-reanimated) and then:
13
13
14
-
```
14
+
Open a Terminal in the project root and run:
15
+
16
+
```sh
15
17
yarn add reanimated-bottom-sheet
16
18
```
17
19
18
-
or:
19
-
```
20
+
or if you use `npm`:
21
+
22
+
```sh
20
23
npm install reanimated-bottom-sheet
21
24
```
22
25
26
+
If you are using Expo, you are done.
27
+
28
+
If you don't use Expo, install and link [react-native-gesture-handler](https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html) and [react-native-reanimated](https://github.com/kmagiera/react-native-reanimated).
23
29
24
30
## Usage
31
+
25
32
```javascript
26
33
importBottomSheetfrom'reanimated-bottom-sheet'
27
34
@@ -45,7 +52,6 @@ class Example extends React.Component {
45
52
</View>)
46
53
}
47
54
}
48
-
49
55
```
50
56
51
57
## Props
@@ -63,26 +69,34 @@ class Example extends React.Component {
63
69
64
70
65
71
## Methods
72
+
66
73
### `snapTo(index)`
67
-
Imperative command for snapping to snap point in given index. E.g.
74
+
75
+
Imperative method on for snapping to snap point in given index. E.g.
68
76
69
77
```javascript
70
-
this.bottomSheet.current.snapTo(0)
78
+
// Snap to the snap point at index 0 (e.g. 450 in [450, 300, 0])
79
+
this.bottomSheetRef.current.snapTo(0)
71
80
```
72
81
82
+
Here `this.bottomSheetRef` refers [to the `ref`](https://reactjs.org/docs/react-api.html#reactcreateref) passed to the `BottomSheet` component.
83
+
73
84
## Example
74
-
Few more complicated examples can be found in `Example` folder
75
85
76
-
```javascript
86
+
More complex examples can be found in the `Example` folder. To view the examples in the [Expo app](https://expo.io/), open a Terminal and run:
87
+
88
+
```sh
77
89
cd Example
78
90
yarn
79
91
expo start
80
92
```
81
93
82
-
Project is also available on [Expo](https://expo.io/@osdnk/reanimated-bottomsheet-expample).
94
+
The example app is also available on [Expo](https://expo.io/@osdnk/reanimated-bottomsheet-expample).
83
95
84
96
## Todo
85
-
It's not very finished and some work has to be done yet.
97
+
98
+
It's not finished and some work has to be done yet.
0 commit comments