Skip to content

Commit 2a91572

Browse files
authored
docs: improve documentation for installation and usage (#256)
1 parent f08e75b commit 2a91572

File tree

1 file changed

+63
-23
lines changed

1 file changed

+63
-23
lines changed

README.md

Lines changed: 63 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -17,40 +17,80 @@ Open a Terminal in the project root and run:
1717
yarn add reanimated-bottom-sheet
1818
```
1919

20-
or if you use `npm`:
20+
Or if you use npm:
2121

2222
```sh
2323
npm install reanimated-bottom-sheet
2424
```
2525

26-
If you are using Expo, you are done.
26+
Now we need to install [`react-native-gesture-handler`](https://github.com/kmagiera/react-native-gesture-handler) and [`react-native-reanimated`](https://github.com/kmagiera/react-native-reanimated).
2727

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).
28+
If you are using Expo, to ensure that you get the compatible versions of the libraries, run:
29+
30+
```sh
31+
expo install react-native-gesture-handler react-native-reanimated
32+
```
33+
34+
If you are not using Expo, run the following:
35+
36+
```sh
37+
yarn add react-native-reanimated react-native-gesture-handler
38+
```
39+
40+
Or if you use npm:
41+
42+
```sh
43+
npm install react-native-reanimated react-native-gesture-handler
44+
```
45+
46+
We're done! Now you can build and run the app on your device/simulator.
2947

3048
## Usage
3149

3250
```javascript
33-
import BottomSheet from 'reanimated-bottom-sheet'
34-
35-
class Example extends React.Component {
36-
renderContent = () => (
37-
/* render */
38-
)
39-
40-
renderHeader = () => (
41-
/* render */
42-
)
43-
44-
render() {
45-
return (
46-
<View style={styles.container}>
47-
<BottomSheet
48-
snapPoints = {[450, 300, 0]}
49-
renderContent = {this.renderContent}
50-
renderHeader = {this.renderHeader}
51+
import * as React from 'react';
52+
import { StyleSheet, Text, View, Button } from 'react-native';
53+
import Animated from 'react-native-reanimated';
54+
import BottomSheet from 'reanimated-bottom-sheet';
55+
56+
export default function App() {
57+
const renderContent = () => (
58+
<View
59+
style={{
60+
backgroundColor: 'white',
61+
padding: 16,
62+
height: 450,
63+
}}
64+
>
65+
<Text>Swipe down to close</Text>
66+
</View>
67+
);
68+
69+
const sheetRef = React.useRef(null);
70+
71+
return (
72+
<>
73+
<View
74+
style={{
75+
flex: 1,
76+
backgroundColor: 'papayawhip',
77+
alignItems: 'center',
78+
justifyContent: 'center',
79+
}}
80+
>
81+
<Button
82+
title="Open Bottom Sheet"
83+
onPress={() => sheetRef.current.snapTo(0)}
5184
/>
52-
</View>)
53-
}
85+
</View>
86+
<BottomSheet
87+
ref={sheetRef}
88+
snapPoints={[450, 300, 0]}
89+
borderRadius={10}
90+
renderContent={renderContent}
91+
/>
92+
</>
93+
);
5494
}
5595
```
5696

0 commit comments

Comments
 (0)