docs: added adding shadow guide

gorhom · Apr 8, 2021 · 5a28241 · 5a28241
1 parent 0110a6b
commit 5a28241
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 7 deletions.
diff --git a/website/docs/guides/adding-shadow.mdx b/website/docs/guides/adding-shadow.mdx
@@ -0,0 +1,30 @@
+---
+id: adding-shadow
+title: Adding Shadow
+description: Adding shadow to the Bottom Sheet.
+keywords:
+  - bottomsheet
+  - bottom-sheet
+  - bottom sheet
+  - react-native
+  - react native
+  - ios
+  - android
+  - sheet
+  - modal
+  - presentation modal
+  - reanimated
+image: /img/bottom-sheet-preview.gif
+slug: /adding-shadow
+---
+
+![React Native Bottom Sheet Shadow](/img/bottom-sheet-shadow.jpg)
+
+To add shadow to the bottom sheet, you will need to pass the `style` prop with shadow styling config, I recommend checking out [React Native Shadow Generator](https://ethercreative.github.io/react-native-shadow-generator/) by [@ethercreative](https://github.com/ethercreative).
+
+:::note NOTICE
+
+You may notice that shadow looks different between **iOS** and **Android**, that's because each platform handle drawing shadows differently, read more about [Android Shadows](https://developer.android.com/training/material/shadows-clipping).
+
+:::
+
diff --git a/website/docs/custom-backdrop.mdx → website/docs/guides/custom-backdrop.mdx b/website/docs/custom-backdrop.mdx → website/docs/guides/custom-backdrop.mdx
@@ -30,7 +30,7 @@ You can extend your custom backdrop props interface with the provided `BottomShe
 ### Example
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import { Video } from '../components/video';
+import { Video } from '../../components/video';
 
 <Video
   title="React Native Bottom Sheet Custom Backdrop"

diff --git a/website/docs/custom-background.mdx → website/docs/guides/custom-background.mdx b/website/docs/custom-background.mdx → website/docs/guides/custom-background.mdx
@@ -30,7 +30,7 @@ You can extend your custom background props interface with the provided `BottomS
 ### Example
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import { Video } from '../components/video';
+import { Video } from '../../components/video';
 
 <Video
   title="React Native Bottom Sheet Custom Background"

diff --git a/website/docs/custom-handle.mdx → website/docs/guides/custom-handle.mdx b/website/docs/custom-handle.mdx → website/docs/guides/custom-handle.mdx
@@ -30,7 +30,7 @@ You can extend your custom handle props interface with the provided `BottomSheet
 ### Example
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import { Video } from '../components/video';
+import { Video } from '../../components/video';
 
 <Video
   title="React Native Bottom Sheet Custom Handle"

diff --git a/website/docs/react-naigation.md → website/docs/guides/react-naigation.md b/website/docs/react-naigation.md → website/docs/guides/react-naigation.md
diff --git a/website/sidebars.js b/website/sidebars.js
@@ -14,10 +14,11 @@ module.exports = {
           type: 'category',
           label: 'Guides',
           items: [
-            'custom-handle',
-            'custom-backdrop',
-            'custom-background',
-            'react-navigation-integration',
+            'guides/custom-handle',
+            'guides/custom-backdrop',
+            'guides/custom-background',
+            'guides/adding-shadow',
+            'guides/react-navigation-integration',
           ],
         },
         'troubleshooting',

diff --git a/website/static/img/bottom-sheet-shadow.jpg b/website/static/img/bottom-sheet-shadow.jpg