Skip to content

Kit refresh: Expo SDK 55, latest deps, fixes of native flows #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Gbuomprisco merged 5 commits into from
May 21, 2026
Merged

Kit refresh: Expo SDK 55, latest deps, fixes of native flows #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4e6c4ba
feat: update expo/dev deps to latest
ChcJohnie May 14, 2026
f6130b7
feat: update UI components to latest RNR kit
ChcJohnie May 15, 2026
669f29a
feat: update sonner dep + toaster config baseline
ChcJohnie May 15, 2026
ecfe152
feat: rewrite upload profile picture flow to native friendly
ChcJohnie May 15, 2026
ff6ec7e
fix: various issues identified in review phase
ChcJohnie May 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions apps/expo-app/app.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
"icon": "./assets/images/icon.png",
"scheme": "com.supabase",
"userInterfaceStyle": "automatic",
"newArchEnabled": true,
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
Expand All @@ -21,7 +20,8 @@
"adaptiveIcon": {
"foregroundImage": "./assets/images/adaptive-icon.png",
"backgroundColor": "#ffffff"
}
},
"package": "com.expo.expoapp"
},
"web": {
"bundler": "metro",
Expand All @@ -38,6 +38,12 @@
"resizeMode": "contain",
"backgroundColor": "#ffffff"
}
],
[
"expo-image-picker",
{
"photosPermission": "Allow the app to access your photos so you can set a profile picture."
}
]
],
"experiments": {
Expand Down
8 changes: 6 additions & 2 deletions apps/expo-app/app/(app)/(main)/_layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,9 @@ function MainLayoutTabs() {
options={{
title: 'Home',
href: '/',
tabBarIcon: () => <HomeIcon className={'h-5'} />,
tabBarIcon: ({ color, size }) => (
<HomeIcon color={color} size={size} />
),
}}
/>

Expand All @@ -49,7 +51,9 @@ function MainLayoutTabs() {
title: 'Settings',
href: '/settings',
headerShown: false,
tabBarIcon: () => <SettingsIcon className={'h-5'} />,
tabBarIcon: ({ color, size }) => (
<SettingsIcon color={color} size={size} />
),
}}
/>
</Tabs>
Expand Down
11 changes: 4 additions & 7 deletions apps/expo-app/app/(app)/auth/error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { Link } from 'expo-router';
import { View } from 'react-native';

import {
Expand All @@ -7,7 +6,7 @@ import {
AlertDescription,
AlertIcon,
AlertTitle,
Button,
ButtonLink,
Text,
X,
} from '@kit/ui';
Expand All @@ -30,11 +29,9 @@ export default function AuthErrorPage() {
<AlertDescription>Please try again</AlertDescription>

<AlertActions>
<Button variant={'outline'} asChild>
<Link href="/auth/sign-up">
<Text>Go back</Text>
</Link>
</Button>
<ButtonLink variant="outline" href="/auth/sign-up">
<Text>Go back</Text>
</ButtonLink>
</AlertActions>
</Alert>
</View>
Expand Down
12 changes: 4 additions & 8 deletions apps/expo-app/app/(app)/auth/password-reset.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { Link } from 'expo-router';

import {
AuthPageLayout,
AuthPageLayoutDescription,
Expand All @@ -9,7 +7,7 @@ import {
AuthPageLayoutSecondaryButton,
EmailPasswordResetForm,
} from '@kit/auth';
import { Button, Text } from '@kit/ui';
import { ButtonLink, Text } from '@kit/ui';

import { LogoImage } from '../../../components/logo';

Expand All @@ -31,11 +29,9 @@ export default function PasswordResetPage() {
</AuthPageLayoutForm>

<AuthPageLayoutSecondaryButton>
<Button variant={'link'} asChild>
<Link className={'text-center'} href="/auth/sign-in">
<Text>Password Recovered? Sign In.</Text>
</Link>
</Button>
<ButtonLink variant="link" href="/auth/sign-in">
<Text className="text-center">Password Recovered? Sign In.</Text>
</ButtonLink>
</AuthPageLayoutSecondaryButton>
</AuthPageLayout>
);
Expand Down
12 changes: 4 additions & 8 deletions apps/expo-app/app/(app)/auth/sign-in.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { Link } from 'expo-router';

import {
AuthPageLayout,
AuthPageLayoutDescription,
Expand All @@ -9,7 +7,7 @@ import {
AuthPageLayoutSecondaryButton,
SignInForm,
} from '@kit/auth';
import { Button, Text } from '@kit/ui';
import { ButtonLink, Text } from '@kit/ui';

import { LogoImage } from '../../../components/logo';

Expand All @@ -31,11 +29,9 @@ export default function SignInPage() {
</AuthPageLayoutForm>

<AuthPageLayoutSecondaryButton>
<Button variant={'link'} asChild>
<Link className={'text-center'} href="/auth/sign-up">
<Text>Create an Account</Text>
</Link>
</Button>
<ButtonLink variant="link" href="/auth/sign-up">
<Text className="text-center">Create an Account</Text>
</ButtonLink>
</AuthPageLayoutSecondaryButton>
</AuthPageLayout>
);
Expand Down
12 changes: 4 additions & 8 deletions apps/expo-app/app/(app)/auth/sign-up.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { Link } from 'expo-router';

import {
AuthPageLayout,
AuthPageLayoutDescription,
Expand All @@ -9,7 +7,7 @@ import {
AuthPageLayoutSecondaryButton,
SignUpForm,
} from '@kit/auth';
import { Button, Text } from '@kit/ui';
import { ButtonLink, Text } from '@kit/ui';

import { LogoImage } from '../../../components/logo';

Expand All @@ -31,11 +29,9 @@ export default function SignUpPage() {
</AuthPageLayoutForm>

<AuthPageLayoutSecondaryButton>
<Button variant={'link'} asChild>
<Link className={'text-center'} href="/auth/sign-in">
<Text>Already have an Account? Sign In.</Text>
</Link>
</Button>
<ButtonLink variant="link" href="/auth/sign-in">
<Text className="text-center">Already have an Account? Sign In.</Text>

@coderabbitai coderabbitai Bot May 18, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Fix CTA capitalization for consistency.

Line 33 uses inconsistent title casing (Account, Sign In) compared with surrounding copy style.

Suggested copy tweak 
-          <Text className="text-center">Already have an Account? Sign In.</Text>
+          <Text className="text-center">Already have an account? Sign in.</Text>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Text className="text-center">Already have an Account? Sign In.</Text>
<Text className="text-center">Already have an account? Sign in.</Text>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/expo-app/app/`(app)/auth/sign-up.tsx at line 33, Update the CTA string
in the Text element inside the sign-up component so it matches the surrounding
sentence-case copy style; replace "Already have an Account? Sign In." with
"Already have an account? Sign in." in the JSX Text node (the line rendering the
CTA in apps/expo-app/app/(app)/auth/sign-up.tsx).

</ButtonLink>
</AuthPageLayoutSecondaryButton>
</AuthPageLayout>
);
Expand Down
1 change: 1 addition & 0 deletions apps/expo-app/babel.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ module.exports = function (api) {
'babel-preset-expo',
{
jsxImportSource: 'nativewind',
unstable_transformImportMeta: true,
},
],
],
Expand Down
20 changes: 18 additions & 2 deletions apps/expo-app/components/root-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React from 'react';

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Platform } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

import { Toaster } from '@kit/ui';
import { Toaster, useColorScheme } from '@kit/ui';

import { GlobalThemeProvider } from './theme-provider';

Expand All @@ -22,9 +23,24 @@ export function RootProvider({ children }: { children: React.ReactNode }) {
<GlobalThemeProvider>
{children}

<Toaster />
<ThemedToaster />
</GlobalThemeProvider>
</QueryClientProvider>
</GestureHandlerRootView>
);
}

function ThemedToaster() {
const { isDarkColorScheme } = useColorScheme();

return (
<Toaster
position="bottom-center"
offset={40}
swipeToDismissDirection="left"
duration={3500}
theme={isDarkColorScheme ? 'dark' : 'light'}
enableStacking={Platform.OS === 'ios'}
/>
);
}
4 changes: 2 additions & 2 deletions apps/expo-app/components/settings/settings-pages-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Link } from 'expo-router';
import { ChevronRight } from 'lucide-react-native';
import { FlatList, View } from 'react-native';

import { Text } from '@kit/ui';
import { Icon, Text } from '@kit/ui';

import { SignOutButton } from './sign-out-button';

Expand Down Expand Up @@ -46,7 +46,7 @@ export function SettingsPagesList() {
className={'h-full w-full flex-row items-center justify-between'}
>
<Text className={'text-lg'}>{item.title}</Text>
<ChevronRight className={'h-5'} />
<Icon as={ChevronRight} className="size-5 text-muted-foreground" />
</View>
</Link>
)}
Expand Down
10 changes: 6 additions & 4 deletions apps/expo-app/components/settings/theme-mode-toggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Moon, Sun } from 'lucide-react-native';
import { useColorScheme } from 'nativewind';
import { View } from 'react-native';

import { ToggleGroup, ToggleGroupItem } from '@kit/ui';
import { Icon, ToggleGroup, ToggleGroupItem } from '@kit/ui';

type Theme = 'light' | 'dark' | 'system';

Expand All @@ -15,18 +15,20 @@ export function ThemeModeToggle() {
<ToggleGroup
className="justify-start"
type="single"
variant="outline"
value={colorScheme}
onValueChange={async (value) => {
if (!value) return;
setColorScheme(value as Theme);
await AsyncStorage.setItem('theme', value as Theme);
await AsyncStorage.setItem('theme', value);
}}
Comment on lines 20 to 24

@coderabbitai coderabbitai Bot May 18, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Handle AsyncStorage failures in the toggle handler.

Line 23 can reject and currently has no local handling, which risks unhandled promise rejections and silent preference persistence failure.

Suggested fix 
         onValueChange={async (value) => {
           if (!value) return;
-          setColorScheme(value as Theme);
-          await AsyncStorage.setItem('theme', value);
+          setColorScheme(value as Theme);
+          try {
+            await AsyncStorage.setItem('theme', value);
+          } catch (error) {
+            console.error('Failed to persist theme preference', error);
+          }
         }}

As per coding guidelines, "Do not swallow errors; handle promises and async/await with proper error handling and non-sensitive context".

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
onValueChange={async (value) => {
if (!value) return;
setColorScheme(value as Theme);
await AsyncStorage.setItem('theme', value as Theme);
await AsyncStorage.setItem('theme', value);
}}
onValueChange={async (value) => {
if (!value) return;
setColorScheme(value as Theme);
try {
await AsyncStorage.setItem('theme', value);
} catch (error) {
console.error('Failed to persist theme preference', error);
}
}}
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/expo-app/components/settings/theme-mode-toggle.tsx` around lines 20 -
24, The onValueChange handler for the theme toggle currently awaits
AsyncStorage.setItem without catching rejections; wrap the await call in a
try/catch inside the onValueChange async function (the handler that calls
setColorScheme and AsyncStorage.setItem) to handle storage failures, log a
non-sensitive error via your logger or console.error, and consider reverting or
ensuring UI/state consistency if setting storage fails (e.g., keep
setColorScheme but surface the error); do not swallow the error silently and
include identifiable context like the theme value and that the failure occurred
in AsyncStorage.setItem.

>
<ToggleGroupItem value="light" aria-label="Light Mode">
<Sun className="h-4 w-4 text-secondary-foreground" />
<Icon as={Sun} className="size-6 text-foreground" />
</ToggleGroupItem>

<ToggleGroupItem value="dark" aria-label="Dark Mode">
<Moon className="h-4 w-4 text-secondary-foreground" />
<Icon as={Moon} className="size-6 text-foreground" />
</ToggleGroupItem>
</ToggleGroup>
</View>
Expand Down
Loading
Loading