Merge branch 'main' into feat/inline-sheet

README.md

@@ -1,8 +1,8 @@
 # React Native True Sheet
 
 [![CI](https://github.com/lodev09/react-native-true-sheet/actions/workflows/ci.yml/badge.svg)](https://github.com/lodev09/react-native-true-sheet/actions/workflows/ci.yml)
-![GitHub Release](https://img.shields.io/github/v/release/lodev09/react-native-true-sheet)
-![NPM Downloads](https://img.shields.io/npm/dw/%40lodev09%2Freact-native-true-sheet)
+[![NPM Version](https://img.shields.io/npm/v/%40lodev09%2Freact-native-true-sheet)](https://www.npmjs.com/package/@lodev09/react-native-true-sheet)
+[![NPM Downloads](https://img.shields.io/npm/d18m/%40lodev09%2Freact-native-true-sheet)](https://www.npmjs.com/package/@lodev09/react-native-true-sheet)
 
 The true native bottom sheet experience for your React Native Apps. 💩
 
@@ -39,27 +39,34 @@ npm i @lodev09/react-native-true-sheet
 ```tsx
 import { TrueSheet } from "@lodev09/react-native-true-sheet"
 
-// ...
-
-const sheet = useRef<TrueSheet>(null)
-
-const openSheet = async () => {
-  await sheet.current?.present()
-  console.log('horray! sheet has been presented 💩')
+export const App = () => {
+  const sheet = useRef<TrueSheet>(null)
+
+  // Present the sheet ✅
+  const present = async () => {
+    await sheet.current?.present()
+    console.log('horray! sheet has been presented 💩')
+  }
+
+  // Dismiss the sheet ✅
+  const dismiss = async () => {
+    await sheet.current?.dismiss()
+    console.log('Bye bye 👋')
+  }
+
+  return (
+    <View>
+      <Button onPress={present} title="Present" />
+      <TrueSheet
+        ref={sheet}
+        sizes={['auto', 'large']}
+        cornerRadius={24}
+      >
+        <Button onPress={dismiss} title="Dismiss" />
+      </TrueSheet>
+    </View>
+  )
 }
-
-return (
-  <View>
-    <Button onPress={openSheet} title="Open Sheet" />
-    <TrueSheet
-      ref={sheet}
-      sizes={['auto', 'large']}
-      cornerRadius={24}
-    >
-      <View />
-    </TrueSheet>
-  </View>
-)
 ```
 
 ## v1 Roadmap

docs/docs/guides/footer.mdx

@@ -3,7 +3,7 @@ title: Adding Footer
 description: Add a floating Footer component to the sheet.
 ---
 
-Do you need an FAB (Floating Action Button) on the sheet? Or perhaps a small banner at the bottom? We've got you covered!
+Do you need a FAB (Floating Action Button) on the sheet? Or perhaps a small banner at the bottom? We've got you covered!
 
 `TrueSheet` provides first-class support for a `Footer` component. This component will float at the bottom of the sheet.
 

docs/docs/usage.mdx

@@ -4,46 +4,44 @@ sidebar_position: 3
 
 # Usage
 
-Import `TrueSheet`.
+1. Import `TrueSheet`.
 
 ```tsx
 import { TrueSheet } from "@lodev09/react-native-true-sheet"
 ```
 
-Define `TrueSheet` inside any component and attach a `ref` to it.
+2. Define `TrueSheet` inside any component and attach a `ref` to it.
+3. Control the sheet by invoking the available `ref` [methods](/reference/methods).
 
-```tsx {2-2,10-12}
-const App = () => {
+```tsx {2-2,5-8,11-14,18-25}
+export const App = () => {
   const sheet = useRef<TrueSheet>(null)
 
-  // add present here
-  // add dismiss here
+  // Present the sheet ✅
+  const present = async () => {
+    await sheet.current?.present()
+    console.log('horray! sheet has been presented 💩')
+  }
+
+  // Dismiss the sheet ✅
+  const dismiss = async () => {
+    await sheet.current?.dismiss()
+    console.log('Bye bye 👋')
+  }
 
   return (
     <View>
-      <Button onPress={present} title="Open Sheet" />
-      <TrueSheet ref={sheet} sizes={['auto', '80%', 'large']}>
+      <Button onPress={present} title="Present" />
+      <TrueSheet
+        ref={sheet}
+        sizes={['auto', 'large']}
+        cornerRadius={24}
+      >
         <Button onPress={dismiss} title="Dismiss" />
       </TrueSheet>
     </View>
   )
 }
 ```
 
-Use the `ref` instance in presenting the sheet.
-
-```tsx {2}
-const present = async () => {
-  await sheet.current?.present()
-  console.log('horray! sheet has been presented 💩')
-}
-```
-
-The same goes for dismissing it.
-
-```tsx {2}
-const dismiss = async () => {
-  await sheet.current?.dismiss()
-  console.log('Bye bye 👋')
-}
-```
+Simple, right? Head over to [`props`](/reference/props) to learn more about configuring your sheet.

docs/src/css/custom.css

@@ -52,3 +52,7 @@
   background-color: var(--ifm-menu-color-background-active);
   border-width: 0;
 }
+
+img {
+  border-radius: var(--ifm-pre-border-radius);
+}

package.json

@@ -53,7 +53,7 @@
   "bugs": {
     "url": "https://github.com/lodev09/react-native-true-sheet/issues"
   },
-  "homepage": "https://github.com/lodev09/react-native-true-sheet#readme",
+  "homepage": "https://sheet.lodev09.com",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },