Skip to content

✨Document: Showcase #207

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Dec 20, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
164 changes: 30 additions & 134 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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 ☕️

Expand All @@ -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
Expand Down
7 changes: 5 additions & 2 deletions docs/docs/GETTING_STARTED.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
```

Expand All @@ -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>
Expand Down
33 changes: 33 additions & 0 deletions docs/docs/SHOWCASE/index.mdx
Original file line number Diff line number Diff line change
@@ -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>
68 changes: 68 additions & 0 deletions docs/docs/SHOWCASE/showcase.css
Original file line number Diff line number Diff line change
@@ -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%;
}
}
8 changes: 8 additions & 0 deletions docs/docs/SHOWCASE/showcase.json
Original file line number Diff line number Diff line change
@@ -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"
}
]
6 changes: 5 additions & 1 deletion docs/docusaurus.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
1 change: 0 additions & 1 deletion docs/sidebars.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ const sidebars: SidebarsConfig = {
},
items: ['getting-started', 'usage', 'config', 'result'],
},

'crop',
'preview',
'camera',
Expand Down
Loading