Merge pull request #413 from web-ridge/expo-51

Expo 51
web-ridge · Aug 3, 2024 · b44e7c7 · b44e7c7
2 parents 5d90189 + 1250f03
commit b44e7c7
Show file tree

Hide file tree

Showing 29 changed files with 3,847 additions and 3,991 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -84,7 +84,7 @@ jobs:
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           AWS_REGION: 'eu-central-1'
-          SOURCE_DIR: 'example/web-build'      # optional: defaults to entire repository
+          SOURCE_DIR: 'example/dist'      # optional: defaults to entire repository
 
 
 

diff --git a/.gitignore b/.gitignore
@@ -65,3 +65,9 @@ web-build
 
 # Code Coverage
 /coverage/
+
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli
diff --git a/example/.gitignore b/example/.gitignore
@@ -0,0 +1,73 @@
+# OSX
+#
+.DS_Store
+
+# XDE
+.expo/
+/example/dist
+
+# VSCode
+.vscode/
+jsconfig.json
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IJ
+#
+.idea
+.gradle
+local.properties
+android.iml
+
+# Cocoapods
+#
+example/ios/Pods
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+android/app/libs
+android/keystores/debug.keystore
+
+# Expo
+.expo/*
+
+# generated by bob
+lib/
+
+.env
+web-build
+
+# Code Coverage
+/coverage/
+
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli
diff --git a/example/app.json b/example/app.json
@@ -1,32 +1,34 @@
 {
-  "name": "react-native-paper-dates-example",
-  "displayName": "PaperDates Example",
   "expo": {
     "name": "react-native-paper-dates-example",
     "slug": "react-native-paper-dates-example",
     "description": "Example app for react-native-paper-dates",
-    "privacy": "public",
     "version": "1.0.0",
-    "platforms": [
-      "ios",
-      "android",
-      "web"
-    ],
+    "privacy": "public",
+    "scheme": "react-native-paper-dates",
     "ios": {
       "supportsTablet": true
     },
     "androidStatusBar": {
       "translucent": true
     },
     "web": {
-      "favicon": "./favicon.png",
+      "bundler": "metro",
+      "favicon": "./assets/images/favicon.png",
       "name": "React Native Paper Dates",
       "shortName": "PaperDates",
-      "description": "Example app for react-native-paper-dates"
+      "description": "Example app for react-native-paper-dates",
+      "output": "static"
     },
     "assetBundlePatterns": [
       "**/*"
     ],
-    "userInterfaceStyle": "automatic"
+    "userInterfaceStyle": "automatic",
+    "plugins": [
+      "expo-router"
+    ],
+    "experiments": {
+      "typedRoutes": true
+    }
   }
 }
diff --git a/example/app/+html.tsx b/example/app/+html.tsx
@@ -0,0 +1,43 @@
+import { ScrollViewStyleReset } from 'expo-router/html'
+import React from 'react'
+import { type PropsWithChildren } from 'react'
+
+/**
+ * This file is web-only and used to configure the root HTML for every web page during static rendering.
+ * The contents of this function only run in Node.js environments and do not have access to the DOM or browser APIs.
+ */
+export default function Root({ children }: PropsWithChildren) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no"
+        />
+
+        {/*
+          Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
+          However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
+        */}
+        <ScrollViewStyleReset />
+
+        {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
+        <style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
+        {/* Add any additional <head> elements that you want globally available on web... */}
+      </head>
+      <body>{children}</body>
+    </html>
+  )
+}
+
+const responsiveBackground = `
+body {
+  background-color: #fff;
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #000;
+  }
+}`
diff --git a/example/app/_layout.tsx b/example/app/_layout.tsx
@@ -0,0 +1,14 @@
+import { Stack } from 'expo-router'
+
+import { PaperProvider } from 'react-native-paper'
+import React from 'react'
+
+export default function RootLayout() {
+  return (
+    <PaperProvider>
+      <Stack>
+        <Stack.Screen name="index" options={{ headerShown: false }} />
+      </Stack>
+    </PaperProvider>
+  )
+}
diff --git a/example/src/App.tsx → example/app/index.tsx b/example/src/App.tsx → example/app/index.tsx
@@ -7,23 +7,20 @@ import {
   useWindowDimensions,
   useColorScheme,
 } from 'react-native'
-import {
-  SafeAreaProvider,
-  useSafeAreaInsets,
-} from 'react-native-safe-area-context'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import {
   Button,
   Text,
-  Provider as PaperProvider,
   useTheme,
   Paragraph,
   List,
   Divider,
   Chip,
+  Provider as PaperProvider,
   MD3DarkTheme,
   MD3LightTheme,
-  MD2LightTheme,
   MD2DarkTheme,
+  MD2LightTheme,
 } from 'react-native-paper'
 import {
   DatePickerModal,
@@ -92,18 +89,14 @@ locales.forEach((locale) => {
   registerTranslation(locale[0], locale[1])
 })
 
-function App({
-  materialYouEnabled,
-  setMaterialYouEnabled,
-}: {
-  materialYouEnabled: boolean
-  setMaterialYouEnabled: (v: boolean) => void
-}) {
+export default function Example() {
   /** Hooks. */
+  const colorScheme = useColorScheme()
   const theme = useTheme()
   const insets = useSafeAreaInsets()
 
   /** State variables. */
+  const [materialYouEnabled, setMaterialYouEnabled] = useState(true)
   const [inputDate, setInputDate] = useState<Date | undefined>(undefined)
   const [date, setDate] = useState<Date | undefined>(undefined)
   const [dates, setDates] = useState<Date[] | undefined>()
@@ -124,6 +117,8 @@ function App({
   const [multiOpen, setMultiOpen] = useState(false)
 
   /** Constants. */
+  const m3Theme = colorScheme === 'dark' ? MD3DarkTheme : MD3LightTheme
+  const m2Theme = colorScheme === 'dark' ? MD2DarkTheme : MD2LightTheme
   const maxFontSizeMultiplier = 1.5
   const dateFormatter = useMemo(
     () =>
@@ -197,7 +192,7 @@ function App({
   const isLarge = dimensions.width > 600
 
   return (
-    <>
+    <PaperProvider theme={materialYouEnabled ? m3Theme : m2Theme}>
       <StatusBar />
       <ScrollView
         style={{ backgroundColor: theme.colors.background }}
@@ -209,7 +204,10 @@ function App({
         <View style={styles.contentContainer}>
           <View style={isLarge && styles.surface}>
             <View style={styles.row}>
-              <Image source={require('./schedule.png')} style={styles.logo} />
+              <Image
+                source={require('../assets/images/schedule.png')}
+                style={styles.logo}
+              />
               <View style={styles.column}>
                 <Text
                   maxFontSizeMultiplier={maxFontSizeMultiplier}
@@ -453,7 +451,6 @@ function App({
                   Pick multiple dates
                 </Button>
               </View>
-
               <View style={styles.sectionContainer}>
                 <View style={styles.section}>
                   <Text maxFontSizeMultiplier={maxFontSizeMultiplier}>
@@ -570,25 +567,7 @@ function App({
         hours={time.hours}
         minutes={time.minutes}
       />
-    </>
-  )
-}
-
-export default function AppWithProviders() {
-  const colorScheme = useColorScheme()
-  const [materialYouEnabled, setMaterialYouEnabled] = useState(true)
-  const m3Theme = colorScheme === 'dark' ? MD3DarkTheme : MD3LightTheme
-  const m2Theme = colorScheme === 'dark' ? MD2DarkTheme : MD2LightTheme
-
-  return (
-    <SafeAreaProvider>
-      <PaperProvider theme={materialYouEnabled ? m3Theme : m2Theme}>
-        <App
-          materialYouEnabled={materialYouEnabled}
-          setMaterialYouEnabled={setMaterialYouEnabled}
-        />
-      </PaperProvider>
-    </SafeAreaProvider>
+    </PaperProvider>
   )
 }
 

diff --git a/example/favicon.png → example/assets/images/favicon.png b/example/favicon.png → example/assets/images/favicon.png
diff --git a/example/src/schedule.png → example/assets/images/schedule.png b/example/src/schedule.png → example/assets/images/schedule.png
diff --git a/example/babel.config.js b/example/babel.config.js
@@ -1,23 +1,7 @@
-const path = require('path')
-const pak = require('../package.json')
-
 module.exports = function (api) {
   api.cache(true)
-
   return {
     presets: ['babel-preset-expo'],
-    plugins: [
-      [
-        'module-resolver',
-        {
-          extensions: ['.tsx', '.ts', '.js', '.json'],
-          alias: {
-            // For development, we want to alias the library to the source
-            [pak.name]: path.join(__dirname, '..', pak.source),
-            'react-native-vector-icons': '@expo/vector-icons',
-          },
-        },
-      ],
-    ],
+    plugins: [['react-native-paper/babel']],
   }
 }
diff --git a/example/index.js b/example/index.js
diff --git a/example/metro.config.js b/example/metro.config.js