feat: expo template

apps/docs/docs/getting-started/installation/_mobileContent.mdx

@@ -5,6 +5,10 @@ import { MDXArticle } from '@site/src/components/page/MDXArticle';
 <MDXArticle>
 ## Installation
 
+:::tip Starting a new project?
+Check out our [templates](/getting-started/templates) for pre-configured starter apps with CDS already set up.
+:::
+
 To install the CDS library for React Native applications, run the following command:
 
 ```bash

apps/docs/docs/getting-started/installation/_webContent.mdx

@@ -5,6 +5,10 @@ import { MDXArticle } from '@site/src/components/page/MDXArticle';
 <MDXArticle>
 ## Installation
 
+:::tip Starting a new project?
+Check out our [templates](/getting-started/templates) for pre-configured starter apps with CDS already set up.
+:::
+
 To install the CDS library for React web applications, run the following command:
 
 ```bash

apps/docs/docs/getting-started/templates/_mobileContent.mdx

@@ -0,0 +1,105 @@
+import { MDXSection } from '@site/src/components/page/MDXSection';
+import { MDXArticle } from '@site/src/components/page/MDXArticle';
+import { TemplateCard } from '@site/src/components/page/TemplateCard';
+import { HStack } from '@coinbase/cds-web/layout';
+import ThemedImage from '@theme/ThemedImage';
+
+<MDXSection>
+<MDXArticle>
+
+## Get started
+
+The easiest way to get started with CDS on mobile is with a template. The Expo template includes the required CDS packages, dependencies, and pre-configured settings with a working example application to help you start building.
+
+<HStack gap={2} style={{ marginTop: '1.5rem', flexWrap: 'wrap', alignItems: 'stretch' }}>
+  <TemplateCard
+    name="Expo"
+    description="Built for cross-platform mobile applications with React Native"
+    href="https://github.com/coinbase/cds/tree/master/templates/expo-app"
+    icon={
+      <ThemedImage
+        sources={{
+          light: '/img/logos/frameworks/expo_light.png',
+          dark: '/img/logos/frameworks/expo_dark.png',
+        }}
+        alt="Expo"
+        style={{ paddingTop: 'var(--space-0_75)', paddingBottom: 'var(--space-0_75)' }}
+        height="100%"
+      />
+    }
+  />
+</HStack>
+
+</MDXArticle>
+</MDXSection>
+
+<MDXSection>
+<MDXArticle>
+
+## Installation
+
+To create a new project from the template, use `gitpick` to bootstrap your application:
+
+### Expo
+
+```bash
+npx -y gitpick coinbase/cds/tree/master/templates/expo-app cds-expo
+cd cds-expo
+```
+
+</MDXArticle>
+</MDXSection>
+
+<MDXSection>
+<MDXArticle>
+
+## Setup
+
+After creating your project, install dependencies and start developing:
+
+```bash
+# We suggest using nvm to manage Node.js versions
+nvm install
+nvm use
+
+# Enable corepack for package manager setup
+corepack enable
+
+# Install dependencies
+yarn
+
+# Start development server
+yarn start
+```
+
+</MDXArticle>
+</MDXSection>
+
+<MDXSection>
+<MDXArticle>
+
+## What's included
+
+All templates come pre-configured with:
+
+- Latest CDS packages (`@coinbase/cds-mobile`, `@coinbase/cds-icons`, etc.)
+- TypeScript configuration
+- Example components demonstrating common UI patterns
+- Theme setup with CDS default theme
+- Navigation with React Navigation
+
+</MDXArticle>
+</MDXSection>
+
+<MDXSection>
+<MDXArticle>
+
+## Next steps
+
+After setting up your template, learn how to customize and extend CDS:
+
+- [Theming](/getting-started/theming) - Customize colors, spacing, and typography
+- [Installation](/getting-started/installation) - Manual installation and setup options
+
+</MDXArticle>
+</MDXSection>

apps/docs/docs/getting-started/templates/index.mdx

@@ -1,7 +1,7 @@
 ---
 id: templates
 title: Templates
-platform_switcher_options: { web: true, mobile: false }
+platform_switcher_options: { web: true, mobile: true }
 hide_title: true
 ---
 
@@ -11,10 +11,17 @@ import { ContentHeader } from '@site/src/components/page/ContentHeader';
 import { ContentPageContainer } from '@site/src/components/page/ContentPageContainer';
 
 import WebContent, { toc as webContentToc } from './_webContent.mdx';
+import MobileContent, { toc as mobileContentToc } from './_mobileContent.mdx';
 
 import webMetadata from './webMetadata.json';
+import mobileMetadata from './mobileMetadata.json';
 
 <VStack gap={5}>
-  <ContentHeader title="Templates" webMetadata={webMetadata} />
-  <ContentPageContainer webContent={<WebContent />} webContentToc={webContentToc} />
+  <ContentHeader title="Templates" webMetadata={webMetadata} mobileMetadata={mobileMetadata} />
+  <ContentPageContainer
+    webContent={<WebContent />}
+    webContentToc={webContentToc}
+    mobileContent={<MobileContent />}
+    mobileContentToc={mobileContentToc}
+  />
 </VStack>

apps/docs/docs/getting-started/templates/mobileMetadata.json

@@ -0,0 +1,3 @@
+{
+  "description": "Get started quickly with a pre-built Expo template configured with CDS components and best practices."
+}

templates/expo-app/.gitignore

@@ -0,0 +1,33 @@
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

templates/expo-app/.nvmrc

@@ -0,0 +1 @@
+22

templates/expo-app/.yarnrc.yml

@@ -0,0 +1,4 @@
+nodeLinker: node-modules
+
+
+

templates/expo-app/App.tsx

@@ -0,0 +1,137 @@
+import React, { memo, useState, useCallback } from 'react';
+import { ScrollView } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useFonts } from 'expo-font';
+import { Inter_400Regular, Inter_600SemiBold } from '@expo-google-fonts/inter';
+
+import type { ColorScheme } from '@coinbase/cds-common';
+import type { TabValue } from '@coinbase/cds-common/tabs/useTabs';
+
+import { useTheme } from '@coinbase/cds-mobile';
+import { defaultTheme } from '@coinbase/cds-mobile/themes/defaultTheme';
+import { VStack, HStack, Box } from '@coinbase/cds-mobile/layout';
+import { TabbedChips } from '@coinbase/cds-mobile/alpha/tabbed-chips/TabbedChips';
+import { PortalProvider } from '@coinbase/cds-mobile/overlays/PortalProvider';
+import { StatusBar, ThemeProvider } from '@coinbase/cds-mobile/system';
+
+import { Navbar } from './components/Navbar';
+import { AssetList } from './components/AssetList';
+import { CardList } from './components/CardList';
+import { AssetCarousel } from './components/AssetCarousel';
+import { AssetChart } from './components/AssetChart';
+import { TabBarButton } from './components/TabBarButton';
+
+const chipTabs = [
+  { id: 'all', label: 'All' },
+  { id: 'crypto', label: 'Crypto' },
+  { id: 'nfts', label: 'NFTs' },
+  { id: 'defi', label: 'DeFi' },
+  { id: 'earn', label: 'Earn' },
+];
+
+const CdsSafeAreaProvider = memo(({ children }: React.PropsWithChildren) => {
+  const theme = useTheme();
+  return (
+    <SafeAreaProvider style={{ backgroundColor: theme.color.bg }}>{children}</SafeAreaProvider>
+  );
+});
+
+export default function App() {
+  const [activeColorScheme, setActiveColorScheme] = useState<ColorScheme>('light');
+  const [fontsLoaded] = useFonts({
+    CoinbaseIcons: require('@coinbase/cds-icons/fonts/native/CoinbaseIcons.ttf'),
+    Inter_400Regular,
+    Inter_600SemiBold,
+  });
+
+  const toggleColorScheme = useCallback(
+    () => setActiveColorScheme((s) => (s === 'light' ? 'dark' : 'light')),
+    [],
+  );
+
+  if (!fontsLoaded) {
+    return null;
+  }
+
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <ThemeProvider activeColorScheme={activeColorScheme} theme={defaultTheme}>
+        <CdsSafeAreaProvider>
+          <PortalProvider>
+            <StatusBar />
+            <AppContent toggleColorScheme={toggleColorScheme} />
+          </PortalProvider>
+        </CdsSafeAreaProvider>
+      </ThemeProvider>
+    </GestureHandlerRootView>
+  );
+}
+
+function AppContent({ toggleColorScheme }: { toggleColorScheme: () => void }) {
+  const [activeChip, setActiveChip] = useState<TabValue | null>(chipTabs[0]);
+  const [activeNavTab, setActiveNavTab] = useState('home');
+  const insets = useSafeAreaInsets();
+
+  return (
+    <VStack style={{ flex: 1 }} background="bg">
+      <Navbar toggleColorScheme={toggleColorScheme} />
+
+      <Box paddingX={2} paddingY={1}>
+        <TabbedChips
+          accessibilityLabel="Filter categories"
+          activeTab={activeChip}
+          onChange={setActiveChip}
+          tabs={chipTabs}
+        />
+      </Box>
+
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 24 }}>
+        <Box padding={2}>
+          <AssetChart />
+        </Box>
+
+        <Box paddingY={1}>
+          <AssetCarousel />
+        </Box>
+
+        <Box padding={2}>
+          <AssetList />
+        </Box>
+
+        <Box paddingY={1}>
+          <CardList />
+        </Box>
+      </ScrollView>
+
+      <Box borderedTop background="bg" style={{ paddingBottom: insets.bottom }}>
+        <HStack>
+          <TabBarButton
+            icon="home"
+            label="Home"
+            active={activeNavTab === 'home'}
+            onPress={() => setActiveNavTab('home')}
+          />
+          <TabBarButton
+            icon="sendReceive"
+            label="Trade"
+            active={activeNavTab === 'trade'}
+            onPress={() => setActiveNavTab('trade')}
+          />
+          <TabBarButton
+            icon="compass"
+            label="Explore"
+            active={activeNavTab === 'explore'}
+            onPress={() => setActiveNavTab('explore')}
+          />
+          <TabBarButton
+            icon="account"
+            label="Account"
+            active={activeNavTab === 'account'}
+            onPress={() => setActiveNavTab('account')}
+          />
+        </HStack>
+      </Box>
+    </VStack>
+  );
+}

templates/expo-app/README.md

@@ -0,0 +1,49 @@
+# Coinbase Design System - Expo Template
+
+A React Native mobile application template integrated with the Coinbase Design System (CDS).
+
+## Installation
+
+Use `gitpick` to create a new project from this template:
+
+```sh
+npx -y gitpick coinbase/cds/tree/master/templates/expo-app cds-expo
+cd cds-expo
+```
+
+## Setup
+
+We suggest [nvm](https://github.com/nvm-sh/nvm/tree/master) to manage Node.js versions. If you have it installed, you can use these commands to set the correct Node.js version. Using corepack ensures you have your package manager setup.
+
+```sh
+nvm install
+nvm use
+corepack enable
+yarn
+```
+
+## Development
+
+- `yarn start` - Start the Expo development server
+- `yarn ios` - Run on iOS simulator
+- `yarn android` - Run on Android emulator
+- `yarn web` - Run in web browser
+
+## Dev Builds
+
+Some CDS components require native modules that are not available in Expo Go. If you use any of the following components, you will need to create a [development build](https://docs.expo.dev/develop/development-builds/introduction/):
+
+- `DatePicker`
+- `openWebBrowser`
+- `AndroidNavigationBar`
+
+To create a development build:
+
+```sh
+npx expo prebuild
+npx expo run:ios   # or npx expo run:android
+```
+
+## Documentation
+
+Visit [cds.coinbase.com](https://cds.coinbase.com) for the latest CDS documentation and component examples.