Skip to content

Commit 1ece1e9

Browse files
aaronleopoldArklaum
aaronleopold
and
Arklaum
authored
⬆️ Upgrade expo, react, and vite (#760)
* wip: upgrade expo and react * example fix home padding * fix vertical drag * misc fixes and touchups * wip: upgrade react * wip: upgrade more react deps * wow * fix some android issues * bump node * bump node * ✨ (expo): Swipe dots to scrub (#759) --------- Co-authored-by: Jo <[email protected]>
1 parent f381254 commit 1ece1e9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+1780
-1881
lines changed

‎.github/actions/setup-yarn/action.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ runs:
1313
- name: Setup node
1414
uses: actions/setup-node@v4
1515
with:
16-
node-version: '20.9.0'
16+
node-version: '22.14.0'
1717

1818
- name: Install yarn
1919
shell: bash
@@ -23,7 +23,7 @@ runs:
2323
if: ${{ inputs.cache-dependencies == 'true' }}
2424
uses: actions/setup-node@v4
2525
with:
26-
node-version: '20.9.0'
26+
node-version: '22.14.0'
2727
cache: 'yarn'
2828

2929
- name: Install dependencies

‎apps/desktop/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,18 @@
2020
"@stump/browser": "*",
2121
"@stump/client": "*",
2222
"@stump/sdk": "*",
23-
"@tanstack/react-query": "^5.74.4",
23+
"@tanstack/react-query": "^5.87.1",
2424
"@tauri-apps/plugin-os": "=2.0.0",
2525
"@tauri-apps/plugin-store": "=2.0.0",
26-
"react": "^18.3.1",
27-
"react-dom": "^18.2.0"
26+
"react": "^19.0.0",
27+
"react-dom": "^19.0.0"
2828
},
2929
"devDependencies": {
3030
"@tailwindcss/typography": "^0.5.10",
3131
"@tauri-apps/api": "^2.0.2",
3232
"@tauri-apps/cli": "^2.0.3",
33-
"@types/react": "^18.3.12",
34-
"@types/react-dom": "^18.3.1",
33+
"@types/react": "^19.0.0",
34+
"@types/react-dom": "^19.0.0",
3535
"@vitejs/plugin-react": "^4.1.0",
3636
"autoprefixer": "^10.4.16",
3737
"postcss": "^8.4.31",

‎apps/docs/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@
2424
"next": "^14.2.15",
2525
"nextra": "^3.0.15",
2626
"nextra-theme-docs": "^3.0.15",
27-
"react": "^18.3.1",
27+
"react": "^19.0.0",
2828
"react-device-frameset": "^1.3.4",
29-
"react-dom": "^18.2.0"
29+
"react-dom": "^19.0.0"
3030
},
3131
"devDependencies": {
3232
"@types/node": "^20.8.7",

‎apps/expo/app.config.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,15 @@ export default ({ config }: ConfigContext): ExpoConfig => {
116116
organization: 'stumpapp',
117117
},
118118
],
119+
[
120+
'react-native-edge-to-edge',
121+
{
122+
android: {
123+
parentTheme: 'Default',
124+
enforceNavigationBarContrast: false,
125+
},
126+
},
127+
],
119128
],
120129
owner: 'stumpapp',
121130
experiments: {

‎apps/expo/app/(tabs)/settings/index.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { View } from 'react-native'
1+
import { Platform, View } from 'react-native'
22
import { ScrollView } from 'react-native-gesture-handler'
33

44
import { ContactInformation, SupportInformation } from '~/components/appSettings'
@@ -14,11 +14,12 @@ import {
1414
} from '~/components/appSettings/preferences'
1515
import { StumpEnabled } from '~/components/appSettings/stump'
1616
import { Text } from '~/components/ui/text'
17+
import { cn } from '~/lib/utils'
1718

1819
export default function Screen() {
1920
return (
2021
<ScrollView className="flex-1 bg-background" contentInsetAdjustmentBehavior="automatic">
21-
<View className="flex-1 gap-8 bg-background p-6">
22+
<View className="flex-1 gap-8 bg-background p-4 tablet:p-6">
2223
<View>
2324
<Text className="mb-3 text-foreground-muted">Preferences</Text>
2425
<AppTheme />
@@ -64,3 +65,12 @@ export default function Screen() {
6465
</ScrollView>
6566
)
6667
}
68+
69+
const Divider = () => (
70+
<View
71+
className={cn('h-px w-full bg-edge')}
72+
style={{
73+
marginLeft: Platform.OS === 'android' ? 0 : 42,
74+
}}
75+
/>
76+
)

‎apps/expo/app/_layout.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@ import duration from 'dayjs/plugin/duration'
77
import relativeTime from 'dayjs/plugin/relativeTime'
88
import { Stack } from 'expo-router'
99
import * as SplashScreen from 'expo-splash-screen'
10-
import { StatusBar } from 'expo-status-bar'
1110
import LottieView from 'lottie-react-native'
11+
import { SystemBars } from 'react-native-edge-to-edge'
12+
1213
import * as React from 'react'
1314
import { Platform, View } from 'react-native'
1415
import { GestureHandlerRootView } from 'react-native-gesture-handler'
@@ -104,7 +105,9 @@ export default function RootLayout() {
104105
<ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
105106
<BottomSheet.Provider>
106107
{/* TODO: This pushes content when entering/exiting */}
107-
<StatusBar style={isDarkColorScheme ? 'light' : 'dark'} hidden={shouldHideStatusBar} />
108+
{/* <StatusBar style={isDarkColorScheme ? 'light' : 'dark'} hidden={shouldHideStatusBar} /> */}
109+
{/* Note: https://github.com/react-navigation/react-navigation/issues/12579 */}
110+
<SystemBars style={isDarkColorScheme ? 'light' : 'dark'} hidden={shouldHideStatusBar} />
108111
<Stack
109112
// https://github.com/expo/expo/issues/15244 ?
110113
// screenOptions={{

‎apps/expo/app/server/[id]/(tabs)/browse/index.tsx‎

Lines changed: 0 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -135,118 +135,3 @@ const Divider = () => (
135135
}}
136136
/>
137137
)
138-
139-
// import { UserPermission } from '@stump/graphql'
140-
// import { useMemo } from 'react'
141-
// import { useWindowDimensions, View } from 'react-native'
142-
// import { ScrollView } from 'react-native-gesture-handler'
143-
// import { useSafeAreaInsets } from 'react-native-safe-area-context'
144-
// import { SimpleGrid } from 'react-native-super-grid'
145-
146-
// import { useStumpServer } from '~/components/activeServer'
147-
// import { StackedBookThumbnails } from '~/components/book'
148-
// import { StackedLibraryThumbnails } from '~/components/library'
149-
// import { StackedSeriesThumbnails } from '~/components/series'
150-
// import { StackedSmartListThumbnails } from '~/components/smartList'
151-
// import { Heading, icons, Text } from '~/components/ui'
152-
// const { Crown, Slash } = icons
153-
154-
// const ITEM_SPACING = 10
155-
156-
// export default function Screen() {
157-
// const { width } = useWindowDimensions()
158-
// const {
159-
// activeServer: { id: serverID },
160-
// checkPermission,
161-
// } = useStumpServer()
162-
163-
// const insets = useSafeAreaInsets()
164-
// const showSmartLists = checkPermission(UserPermission.AccessSmartList)
165-
// // iPad or other large screens can have more columns (i.e., smaller itemDimension) but most phones should have 2 columns
166-
// const isTablet = useMemo(() => width > 768, [width])
167-
// const itemDimension = useMemo(
168-
// () =>
169-
// width /
170-
// // 2 columns on phones
171-
// (isTablet ? 4 : 2) -
172-
// 16 * 2, // 16px padding on each side
173-
// [isTablet, width],
174-
// )
175-
176-
// const sections = useMemo(
177-
// () => [
178-
// {
179-
// title: 'Libraries',
180-
// href: `/server/${serverID}/libraries`,
181-
// render: () => <StackedLibraryThumbnails />,
182-
// },
183-
// {
184-
// title: 'Series',
185-
// href: `/server/${serverID}/series`,
186-
// render: () => <StackedSeriesThumbnails />,
187-
// },
188-
// {
189-
// title: 'Books',
190-
// href: `/server/${serverID}/books`,
191-
// render: () => <StackedBookThumbnails />,
192-
// },
193-
// ...(showSmartLists
194-
// ? [
195-
// {
196-
// title: 'Smart Lists',
197-
// href: `/server/${serverID}/smart-lists`,
198-
// render: () => <StackedSmartListThumbnails />,
199-
// },
200-
// ]
201-
// : []),
202-
// ],
203-
// [serverID, showSmartLists],
204-
// )
205-
206-
// return (
207-
// <View
208-
// className="flex-1 bg-background"
209-
// style={{
210-
// paddingTop: insets.top,
211-
// }}
212-
// >
213-
// <ScrollView className="flex-1 bg-background p-4">
214-
// {/* TODO: sticky header once heading isn't visible? */}
215-
// <Heading size="xl">Browse</Heading>
216-
217-
// <View className="mt-8 flex-1 gap-8">
218-
// <View>
219-
// <Text className="mb-3 text-foreground-muted">Favorites</Text>
220-
221-
// <View className="h-24 w-full items-center justify-center gap-2 rounded-lg border border-dashed border-edge p-3">
222-
// <View className="relative flex justify-center">
223-
// <View className="flex items-center justify-center rounded-lg bg-background-surface p-1.5">
224-
// <Crown className="h-6 w-6 text-foreground-muted" />
225-
// <Slash className="absolute h-6 w-6 scale-x-[-1] transform text-foreground opacity-80" />
226-
// </View>
227-
// </View>
228-
229-
// <Text>No favorites</Text>
230-
// </View>
231-
// </View>
232-
233-
// <View>
234-
// <Text className="mb-3 text-foreground-muted">All</Text>
235-
236-
// {/* TODO: figure out spacing issues... */}
237-
// <SimpleGrid
238-
// fixed
239-
// style={{ flex: 1 }}
240-
// listKey={'browse-defaults'}
241-
// itemDimension={itemDimension}
242-
// data={sections}
243-
// renderItem={({ item: { render } }) => <View className="pb-2">{render()}</View>}
244-
// keyExtractor={(item) => item.title}
245-
// spacing={ITEM_SPACING}
246-
// />
247-
// </View>
248-
// </View>
249-
// </ScrollView>
250-
// </View>
251-
// )
252-
// }

‎apps/expo/app/server/[id]/(tabs)/index/_layout.tsx‎

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
1-
import { Stack, useRouter } from 'expo-router'
2-
import { Unplug } from 'lucide-react-native'
3-
import { Platform, View } from 'react-native'
4-
import { Pressable } from 'react-native-gesture-handler'
1+
import { Stack } from 'expo-router'
2+
import { Platform } from 'react-native'
53

6-
import { Icon } from '~/components/ui/icon'
7-
import { cn } from '~/lib/utils'
84
import { usePreferencesStore } from '~/stores'
95

106
export default function Layout() {
117
const animationEnabled = usePreferencesStore((state) => !state.reduceAnimations)
128

13-
const router = useRouter()
14-
159
return (
1610
<Stack screenOptions={{ headerShown: false }}>
1711
<Stack.Screen
@@ -26,20 +20,6 @@ export default function Layout() {
2620
headerLargeTitle: true,
2721
headerBlurEffect: 'regular',
2822
animation: animationEnabled ? 'default' : 'none',
29-
headerLeft: () => (
30-
<Pressable onPress={() => router.dismissAll()}>
31-
{({ pressed }) => (
32-
<View
33-
className={cn('aspect-square flex-1 items-start justify-center', {
34-
'mr-4': Platform.OS === 'android',
35-
})}
36-
style={{ opacity: pressed ? 0.6 : 1 }}
37-
>
38-
<Icon as={Unplug} size={20} className="text-foreground-muted" />
39-
</View>
40-
)}
41-
</Pressable>
42-
),
4323
}}
4424
/>
4525
</Stack>

‎apps/expo/app/server/[id]/(tabs)/index/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,11 @@ export default function Screen() {
2424

2525
return (
2626
<ScrollView
27-
className="flex-1 bg-background p-4"
27+
className="flex-1 bg-background"
2828
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
29-
contentInsetAdjustmentBehavior="automatic"
29+
contentInsetAdjustmentBehavior="always"
3030
>
31-
<View className="flex flex-1 gap-8 pb-8">
31+
<View className="flex flex-1 gap-8 pb-8 pt-4">
3232
<ContinueReading />
3333
<OnDeck />
3434
<RecentlyAddedSeriesHorizontal />

‎apps/expo/app/server/[id]/books/[id]/_layout.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ export default function Screen() {
1414
headerTitle: '',
1515
headerShown: Platform.OS === 'ios',
1616
headerTransparent: true,
17-
headerLargeTitleStyle: {
18-
fontSize: 24,
19-
},
20-
headerLargeTitle: true,
17+
// headerLargeTitleStyle: {
18+
// fontSize: 24,
19+
// },
20+
// headerLargeTitle: true,
2121
headerBlurEffect: 'regular',
2222
}}
2323
/>

0 commit comments

Comments
 (0)