docs: add showcase and web support (#28)

Author: e-younan

README.md

@@ -4,13 +4,13 @@
 
 React Native Header is a high-performance, cross-platform animated header component for React Native applications. It provides an easy-to-use interface for developers to quickly create beautiful and dynamic navigation headers.
 
-| iOS | Android |
-| ------------- | ------------- |
-| <img src="https://user-images.githubusercontent.com/128341688/226800421-03a17bd1-aeb9-4ff3-89e6-c51634e40c75.gif" alt="iOS React Native Header Showcase" width="100%">  | <img src="https://user-images.githubusercontent.com/128341688/226800411-5130076d-613a-49c9-b690-41a306b6414e.gif" alt="Android React Native Header Showcase" width="100%"> |
+| Android/iOS/Web |
+| ------------- |
+| <img src="https://github.com/codeherence/react-native-header/assets/128341688/b465a0f5-ce06-46a7-9894-849db698b66b" alt="iOS React Native Header Showcase" width="100%"> |
 
 ## Features
 
-- Maintains a similar experience between **iOS** and **Android**.
+- Maintains a similar experience between **iOS**, **Android**, and **Web**.
 - Uses Reanimated for better animation performance
 - Works with [ScrollView](https://reactnative.dev/docs/scrollview), [FlatList](https://reactnative.dev/docs/flatlist), and [SectionList](https://reactnative.dev/docs/sectionlist)
 - Compatible with [Expo Go](https://docs.expo.dev/) and bare [React Native](https://github.com/react-native-community/cli) projects

docs/docs/04-web-support.mdx

@@ -0,0 +1,15 @@
+---
+title: Web Support
+hide_table_of_contents: false
+slug: /web-support
+description: Web Support for React Native Header.
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+This library, primarily developed using [Reanimated](https://docs.swmansion.com/react-native-reanimated), necessitates specific setup steps to ensure compatibility with web platforms. Users are required to follow the [Web Support setup for react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/guides/web-support/) prior to integration, assuming this has not been previously done.
+
+### FlashList
+
+For web applications using FlashList, you are required to use a version of FlashList that is verified for web compatibility.

docs/docs/05-showcase.mdx

@@ -0,0 +1,32 @@
+---
+title: Showcase
+hide_table_of_contents: false
+slug: /showcase
+description: Showcase of React Native Header.
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import ReactPlayer from 'react-player';
+
+All of the examples can be reviewed in the [`example` application of the react-native-header repository](https://github.com/codeherence/react-native-header/tree/main/example).
+
+## FlashList
+
+<ReactPlayer playing controls url="/videos/flashlist.mp4" />
+
+## Inverted Chat
+
+<ReactPlayer playing controls url="/videos/inverted-chat.mp4" />
+
+## Twitter
+
+<ReactPlayer playing controls url="/videos/twitter.mp4" />
+
+## Absolute Header with Blurred Surface
+
+<ReactPlayer
+  playing
+  controls
+  url="/videos/absolute-header-with-blurred-surface.mp4"
+/>

docs/package.json

@@ -21,7 +21,8 @@
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-player": "^2.15.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.4.0",

docs/static/videos/absolute-header-with-blurred-surface.mp4

@@ -3342,7 +3342,7 @@ deep-extend@^0.6.0:
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
   integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
 
-deepmerge@^4.2.2:
+deepmerge@^4.0.0, deepmerge@^4.2.2:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
@@ -4882,6 +4882,11 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+  integrity sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==
+
 loader-runner@^4.2.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
@@ -5058,6 +5063,11 @@ memfs@^3.1.2, memfs@^3.4.3:
   dependencies:
     fs-monkey "^1.0.3"
 
+memoize-one@^5.1.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
@@ -6056,6 +6066,11 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
+react-fast-compare@^3.0.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
+  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
+
 react-fast-compare@^3.2.0:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.1.tgz#53933d9e14f364281d6cba24bfed7a4afb808b5f"
@@ -6099,6 +6114,17 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
   dependencies:
     "@babel/runtime" "^7.10.3"
 
+react-player@^2.15.0:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.15.0.tgz#e7ed486de971f5a9643ccceefddefba9d923d78a"
+  integrity sha512-wo7LM3CwxkjW9WdvGrQ3I0PhIl5xY1h+9EdpSnCRaQhE4dRMGmfH60RITPaauUhd2uJkGpzAj27kWYHT1j/dBw==
+  dependencies:
+    deepmerge "^4.0.0"
+    load-script "^1.0.0"
+    memoize-one "^5.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.0.1"
+
 react-router-config@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/react-router-config/-/react-router-config-5.1.1.tgz#0f4263d1a80c6b2dc7b9c1902c9526478194a988"