diff --git a/docs/docs/resources/apps-using-nitro.md b/docs/docs/resources/apps-using-nitro.md new file mode 100644 index 000000000..346c5328b --- /dev/null +++ b/docs/docs/resources/apps-using-nitro.md @@ -0,0 +1,21 @@ +--- +title: Apps using Nitro +sidebar_label: Apps using Nitro +description: Production apps using React Native Nitro, shown as a public app showcase. +keywords: + - apps using Nitro + - React Native Nitro Modules apps + - Nitro Modules production apps + - React Native production apps + - Nitro production showcase +--- + +import AppsUsingNitroShowcase from '@site/src/components/AppsUsingNitroShowcase'; + +# Apps using Nitro + +Nitro is not just a benchmark project. It is already shipping in large-scale +production apps across finance, commerce, social, food, connectivity, sports, +health, music, and productivity. + + diff --git a/docs/sidebars.ts b/docs/sidebars.ts index 3f401134b..6d70fd8db 100644 --- a/docs/sidebars.ts +++ b/docs/sidebars.ts @@ -76,6 +76,7 @@ const sidebars: SidebarsConfig = { type: 'category', label: 'Resources', items: [ + 'resources/apps-using-nitro', 'resources/awesome-nitro-modules', 'resources/comparison', 'resources/for-library-users', diff --git a/docs/src/components/AppsUsingNitroShowcase/index.tsx b/docs/src/components/AppsUsingNitroShowcase/index.tsx new file mode 100644 index 000000000..a627e0e8a --- /dev/null +++ b/docs/src/components/AppsUsingNitroShowcase/index.tsx @@ -0,0 +1,273 @@ +import React from 'react'; +import styles from './styles.module.css'; + +type App = { + name: string; + company: string; + scale: string; + category: string; + icon?: string; + accent: string; + featured?: boolean; +}; + +const apps: App[] = [ + { + name: 'Discord', + company: 'Discord Inc.', + scale: '500M+ installs', + category: 'Social', + icon: '/img/apps-using-nitro/discord.png', + accent: '#5865f2', + featured: true, + }, + { + name: 'Coinbase', + company: 'Coinbase Inc.', + scale: '50M+ installs', + category: 'Finance', + icon: '/img/apps-using-nitro/coinbase.png', + accent: '#0052ff', + featured: true, + }, + { + name: 'MetaMask', + company: 'MetaMask Web3 Wallet', + scale: '10M+ installs', + category: 'Finance', + icon: '/img/apps-using-nitro/metamask.png', + accent: '#f6851b', + featured: true, + }, + { + name: 'Starlink', + company: 'Space Exploration Technologies Corp.', + scale: '10M+ installs', + category: 'Connectivity', + icon: '/img/apps-using-nitro/starlink.png', + accent: '#4a5568', + featured: true, + }, + { + name: 'Affirm', + company: 'Affirm, Inc.', + scale: '10M+ installs', + category: 'Finance', + icon: '/img/apps-using-nitro/affirm.png', + accent: '#4a4af4', + featured: true, + }, + { + name: 'Base', + company: 'Coinbase Wallet', + scale: '10M+ installs', + category: 'Finance', + icon: '/img/apps-using-nitro/base.png', + accent: '#0052ff', + featured: true, + }, + { + name: 'HelloFresh', + company: 'HelloFresh SE', + scale: '10M+ installs', + category: 'Food', + icon: '/img/apps-using-nitro/hellofresh.png', + accent: '#5c8f22', + }, + { + name: 'Picnic', + company: 'Picnic Technologies B.V.', + scale: '5M+ installs', + category: 'Commerce', + icon: '/img/apps-using-nitro/picnic.png', + accent: '#e52320', + }, + { + name: 'Kraken', + company: 'Payward, Inc.', + scale: '5M+ installs', + category: 'Finance', + icon: '/img/apps-using-nitro/kraken.png', + accent: '#5741d9', + }, + { + name: 'AutoZone', + company: 'AutoZone, Inc.', + scale: '5M+ installs', + category: 'Commerce', + icon: '/img/apps-using-nitro/autozone.png', + accent: '#f36f21', + }, + { + name: 'Expensify', + company: 'Expensify Inc.', + scale: '1M+ installs', + category: 'Finance', + icon: '/img/apps-using-nitro/expensify.png', + accent: '#36d36f', + }, + { + name: 'Gemini', + company: 'Gemini Space Station, Inc.', + scale: '1M+ installs', + category: 'Finance', + icon: '/img/apps-using-nitro/gemini.png', + accent: '#00dcfa', + }, + { + name: 'Sleeper', + company: 'Blitz Studios, Inc.', + scale: '1M+ installs', + category: 'Sports', + icon: '/img/apps-using-nitro/sleeper.png', + accent: '#111111', + }, + { + name: 'SnapCalorie', + company: 'Perception Labs, Inc.', + scale: '500K+ installs', + category: 'Health', + icon: '/img/apps-using-nitro/snapcalorie.png', + accent: '#ff6250', + }, + { + name: 'Extra', + company: 'The Aligned Company', + scale: '100K+ installs', + category: 'Finance', + icon: '/img/apps-using-nitro/extra.png', + accent: '#111111', + }, + { + name: 'MyGroove', + company: 'MyGroove', + scale: '10K+ installs', + category: 'Music', + icon: '/img/apps-using-nitro/mygroove.png', + accent: '#ff8a00', + }, + { + name: 'Omni', + company: 'Omni Wallet', + scale: '10K+ installs', + category: 'Finance', + icon: '/img/apps-using-nitro/omni.png', + accent: '#62db73', + }, + { + name: 'ScribeWare', + company: 'ScribeWare', + scale: '1K+ installs', + category: 'Productivity', + icon: '/img/apps-using-nitro/scribeware.png', + accent: '#3484ff', + }, +]; + +function AppIcon({ app, size }: { app: App; size: 'large' | 'small' }) { + const initials = app.name + .split(/\s+/) + .slice(0, 2) + .map((word) => word[0]) + .join('') + .toUpperCase(); + + return ( + + ); +} + +function FeaturedAppCard({ app }: { app: App }) { + return ( +
+ +
+ {app.category} +

{app.name}

+

{app.company}

+ {app.scale} +
+
+ ); +} + +function AppCard({ app }: { app: App }) { + return ( +
+ +
+

{app.name}

+

{app.company}

+
+ {app.scale} +
+ ); +} + +export default function AppsUsingNitroShowcase() { + const featuredApps = apps.filter((app) => app.featured); + const regularApps = apps.filter((app) => !app.featured); + + return ( +
+
+
+ Production ready +

Nitro is already running inside apps people use every day.

+

+ From social networks and finance to commerce, food, connectivity, + sports, health, music, and creator tools, Nitro powers native code + paths in real production apps. +

+
+
+
+ 18M+ + npm downloads +
+
+ 600M+ + combined public app install counts +
+
+ 9 + product categories +
+
+
+ +
+ {featuredApps.map((app) => ( + + ))} +
+ +
+ {regularApps.map((app) => ( + + ))} +
+ +

+ Based on public app data and public native symbols. App names and icons belong + to their respective owners; no affiliation or endorsement is implied. +

+
+ ); +} diff --git a/docs/src/components/AppsUsingNitroShowcase/styles.module.css b/docs/src/components/AppsUsingNitroShowcase/styles.module.css new file mode 100644 index 000000000..32c2f41c5 --- /dev/null +++ b/docs/src/components/AppsUsingNitroShowcase/styles.module.css @@ -0,0 +1,395 @@ +.showcase { + --showcase-shadow-gutter: 8px; + + max-width: 100%; + margin: 1.5rem 0 3rem; + padding: 0 var(--showcase-shadow-gutter) var(--showcase-shadow-gutter) 0; + overflow: visible; +} + +.showcase, +.showcase * { + box-sizing: border-box; +} + +.hero { + display: grid; + grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr); + gap: 1.5rem; + align-items: stretch; + margin-bottom: 1.25rem; + padding: 2rem; + border: 2px solid #232a3f; + border-radius: 8px; + background: + linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 219, 229, 0.72) 42%, rgba(213, 241, 255, 0.82)), + #f8fbff; + box-shadow: 8px 8px 0 #232a3f; + width: 100%; + max-width: 100%; + min-width: 0; +} + +[data-theme='dark'] .hero { + border-color: #4e5b79; + background: + linear-gradient(135deg, rgba(35, 42, 63, 0.96), rgba(74, 46, 80, 0.74) 44%, rgba(20, 74, 104, 0.76)), + #171e31; + box-shadow: 8px 8px 0 #0c101d; +} + +.heroCopy { + display: flex; + flex-direction: column; + justify-content: center; + min-width: 0; +} + +.eyebrow, +.appCategory { + color: #d32e5e; + font-size: 0.75rem; + font-weight: 800; + letter-spacing: 0; + text-transform: uppercase; +} + +[data-theme='dark'] .eyebrow, +[data-theme='dark'] .appCategory { + color: #ff86a6; +} + +.hero h2 { + max-width: 100%; + margin: 0.45rem 0 0.75rem; + font-family: 'Clash Display', sans-serif; + font-size: clamp(2rem, 5vw, 4rem); + font-weight: 600; + line-height: 0.95; + overflow-wrap: break-word; +} + +.hero p { + max-width: 42rem; + margin: 0; + color: #3e4964; + font-size: 1.05rem; +} + +[data-theme='dark'] .hero p { + color: #c9d6e0; +} + +.statsGrid { + display: grid; + grid-template-columns: 1fr; + gap: 0.75rem; + max-width: 100%; + min-width: 0; +} + +.statsGrid div { + display: flex; + flex-direction: column; + justify-content: center; + min-width: 0; + min-height: 6rem; + padding: 1rem; + border: 2px solid #232a3f; + border-radius: 8px; + background: rgba(255, 255, 255, 0.72); +} + +[data-theme='dark'] .statsGrid div { + border-color: #4e5b79; + background: rgba(17, 22, 37, 0.66); +} + +.statsGrid strong { + color: #d32e5e; + font-family: 'Clash Display', sans-serif; + font-size: 2.4rem; + font-weight: 700; + line-height: 1; +} + +[data-theme='dark'] .statsGrid strong { + color: #ff86a6; +} + +.statsGrid span { + margin-top: 0.35rem; + color: #3e4964; + font-size: 0.9rem; + font-weight: 700; + line-height: 1.15; +} + +[data-theme='dark'] .statsGrid span { + color: #c9d6e0; +} + +.featuredGrid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 1rem; + max-width: 100%; + margin-bottom: 1rem; +} + +.featuredCard, +.appCard { + position: relative; + min-width: 0; + border: 2px solid #232a3f; + border-radius: 8px; + background: #ffffff; + overflow: hidden; +} + +[data-theme='dark'] .featuredCard, +[data-theme='dark'] .appCard { + border-color: #4e5b79; + background: #20273a; +} + +.featuredCard::before, +.appCard::before { + content: ''; + position: absolute; + inset: 0 0 auto; + height: 4px; + background: var(--app-accent); +} + +.featuredCard { + display: grid; + grid-template-columns: 1fr; + gap: 1rem; + align-items: start; + min-height: 11rem; + padding: 1.25rem; + box-shadow: 4px 4px 0 #232a3f; +} + +[data-theme='dark'] .featuredCard { + box-shadow: 4px 4px 0 #0c101d; +} + +.featuredCard:hover, +.appCard:hover { + transform: translateY(-2px); +} + +.cardBody, +.compactBody { + min-width: 0; +} + +.cardBody h3, +.compactBody h3 { + margin: 0; + color: #232a3f; + font-weight: 800; + line-height: 1.05; + overflow-wrap: break-word; +} + +[data-theme='dark'] .cardBody h3, +[data-theme='dark'] .compactBody h3 { + color: #eef6ff; +} + +.cardBody h3 { + margin-top: 0.3rem; + font-size: 1.35rem; +} + +.cardBody p, +.compactBody p { + margin: 0.35rem 0 0; + color: #5c6881; + line-height: 1.15; +} + +[data-theme='dark'] .cardBody p, +[data-theme='dark'] .compactBody p { + color: #b9c7d4; +} + +.cardBody p { + font-size: 0.95rem; +} + +.scaleBadge, +.compactScale { + display: inline-flex; + align-items: center; + width: fit-content; + max-width: 100%; + margin-top: 0.85rem; + padding: 0.25rem 0.55rem; + border: 1.5px solid color-mix(in srgb, var(--app-accent) 58%, #232a3f); + border-radius: 999px; + color: #232a3f; + background: color-mix(in srgb, var(--app-accent) 14%, white); + font-size: 0.78rem; + font-weight: 800; + line-height: 1.1; +} + +[data-theme='dark'] .scaleBadge, +[data-theme='dark'] .compactScale { + color: #eef6ff; + background: color-mix(in srgb, var(--app-accent) 24%, #171e31); + border-color: color-mix(in srgb, var(--app-accent) 62%, #eef6ff); +} + +.appGrid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); + gap: 0.8rem; + max-width: 100%; + min-width: 0; +} + +.appCard { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + grid-template-rows: auto auto; + gap: 0.8rem; + align-items: center; + padding: 1rem; + min-height: 8.2rem; + min-width: 0; +} + +.compactBody h3 { + font-size: 1rem; +} + +.compactBody p { + display: -webkit-box; + overflow: hidden; + font-size: 0.82rem; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.compactScale { + grid-column: 1 / -1; + margin-top: 0; +} + +.iconFrame { + position: relative; + display: grid; + place-items: center; + flex: 0 0 auto; + border-radius: 22.37%; + background: + linear-gradient(145deg, color-mix(in srgb, var(--app-accent) 70%, white), color-mix(in srgb, var(--app-accent) 68%, #111625)), + var(--app-accent); + box-shadow: + inset 0 0 0 1px rgba(255, 255, 255, 0.4), + inset 0 -10px 18px rgba(0, 0, 0, 0.14), + 0 10px 24px rgba(35, 42, 63, 0.2); + clip-path: inset(0 round 22.37%); + overflow: hidden; +} + +[data-theme='dark'] .iconFrame { + box-shadow: + inset 0 0 0 1px rgba(255, 255, 255, 0.25), + inset 0 -10px 18px rgba(0, 0, 0, 0.25), + 0 10px 24px rgba(0, 0, 0, 0.35); +} + +.iconFrame::after { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(165deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 46%); + pointer-events: none; +} + +.iconFrame img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; +} + +.iconLarge { + width: 4.9rem; + height: 4.9rem; +} + +.iconSmall { + width: 3.4rem; + height: 3.4rem; +} + +.iconFallback { + color: #ffffff; + font-size: 1rem; + font-weight: 900; + line-height: 1; +} + +.iconLarge .iconFallback { + font-size: 1.35rem; +} + +.note { + margin: 1.2rem 0 0; + color: #5c6881; + font-size: 0.88rem; + line-height: 1.4; +} + +[data-theme='dark'] .note { + color: #b9c7d4; +} + +@media (max-width: 996px) { + .hero, + .featuredGrid { + grid-template-columns: 1fr; + } + + .statsGrid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} + +@media (max-width: 640px) { + .hero { + padding: 1.25rem; + box-shadow: 5px 5px 0 #232a3f; + } + + [data-theme='dark'] .hero { + box-shadow: 5px 5px 0 #0c101d; + } + + .hero h2 { + font-size: 2.25rem; + } + + .statsGrid { + grid-template-columns: 1fr; + } + + .statsGrid div { + min-height: 4.8rem; + } + + .featuredCard { + grid-template-columns: 1fr; + } + + .appGrid { + grid-template-columns: 1fr; + } +} diff --git a/docs/static/img/apps-using-nitro/affirm.png b/docs/static/img/apps-using-nitro/affirm.png new file mode 100644 index 000000000..a86e66b01 Binary files /dev/null and b/docs/static/img/apps-using-nitro/affirm.png differ diff --git a/docs/static/img/apps-using-nitro/autozone.png b/docs/static/img/apps-using-nitro/autozone.png new file mode 100644 index 000000000..f02e3f8af Binary files /dev/null and b/docs/static/img/apps-using-nitro/autozone.png differ diff --git a/docs/static/img/apps-using-nitro/base.png b/docs/static/img/apps-using-nitro/base.png new file mode 100644 index 000000000..bfe3b28ab Binary files /dev/null and b/docs/static/img/apps-using-nitro/base.png differ diff --git a/docs/static/img/apps-using-nitro/coinbase.png b/docs/static/img/apps-using-nitro/coinbase.png new file mode 100644 index 000000000..64a79829f Binary files /dev/null and b/docs/static/img/apps-using-nitro/coinbase.png differ diff --git a/docs/static/img/apps-using-nitro/discord.png b/docs/static/img/apps-using-nitro/discord.png new file mode 100644 index 000000000..d0d05bed0 Binary files /dev/null and b/docs/static/img/apps-using-nitro/discord.png differ diff --git a/docs/static/img/apps-using-nitro/expensify.png b/docs/static/img/apps-using-nitro/expensify.png new file mode 100644 index 000000000..3dcf924dd Binary files /dev/null and b/docs/static/img/apps-using-nitro/expensify.png differ diff --git a/docs/static/img/apps-using-nitro/extra.png b/docs/static/img/apps-using-nitro/extra.png new file mode 100644 index 000000000..1676dd869 Binary files /dev/null and b/docs/static/img/apps-using-nitro/extra.png differ diff --git a/docs/static/img/apps-using-nitro/gemini.png b/docs/static/img/apps-using-nitro/gemini.png new file mode 100644 index 000000000..e39c90061 Binary files /dev/null and b/docs/static/img/apps-using-nitro/gemini.png differ diff --git a/docs/static/img/apps-using-nitro/hellofresh.png b/docs/static/img/apps-using-nitro/hellofresh.png new file mode 100644 index 000000000..7619f39f1 Binary files /dev/null and b/docs/static/img/apps-using-nitro/hellofresh.png differ diff --git a/docs/static/img/apps-using-nitro/kraken.png b/docs/static/img/apps-using-nitro/kraken.png new file mode 100644 index 000000000..78b78add4 Binary files /dev/null and b/docs/static/img/apps-using-nitro/kraken.png differ diff --git a/docs/static/img/apps-using-nitro/metamask.png b/docs/static/img/apps-using-nitro/metamask.png new file mode 100644 index 000000000..2a685b536 Binary files /dev/null and b/docs/static/img/apps-using-nitro/metamask.png differ diff --git a/docs/static/img/apps-using-nitro/mygroove.png b/docs/static/img/apps-using-nitro/mygroove.png new file mode 100644 index 000000000..c6b0bd00a Binary files /dev/null and b/docs/static/img/apps-using-nitro/mygroove.png differ diff --git a/docs/static/img/apps-using-nitro/omni.png b/docs/static/img/apps-using-nitro/omni.png new file mode 100644 index 000000000..07823bf3d Binary files /dev/null and b/docs/static/img/apps-using-nitro/omni.png differ diff --git a/docs/static/img/apps-using-nitro/picnic.png b/docs/static/img/apps-using-nitro/picnic.png new file mode 100644 index 000000000..0b7007e0f Binary files /dev/null and b/docs/static/img/apps-using-nitro/picnic.png differ diff --git a/docs/static/img/apps-using-nitro/scribeware.png b/docs/static/img/apps-using-nitro/scribeware.png new file mode 100644 index 000000000..f0d0c42ae Binary files /dev/null and b/docs/static/img/apps-using-nitro/scribeware.png differ diff --git a/docs/static/img/apps-using-nitro/sleeper.png b/docs/static/img/apps-using-nitro/sleeper.png new file mode 100644 index 000000000..8299b9fe6 Binary files /dev/null and b/docs/static/img/apps-using-nitro/sleeper.png differ diff --git a/docs/static/img/apps-using-nitro/snapcalorie.png b/docs/static/img/apps-using-nitro/snapcalorie.png new file mode 100644 index 000000000..f5095a7e5 Binary files /dev/null and b/docs/static/img/apps-using-nitro/snapcalorie.png differ diff --git a/docs/static/img/apps-using-nitro/starlink.png b/docs/static/img/apps-using-nitro/starlink.png new file mode 100644 index 000000000..9df3405fd Binary files /dev/null and b/docs/static/img/apps-using-nitro/starlink.png differ