docs: improve documentation for installation and usage (#256)

README.md

@@ -17,40 +17,80 @@ Open a Terminal in the project root and run:
 yarn add reanimated-bottom-sheet
 ```
 
-or if you use `npm`:
+Or if you use npm:
 
 ```sh
 npm install reanimated-bottom-sheet
 ```
 
-If you are using Expo, you are done.
+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).
 
-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).
+If you are using Expo, to ensure that you get the compatible versions of the libraries, run:
+
+```sh
+expo install react-native-gesture-handler react-native-reanimated
+```
+
+If you are not using Expo, run the following:
+
+```sh
+yarn add react-native-reanimated react-native-gesture-handler
+```
+
+Or if you use npm:
+
+```sh
+npm install react-native-reanimated react-native-gesture-handler
+```
+
+We're done! Now you can build and run the app on your device/simulator.
 
 ## Usage
 
 ```javascript
-import BottomSheet from 'reanimated-bottom-sheet'
-
-class Example extends React.Component {
-  renderContent = () => (
-    /* render */
-  )
-
-  renderHeader = () => (
-    /* render */
-  )
-
-  render() {
-    return (
-      <View style={styles.container}>
-        <BottomSheet
-          snapPoints = {[450, 300, 0]}
-          renderContent = {this.renderContent}
-          renderHeader = {this.renderHeader}
+import * as React from 'react';
+import { StyleSheet, Text, View, Button } from 'react-native';
+import Animated from 'react-native-reanimated';
+import BottomSheet from 'reanimated-bottom-sheet';
+
+export default function App() {
+  const renderContent = () => (
+    <View
+      style={{
+        backgroundColor: 'white',
+        padding: 16,
+        height: 450,
+      }}
+    >
+      <Text>Swipe down to close</Text>
+    </View>
+  );
+
+  const sheetRef = React.useRef(null);
+
+  return (
+    <>
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: 'papayawhip',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Button
+          title="Open Bottom Sheet"
+          onPress={() => sheetRef.current.snapTo(0)}
         />
-    </View>)
-  }
+      </View>
+      <BottomSheet
+        ref={sheetRef}
+        snapPoints={[450, 300, 0]}
+        borderRadius={10}
+        renderContent={renderContent}
+      />
+    </>
+  );
 }
 ```