Skip to content

Commit 5b21ab4

Browse files
iM-GeeKyiM-GeeKy
committed
Migrate example to expo 51 and expo router
1 parent 5d90189 commit 5b21ab4

21 files changed

+1346
-1557
lines changed

‎example/.gitignore‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# XDE
6+
.expo/
7+
/example/dist
8+
9+
# VSCode
10+
.vscode/
11+
jsconfig.json
12+
13+
# Xcode
14+
#
15+
build/
16+
*.pbxuser
17+
!default.pbxuser
18+
*.mode1v3
19+
!default.mode1v3
20+
*.mode2v3
21+
!default.mode2v3
22+
*.perspectivev3
23+
!default.perspectivev3
24+
xcuserdata
25+
*.xccheckout
26+
*.moved-aside
27+
DerivedData
28+
*.hmap
29+
*.ipa
30+
*.xcuserstate
31+
project.xcworkspace
32+
33+
# Android/IJ
34+
#
35+
.idea
36+
.gradle
37+
local.properties
38+
android.iml
39+
40+
# Cocoapods
41+
#
42+
example/ios/Pods
43+
44+
# node.js
45+
#
46+
node_modules/
47+
npm-debug.log
48+
yarn-debug.log
49+
yarn-error.log
50+
51+
# BUCK
52+
buck-out/
53+
\.buckd/
54+
android/app/libs
55+
android/keystores/debug.keystore
56+
57+
# Expo
58+
.expo/*
59+
60+
# generated by bob
61+
lib/
62+
63+
.env
64+
web-build
65+
66+
# Code Coverage
67+
/coverage/
68+
69+
# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
70+
# The following patterns were generated by expo-cli
71+
72+
expo-env.d.ts
73+
# @end expo-cli

‎example/app.json‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,34 @@
11
{
2-
"name": "react-native-paper-dates-example",
3-
"displayName": "PaperDates Example",
42
"expo": {
53
"name": "react-native-paper-dates-example",
64
"slug": "react-native-paper-dates-example",
75
"description": "Example app for react-native-paper-dates",
8-
"privacy": "public",
96
"version": "1.0.0",
10-
"platforms": [
11-
"ios",
12-
"android",
13-
"web"
14-
],
7+
"privacy": "public",
8+
"scheme": "react-native-paper-dates",
159
"ios": {
1610
"supportsTablet": true
1711
},
1812
"androidStatusBar": {
1913
"translucent": true
2014
},
2115
"web": {
22-
"favicon": "./favicon.png",
16+
"bundler": "metro",
17+
"favicon": "./assets/images/favicon.png",
2318
"name": "React Native Paper Dates",
2419
"shortName": "PaperDates",
25-
"description": "Example app for react-native-paper-dates"
20+
"description": "Example app for react-native-paper-dates",
21+
"output": "static"
2622
},
2723
"assetBundlePatterns": [
2824
"**/*"
2925
],
30-
"userInterfaceStyle": "automatic"
26+
"userInterfaceStyle": "automatic",
27+
"plugins": [
28+
"expo-router"
29+
],
30+
"experiments": {
31+
"typedRoutes": true
32+
}
3133
}
3234
}

‎example/app/+html.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { ScrollViewStyleReset } from 'expo-router/html'
2+
import React from 'react'
3+
import { type PropsWithChildren } from 'react'
4+
5+
/**
6+
* This file is web-only and used to configure the root HTML for every web page during static rendering.
7+
* The contents of this function only run in Node.js environments and do not have access to the DOM or browser APIs.
8+
*/
9+
export default function Root({ children }: PropsWithChildren) {
10+
return (
11+
<html lang="en">
12+
<head>
13+
<meta charSet="utf-8" />
14+
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
15+
<meta
16+
name="viewport"
17+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
18+
/>
19+
20+
{/*
21+
Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
22+
However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
23+
*/}
24+
<ScrollViewStyleReset />
25+
26+
{/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
27+
<style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
28+
{/* Add any additional <head> elements that you want globally available on web... */}
29+
</head>
30+
<body>{children}</body>
31+
</html>
32+
)
33+
}
34+
35+
const responsiveBackground = `
36+
body {
37+
background-color: #fff;
38+
}
39+
@media (prefers-color-scheme: dark) {
40+
body {
41+
background-color: #000;
42+
}
43+
}`

‎example/app/_layout.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Stack } from 'expo-router'
2+
3+
import { PaperProvider } from 'react-native-paper'
4+
import React from 'react'
5+
6+
export default function RootLayout() {
7+
return (
8+
<PaperProvider>
9+
<Stack>
10+
<Stack.Screen name="index" options={{ headerShown: false }} />
11+
</Stack>
12+
</PaperProvider>
13+
)
14+
}

‎example/src/App.tsx‎ renamed to ‎example/app/index.tsx‎

Lines changed: 14 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,20 @@ import {
77
useWindowDimensions,
88
useColorScheme,
99
} from 'react-native'
10-
import {
11-
SafeAreaProvider,
12-
useSafeAreaInsets,
13-
} from 'react-native-safe-area-context'
10+
import { useSafeAreaInsets } from 'react-native-safe-area-context'
1411
import {
1512
Button,
1613
Text,
17-
Provider as PaperProvider,
1814
useTheme,
1915
Paragraph,
2016
List,
2117
Divider,
2218
Chip,
19+
Provider as PaperProvider,
2320
MD3DarkTheme,
2421
MD3LightTheme,
25-
MD2LightTheme,
2622
MD2DarkTheme,
23+
MD2LightTheme,
2724
} from 'react-native-paper'
2825
import {
2926
DatePickerModal,
@@ -92,18 +89,14 @@ locales.forEach((locale) => {
9289
registerTranslation(locale[0], locale[1])
9390
})
9491

95-
function App({
96-
materialYouEnabled,
97-
setMaterialYouEnabled,
98-
}: {
99-
materialYouEnabled: boolean
100-
setMaterialYouEnabled: (v: boolean) => void
101-
}) {
92+
export default function Example() {
10293
/** Hooks. */
94+
const colorScheme = useColorScheme()
10395
const theme = useTheme()
10496
const insets = useSafeAreaInsets()
10597

10698
/** State variables. */
99+
const [materialYouEnabled, setMaterialYouEnabled] = useState(true)
107100
const [inputDate, setInputDate] = useState<Date | undefined>(undefined)
108101
const [date, setDate] = useState<Date | undefined>(undefined)
109102
const [dates, setDates] = useState<Date[] | undefined>()
@@ -124,6 +117,8 @@ function App({
124117
const [multiOpen, setMultiOpen] = useState(false)
125118

126119
/** Constants. */
120+
const m3Theme = colorScheme === 'dark' ? MD3DarkTheme : MD3LightTheme
121+
const m2Theme = colorScheme === 'dark' ? MD2DarkTheme : MD2LightTheme
127122
const maxFontSizeMultiplier = 1.5
128123
const dateFormatter = useMemo(
129124
() =>
@@ -197,7 +192,7 @@ function App({
197192
const isLarge = dimensions.width > 600
198193

199194
return (
200-
<>
195+
<PaperProvider theme={materialYouEnabled ? m3Theme : m2Theme}>
201196
<StatusBar />
202197
<ScrollView
203198
style={{ backgroundColor: theme.colors.background }}
@@ -209,7 +204,10 @@ function App({
209204
<View style={styles.contentContainer}>
210205
<View style={isLarge && styles.surface}>
211206
<View style={styles.row}>
212-
<Image source={require('./schedule.png')} style={styles.logo} />
207+
<Image
208+
source={require('../assets/images/schedule.png')}
209+
style={styles.logo}
210+
/>
213211
<View style={styles.column}>
214212
<Text
215213
maxFontSizeMultiplier={maxFontSizeMultiplier}
@@ -453,7 +451,6 @@ function App({
453451
Pick multiple dates
454452
</Button>
455453
</View>
456-
457454
<View style={styles.sectionContainer}>
458455
<View style={styles.section}>
459456
<Text maxFontSizeMultiplier={maxFontSizeMultiplier}>
@@ -570,25 +567,7 @@ function App({
570567
hours={time.hours}
571568
minutes={time.minutes}
572569
/>
573-
</>
574-
)
575-
}
576-
577-
export default function AppWithProviders() {
578-
const colorScheme = useColorScheme()
579-
const [materialYouEnabled, setMaterialYouEnabled] = useState(true)
580-
const m3Theme = colorScheme === 'dark' ? MD3DarkTheme : MD3LightTheme
581-
const m2Theme = colorScheme === 'dark' ? MD2DarkTheme : MD2LightTheme
582-
583-
return (
584-
<SafeAreaProvider>
585-
<PaperProvider theme={materialYouEnabled ? m3Theme : m2Theme}>
586-
<App
587-
materialYouEnabled={materialYouEnabled}
588-
setMaterialYouEnabled={setMaterialYouEnabled}
589-
/>
590-
</PaperProvider>
591-
</SafeAreaProvider>
570+
</PaperProvider>
592571
)
593572
}
594573

‎example/favicon.png‎ renamed to ‎example/assets/images/favicon.png‎

File renamed without changes.

‎example/src/schedule.png‎ renamed to ‎example/assets/images/schedule.png‎

File renamed without changes.

‎example/babel.config.js‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,7 @@
1-
const path = require('path')
2-
const pak = require('../package.json')
3-
41
module.exports = function (api) {
52
api.cache(true)
6-
73
return {
84
presets: ['babel-preset-expo'],
9-
plugins: [
10-
[
11-
'module-resolver',
12-
{
13-
extensions: ['.tsx', '.ts', '.js', '.json'],
14-
alias: {
15-
// For development, we want to alias the library to the source
16-
[pak.name]: path.join(__dirname, '..', pak.source),
17-
'react-native-vector-icons': '@expo/vector-icons',
18-
},
19-
},
20-
],
21-
],
5+
plugins: [['react-native-paper/babel']],
226
}
237
}

‎example/index.js‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎example/metro.config.js‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

0 commit comments

Comments
 (0)