Merge pull request #207 from baronha/docs/showcase

baronha · web-flow · commit 740ee200861a · 2024-12-20T16:53:49.000+07:00
✨Document: Showcase
diff --git a/README.md b/README.md
@@ -16,20 +16,30 @@ React Native Multiple Image Picker **(RNMIP)** enables application to pick image
 
 ## Features 🔥
 
-| 🤩  | ![Logo][Logo]                                                                     |
-| --- | --------------------------------------------------------------------------------- |
+| 🤩  | ![Logo][Logo]                                                                         |
+| --- | ------------------------------------------------------------------------------------- |
 | 🍕  | [**Crop**](/docs/docs/CROP.mdx) single/multiple image.                                |
 | 🎑  | [**Preview**](/docs/docs/PREVIEW.mdx) image/video.                                    |
 | 📸  | [**Camera**](/docs/docs/CAMERA.mdx) module for capturing photos and recording videos. |
-| 🐳  | Keep the previous selection.                                                      |
-| 0️⃣  | Selected order index.                                                             |
-| 🎨  | UI Customization (numberOfColumn, spacing, primaryColor ... )                     |
-| 🌚  | Dark Mode, Light Mode                                                             |
-| 🌄  | Choose multiple images/video.                                                     |
-| 📦  | Support smart album `(camera roll, selfies, panoramas, favorites, videos...)`.    |
-| 📺  | Display video duration.                                                           |
-| ⛅️ | Support iCloud Photo Library.                                                     |
-| 🌪  | Scrolling performance. ☕️                                                         |
+| 🐳  | Keep the previous selection.                                                          |
+| 0️⃣  | Selected order index.                                                                 |
+| 🎨  | UI Customization (numberOfColumn, spacing, primaryColor ... )                         |
+| 🌚  | Dark Mode, Light Mode                                                                 |
+| 🌄  | Choose multiple images/video.                                                         |
+| 📦  | Support smart album `(camera roll, selfies, panoramas, favorites, videos...)`.        |
+| 📺  | Display video duration.                                                               |
+| ⛅️ | Support iCloud Photo Library.                                                         |
+| 🌪  | Scrolling performance. ☕️                                                             |
+
+## Requirements
+
+Because RNMIP uses Nitro Module, it complies with Nitro Modules' requirements.
+View Nitro Modules' requirements [here](https://nitro.margelo.com/docs/minimum-requirements)
+
+- `Xcode 16+`
+- `iOS 13+`
+- `react-native 0.75+`
+- `compileSdkVersion 34+`
 
 ## Installation
 
@@ -80,7 +90,7 @@ const onPicker = async () => {
 - [x] Dynamic Language
 - [x] Open Crop Controller.
 - [x] Open Preview Controller.
-- [ ] Open Camera Controller.
+- [x] Open Camera Controller.
 
 ## Sponsor & Support ☕️
 
@@ -98,133 +108,19 @@ To keep this library maintained and up-to-date please consider [sponsoring it on
 
 [![Star History Chart](https://api.star-history.com/svg?repos=baronha/react-native-multiple-image-picker&type=Date)](https://star-history.com/#bytebase/star-history&Date)
 
+## Showcase ✨
+
+List of used applications with `@baronha/react-native-multiple-image-picker`
+
+Contributions are welcome! If you have an application that uses `@baronha/react-native-multiple-image-picker`, please open a [pull request](/docs/docs/SHOWCASE/showcase.json) to add it to the list.
+
+See all [**Showcase**](https://baronha.github.io/react-native-multiple-image-picker/showcase)
+
 ## Performance
 
 We're trying to improve performance. If you have a better solution, please open a [issue](https://github.com/baronha/react-native-multiple-image-picker/issues)
 or [pull request](https://github.com/baronha/react-native-multiple-image-picker/pulls). Best regards!
 
-## Contributors ✨
-
-Thanks go to these wonderful people:
-
-<!-- readme: collaborators,contributors -start -->
-<table>
-	<tbody>
-		<tr>
-            <td align="center">
-                <a href="https://github.com/baronha">
-                    <img src="https://private-avatars.githubusercontent.com/u/23580920?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE3MzQ2ODE0ODAsIm5iZiI6MTczNDY4MDI4MCwicGF0aCI6Ii91LzIzNTgwOTIwIn0.WQt79ud4OjFPAmHtD6qtPRP558rnT_C7Y-iW3yS466k&v=4" width="100;" alt="baronha"/>
-                    <br />
-                    <sub><b>Bảo Hà.</b></sub>
-                </a>
-            </td>
-            <td align="center">
-                <a href="https://github.com/itsnyx">
-                    <img src="https://private-avatars.githubusercontent.com/u/74738973?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE3MzQ2ODE0ODAsIm5iZiI6MTczNDY4MDI4MCwicGF0aCI6Ii91Lzc0NzM4OTczIn0.CRxTBpQ8lOdxjwKESBwyTZMQ46d8f3ssKiz-bzq2m3Y&v=4" width="100;" alt="itsnyx"/>
-                    <br />
-                    <sub><b>Alireza</b></sub>
-                </a>
-            </td>
-            <td align="center">
-                <a href="https://github.com/pnthach95">
-                    <img src="https://private-avatars.githubusercontent.com/u/31266357?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE3MzQ2ODE0MjAsIm5iZiI6MTczNDY4MDIyMCwicGF0aCI6Ii91LzMxMjY2MzU3In0.mQks_lxBfdCcUtV6Reym3ENfG2Ld3B324ORzl9SvqrI&v=4" width="100;" alt="pnthach95"/>
-                    <br />
-                    <sub><b>Phạm Ngọc Thạch</b></sub>
-                </a>
-            </td>
-            <td align="center">
-                <a href="https://github.com/crockalet">
-                    <img src="https://private-avatars.githubusercontent.com/u/60240500?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE3MzQ2ODEwNjAsIm5iZiI6MTczNDY3OTg2MCwicGF0aCI6Ii91LzYwMjQwNTAwIn0.T0Z80DcgS23mJcQc5OBBAKxUvBEWoc-aq4mqB18Q3Zg&v=4" width="100;" alt="crockalet"/>
-                    <br />
-                    <sub><b>crockalet</b></sub>
-                </a>
-            </td>
-            <td align="center">
-                <a href="https://github.com/denisbevilacqua">
-                    <img src="https://private-avatars.githubusercontent.com/u/8768794?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE3MzQ2ODE5MDAsIm5iZiI6MTczNDY4MDcwMCwicGF0aCI6Ii91Lzg3Njg3OTQifQ.k1ERCp4n4VBIre37YNePaIKDVYYX7Lw0R29RY697tcs&v=4" width="100;" alt="denisbevilacqua"/>
-                    <br />
-                    <sub><b>Denis Bevilacqua</b></sub>
-                </a>
-            </td>
-            <td align="center">
-                <a href="https://github.com/cd-butterfly">
-                    <img src="https://private-avatars.githubusercontent.com/u/6622823?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE3MzQ2ODE2MDAsIm5iZiI6MTczNDY4MDQwMCwicGF0aCI6Ii91LzY2MjI4MjMifQ.fOnPbiSbCfSdFbJ7eQXXTqUExZJ2qxKeXetsyv6FNxg&v=4" width="100;" alt="cd-butterfly"/>
-                    <br />
-                    <sub><b>cd-butterfly</b></sub>
-                </a>
-            </td>
-		</tr>
-		<tr>
-            <td align="center">
-                <a href="https://github.com/ctrleffive">
-                    <img src="https://private-avatars.githubusercontent.com/u/35224957?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE3MzQ2ODE4NDAsIm5iZiI6MTczNDY4MDY0MCwicGF0aCI6Ii91LzM1MjI0OTU3In0.zzUrnMiuQZY0LxHE4K5ctm9Ue9ACEgKiQ6EAQZlntHE&v=4" width="100;" alt="ctrleffive"/>
-                    <br />
-                    <sub><b>Chandu J S</b></sub>
-                </a>
-            </td>
-            <td align="center">
-                <a href="https://github.com/jeongshin">
-                    <img src="https://private-avatars.githubusercontent.com/u/64301935?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE3MzQ2ODEzNjAsIm5iZiI6MTczNDY4MDE2MCwicGF0aCI6Ii91LzY0MzAxOTM1In0.qfMawsSaHp-zhL-T-HoFjKaPYDYP9TleMsRKd4EehpY&v=4" width="100;" alt="jeongshin"/>
-                    <br />
-                    <sub><b>Huckleberry</b></sub>
-                </a>
-            </td>
-            <td align="center">
-                <a href="https://github.com/shafiqjefri">
-                    <img src="https://private-avatars.githubusercontent.com/u/126740667?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE3MzQ2ODEwNjAsIm5iZiI6MTczNDY3OTg2MCwicGF0aCI6Ii91LzEyNjc0MDY2NyJ9.7Pl7tRLPeTQcM0Rk_Qhm7EtdOn05DtzGsdAdnbI0tlY&v=4" width="100;" alt="shafiqjefri"/>
-                    <br />
-                    <sub><b>shafiqjefri</b></sub>
-                </a>
-            </td>
-            <td align="center">
-                <a href="https://github.com/rxdsrex">
-                    <img src="https://private-avatars.githubusercontent.com/u/21159505?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE3MzQ2ODE1NDAsIm5iZiI6MTczNDY4MDM0MCwicGF0aCI6Ii91LzIxMTU5NTA1In0.qd51ATanVubUUyS7_fnYg-7Ku3-gFRlpYktCq6-dIkU&v=4" width="100;" alt="rxdsrex"/>
-                    <br />
-                    <sub><b>Rajnarayan Dutta</b></sub>
-                </a>
-            </td>
-            <td align="center">
-                <a href="https://github.com/vivianlys90">
-                    <img src="https://private-avatars.githubusercontent.com/u/22317616?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE3MzQ2ODEyNDAsIm5iZiI6MTczNDY4MDA0MCwicGF0aCI6Ii91LzIyMzE3NjE2In0.jnaG2nlwk7BDCDoZ3k0t1BLnZ-ZAkhDO9I_B294_Uas&v=4" width="100;" alt="vivianlys90"/>
-                    <br />
-                    <sub><b>vivianLee</b></sub>
-                </a>
-            </td>
-            <td align="center">
-                <a href="https://github.com/ymane">
-                    <img src="https://private-avatars.githubusercontent.com/u/22021856?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE3MzQ2ODE4NDAsIm5iZiI6MTczNDY4MDY0MCwicGF0aCI6Ii91LzIyMDIxODU2In0.BZsqT2aIKFG2GlRHtNf9KNNSb8wyveEUaeEUaCzkpvM&v=4" width="100;" alt="ymane"/>
-                    <br />
-                    <sub><b>Yogesh Mane</b></sub>
-                </a>
-            </td>
-		</tr>
-		<tr>
-            <td align="center">
-                <a href="https://github.com/ouabing">
-                    <img src="https://private-avatars.githubusercontent.com/u/1430376?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE3MzQ2ODE4NDAsIm5iZiI6MTczNDY4MDY0MCwicGF0aCI6Ii91LzE0MzAzNzYifQ.VR_p9iUCsr7vPHyjS4ShtB76mXCUbsTrZTIXeDeyyao&v=4" width="100;" alt="ouabing"/>
-                    <br />
-                    <sub><b>abing</b></sub>
-                </a>
-            </td>
-            <td align="center">
-                <a href="https://github.com/hieuphan1030">
-                    <img src="https://private-avatars.githubusercontent.com/u/108206954?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE3MzQ2ODExMjAsIm5iZiI6MTczNDY3OTkyMCwicGF0aCI6Ii91LzEwODIwNjk1NCJ9.N8Eq80NDMmCpuWo5qETz64HQNLNyaErQYN32asZVjD8&v=4" width="100;" alt="hieuphan1030"/>
-                    <br />
-                    <sub><b>hieuphan1030</b></sub>
-                </a>
-            </td>
-            <td align="center">
-                <a href="https://github.com/tuanngocptn">
-                    <img src="https://private-avatars.githubusercontent.com/u/22292704?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE3MzQ2ODExODAsIm5iZiI6MTczNDY3OTk4MCwicGF0aCI6Ii91LzIyMjkyNzA0In0.lURt1nOb3TQ2tlHJp8t1npWXCcl4dUeBbVaexXLWPFI&v=4" width="100;" alt="tuanngocptn"/>
-                    <br />
-                    <sub><b>Nick - Ngoc Pham</b></sub>
-                </a>
-            </td>
-		</tr>
-	<tbody>
-</table>
-<!-- readme: collaborators,contributors -end -->
-
 ## License
 
 MIT
diff --git a/docs/docs/GETTING_STARTED.mdx b/docs/docs/GETTING_STARTED.mdx
@@ -49,7 +49,8 @@ Install [@baronha/react-native-multiple-image-picker](https://www.npmjs.com/pack
 <TabItem value="rn">
 
 ```bash
-yarn add @baronha/react-native-multiple-image-picker react-native-nitro-modules
+yarn add @baronha/react-native-multiple-image-picker
+yarn add -D react-native-nitro-modules@0.18.2
 cd ios && pod install
 ```
 
@@ -58,7 +59,9 @@ cd ios && pod install
 <TabItem value="expo">
 
 ```bash
-npx expo install @baronha/react-native-multiple-image-picker react-native-nitro-modules
+npx expo install @baronha/react-native-multiple-image-picker 
+npx expo install react-native-nitro-modules@0.18.2 -- --dev
+npx expo prebuild
 ```
 
 </TabItem>
diff --git a/docs/docs/SHOWCASE/index.mdx b/docs/docs/SHOWCASE/index.mdx
@@ -0,0 +1,33 @@
+---
+id: showcase
+title: Showcase ✨
+sidebar_label: Showcase ✨
+slug: /showcase
+---
+
+import style from './showcase.css'
+import data from './showcase.json'
+
+List of used applications with `@baronha/react-native-multiple-image-picker`
+
+> Contributions are welcome! If you have an application that uses `@baronha/react-native-multiple-image-picker`<br/>
+> please open a [**Pull Request**](https://github.com/baronha/react-native-multiple-image-picker/tree/master/docs/docs/SHOWCASE/data.json) to add it to the list.
+
+<br />
+
+<div className="showcaseContainer">
+  {data.map((item, index) => {
+    return (
+      <a
+        key={`showcase-${index}`}
+        href={item.link}
+        target="_blank"
+        className="showcaseItem"
+      >
+        <img src={item.banner} alt={item.title} />
+        <b>{item.title}</b>
+        <p className="showcaseTagline">{item?.tagline}</p>
+      </a>
+    )
+  })}
+</div>
diff --git a/docs/docs/SHOWCASE/showcase.css b/docs/docs/SHOWCASE/showcase.css
@@ -0,0 +1,68 @@
+.showcaseContainer {
+  display: flex;
+  /* justify-content: space-between; */
+  flex-wrap: wrap;
+  gap: 24px;
+}
+
+.showcaseItem {
+  flex: 1;
+  color: inherit;
+  text-decoration: none;
+}
+
+.showcaseItem a:hover {
+  color: red;
+  text-decoration: none !important;
+}
+
+.showcaseItem b {
+  font-size: 1rem;
+  
+}
+
+.showcaseItem .showcaseTagline {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+}
+
+@media (max-width: 768px) {
+  .showcaseItem {
+    flex: 100%;
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 992px) {
+  /* lg */
+  .showcaseItem {
+    
+    max-width: 33.333%;
+  }
+}
+
+@media (min-width: 1200px) {
+  /* xl */
+  .showcaseItem {
+    
+    max-width: 33.333%;
+  }
+}
+
+@media (min-width: 1400px) {
+  /* xxl */
+  .showcaseItem {
+    
+    max-width: 33.333%;
+  }
+}
+
+@media (max-width: 480px) {
+  .showcaseItem {
+    flex: 100%;
+  }
+}
diff --git a/docs/docs/SHOWCASE/showcase.json b/docs/docs/SHOWCASE/showcase.json
@@ -0,0 +1,8 @@
+[
+  {
+    "banner": "https://github.com/user-attachments/assets/84ec6432-1557-4649-965c-6100d9c4c12d",
+    "title": "✨ Binsoo - Photo Filters & Editor",
+    "link": "https://apps.apple.com/vn/app/binsoo-photo-filters-editor/id6502683720",
+    "tagline": "Endless aesthetics and effects"
+  }
+]
diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts
@@ -94,7 +94,11 @@ const config: Config = {
           label: 'Example',
           position: 'left',
         },
-
+        {
+          href: '/showcase',
+          label: 'Showcase',
+          position: 'left',
+        },
         {
           href: 'https://github.com/baronha/react-native-multiple-image-picker',
           label: 'GitHub',
diff --git a/docs/sidebars.ts b/docs/sidebars.ts
@@ -23,7 +23,6 @@ const sidebars: SidebarsConfig = {
       },
       items: ['getting-started', 'usage', 'config', 'result'],
     },
-
     'crop',
     'preview',
     'camera',
diff --git a/example/yarn.lock b/example/yarn.lock
