Skip to content

Commit 8d3d7e9

Browse files
satya164osdnk
authored andcommitted
Improvements to the README (#3)
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.
1 parent 8670b2a commit 8d3d7e9

File tree

1 file changed

+28
-14
lines changed

1 file changed

+28
-14
lines changed

README.md

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
## Reanimated Bottom Sheet
2-
Highly configurable component imitating native bottom sheet behavior built from scratch with react-native-gesture-handler and react-native-reanimated.
3-
No JS animations, 60 FPS!
1+
# Reanimated Bottom Sheet
2+
Highly configurable component imitating [native bottom sheet behavior](https://material.io/design/components/sheets-bottom.html#standard-bottom-sheet), with fully native 60 FPS animations!
3+
4+
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).
45

56
Usable with Expo with no extra native dependencies!
67

@@ -9,19 +10,25 @@ Usable with Expo with no extra native dependencies!
910

1011

1112
## 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:
1313

14-
```
14+
Open a Terminal in the project root and run:
15+
16+
```sh
1517
yarn add reanimated-bottom-sheet
1618
```
1719

18-
or:
19-
```
20+
or if you use `npm`:
21+
22+
```sh
2023
npm install reanimated-bottom-sheet
2124
```
2225

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).
2329

2430
## Usage
31+
2532
```javascript
2633
import BottomSheet from 'reanimated-bottom-sheet'
2734

@@ -45,7 +52,6 @@ class Example extends React.Component {
4552
</View>)
4653
}
4754
}
48-
4955
```
5056

5157
## Props
@@ -63,26 +69,34 @@ class Example extends React.Component {
6369

6470

6571
## Methods
72+
6673
### `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.
6876

6977
```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)
7180
```
7281

82+
Here `this.bottomSheetRef` refers [to the `ref`](https://reactjs.org/docs/react-api.html#reactcreateref) passed to the `BottomSheet` component.
83+
7384
## Example
74-
Few more complicated examples can be found in `Example` folder
7585

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
7789
cd Example
7890
yarn
7991
expo start
8092
```
8193

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).
8395

8496
## 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.
99+
86100
1. Play with magic config values
87101
2. Horizontal mode
88102
3. Deal with GH in inner scrollView

0 commit comments

Comments
 (0)