Skip to content

Refactor mobile app with Neobrutalism UI using Expo and NativeWind #209

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

Open
Devasy wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Refactor mobile app with Neobrutalism UI using Expo and NativeWind #209

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
18440c1
Refactor mobile app with Neobrutalism UI using Expo and NativeWind
google-labs-jules[bot] Nov 28, 2025
1e01b04
Refactor mobile app with Neobrutalism UI using Expo and NativeWind
google-labs-jules[bot] Nov 28, 2025
665fcca
feat: Update app configuration and add EAS build settings
Devasy Nov 28, 2025
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
37 changes: 4 additions & 33 deletions mobile/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,8 @@
# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files

# dependencies
node_modules/

# Expo
.expo/
dist/
web-build/
expo-env.d.ts

# Native
.kotlin/
*.orig.*
*.jks
*.p8
*.p12
*.key
*.mobileprovision

# Metro
.metro-health-check*

# debug
npm-debug.*
yarn-debug.*
yarn-error.*

# macOS
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# MacOS
.DS_Store
*.pem

# local env files
.env*.local

# typescript
*.tsbuildinfo
14 changes: 0 additions & 14 deletions mobile/App.js
View file
Open in desktop

This file was deleted.

15 changes: 0 additions & 15 deletions mobile/api/auth.js
View file
Open in desktop

This file was deleted.

117 changes: 0 additions & 117 deletions mobile/api/client.js
View file
Open in desktop

This file was deleted.

47 changes: 0 additions & 47 deletions mobile/api/groups.js
View file
Open in desktop

This file was deleted.

26 changes: 24 additions & 2 deletions mobile/app.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,12 @@
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"assetBundlePatterns": [
"**/*"
],
Comment on lines +16 to +18
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 28, 2025

Choose a reason for hiding this comment

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

🧹 Nitpick | 🔵 Trivial

Overly broad asset bundle pattern may include unnecessary files.

The pattern "**/*" includes all files under the app directory in the asset bundle. This may inadvertently include build artifacts, cache files, or other non-asset files. Consider restricting the pattern to only necessary asset directories or file types, e.g., ["assets/**/*", "**/*.ttf"] (if using fonts and other specific assets).

🤖 Prompt for AI Agents 
In mobile/app.json around lines 16 to 18, the assetBundlePatterns value is too
broad ("**/*") and may include build artifacts or caches; replace it with a
restricted pattern that only bundles real assets (for example restrict to asset
directories and specific extensions like "assets/**/*" and vectors/fonts such as
"**/*.ttf" or "**/*.png"), updating the array to list only the necessary folders
and file types so non-asset files are excluded from the bundle.

"ios": {
"supportsTablet": true,
"bundleIdentifier": "com.splitwiser.mobile",
"infoPlist": {
"NSPhotoLibraryUsageDescription": "Allow Splitwiser to select a group icon from your photo library."
}
Expand All @@ -25,11 +29,29 @@
"backgroundColor": "#ffffff"
},
"edgeToEdgeEnabled": true,
"permissions": ["READ_MEDIA_IMAGES"]
"permissions": ["READ_MEDIA_IMAGES"],
"package": "com.splitwiser.mobile"
},
"web": {
"favicon": "./assets/favicon.png"
"favicon": "./assets/favicon.png",
"bundler": "metro"
},
"plugins": [
"expo-router",
"expo-font",
[
"expo-build-properties",
{
"android": {
"newArchEnabled": true
},
"ios": {
"newArchEnabled": true
}
Comment on lines +45 to +50
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 28, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# First, locate and examine the package.json file
find . -name "package.json" -type f | head -20

Repository: Devasy23/splitwiser

Length of output: 103

🏁 Script executed:

#!/bin/bash
# Check the structure to understand where mobile/package.json is
ls -la mobile/ 2>/dev/null | head -20

Repository: Devasy23/splitwiser

Length of output: 1069

🌐 Web query:

react-native-reanimated 4.1.1 new architecture support compatibility

💡 Result:

Short answer: Reanimated 4.1.1 requires the React Native New Architecture (Fabric) — it does not support the legacy (old/Paper) architecture. It is compatible with recent React Native releases (supported 0.78–0.82 in the official compatibility matrix) and expects react-native-worklets 0.5.x or 0.6.x as a peer dependency. If you need to stay on the old architecture, use Reanimated 3.x. [1][2]

Sources:

  • Reanimated compatibility matrix (4.1.x entries: New Architecture only; RN versions and worklets table). [1]
  • Reanimated migration notes (4.x = New Architecture only; added react-native-worklets dependency). [2]

🌐 Web query:

nativewind 4.1.23 React Native new architecture support

💡 Result:

Short answer: NativeWind 4.1.23 (released Nov 4, 2024) is a v4 release and does not ship full, explicit support for React Native's New Architecture (Fabric/TurboModules). NativeWind v5 is the release that documents explicit New Architecture / RN 0.81+ requirements and new styling features that rely on the New Architecture — upgrade to v5 if you need full New-Architecture support. [1][2][3][4]

Sources

  • nativewind 4.1.23 release metadata / changelog. [1]
  • package release list / date for 4.1.23. [2]
  • NativeWind v5 migration/requirements note (calls out RN 0.81+ and New Architecture support). [3]
  • Recent GitHub issues where v4.x (4.1.23) users report runtime/build issues (examples showing v4 can have problems in some RN/Expo setups). [4]

🌐 Web query:

react-native-svg 15.12.1 new architecture support

💡 Result:

Short answer: Yes. react-native-svg added Fabric / New Architecture support back in the v13 major release, and v15.12.1 (released Jul 31, 2025) is compatible with newer React Native releases (adds RN 0.81.0 support and related fixes). [1][2]

Sources:

  • react-native-svg GitHub release v15.12.1 (notes: adds RN 0.81.0 support). [1]
  • react-native-svg v13 release notes (introduced Fabric / New Architecture support). [2]

🌐 Web query:

lucide-react-native 0.475.0 React Native new architecture

💡 Result:

Short answer

  • lucide-react-native v0.475.0 is a React Native package (published on npm). [1][2]
  • It renders icons using react-native-svg, so compatibility with React Native’s New Architecture (Fabric/JSI/TurboModules) depends on the react-native-svg native bindings and your RN version — not on lucide’s JS icon components themselves. [2][3]

What to check / do

  1. Ensure your app’s react-native-svg is a version that supports Fabric (react-native-svg added Fabric support in the v13+ line and continued updates). Use a react-native-svg release compatible with your React Native version. [3]
  2. Use an RN version that supports the New Architecture (RN >= 0.75 / 0.76+ guidance) or follow RN docs to opt-in/out. If you enable the New Architecture, test native builds on iOS and Android — some native modules require updates or special config. [4]
  3. If you hit build/runtime errors, check react-native-svg GitHub issues (there are historical/new-arch build reports) and consider disabling the New Architecture temporarily while you resolve native-dep compatibility. [5][6]

References

  • lucide-react-native @0.475.0 (npm). [1]
  • lucide-react-native docs (uses react-native-svg). [2]
  • react-native-svg release notes (Fabric/new-arch support added in v13+). [3]
  • React Native “New Architecture is here” / docs (Fabric, JSI, TurboModules). [4]
  • react-native-svg GitHub issues discussing New Architecture build problems. [5]
  • Example community report about New Architecture incompatibilities and opt-out steps. [6]

If you want, I can: (a) check which react-native-svg version you have and recommend an exact upgrade, or (b) list commands to enable/disable the New Architecture for iOS/Android and run a quick compatibility checklist.

🏁 Script executed:

#!/bin/bash
# Read the mobile/package.json to see actual dependency versions
cat -n ./mobile/package.json

Repository: Devasy23/splitwiser

Length of output: 1716

Upgrade nativewind to v5 for full React Native new architecture support.

The concern about newArchEnabled: true is partially valid but incorrectly framed. Here's what the verification found:

  • nativewind 4.1.23: Does not have explicit new architecture support; v5 is required for proper Fabric/TurboModules compatibility. This is a real incompatibility that may cause build or runtime failures.
  • react-native-reanimated 4.1.1: Actually requires the new architecture (v4.x does not support the old Paper architecture), so this is not a concern but a requirement—and your setup correctly includes it.
  • react-native-svg 15.12.1: Supports new architecture (Fabric support added in v13+).
  • lucide-react-native 0.475.0: Compatible via react-native-svg.

Action: Upgrade nativewind from 4.1.23 to 5.x to ensure full new architecture compatibility with your React Native 0.81.5 setup.

🤖 Prompt for AI Agents 
In mobile/app.json around lines 38 to 43, the project enables the RN new
architecture but uses nativewind 4.1.23 which lacks full Fabric/TurboModules
support; update the nativewind dependency to a v5.x release (e.g., "^5.0.0") in
mobile/package.json, run your package manager install, run pod install for iOS
and rebuild both Android and iOS, and apply any required nativewind v5 migration
steps from the v5 changelog (config changes) to ensure compatibility with React
Native 0.81.5 and the new architecture.

}
]
],
"scheme": "splitwiser",
"extra": {
"eas": {
"projectId": "afe97159-52c4-425a-9ce3-c56d4f2cb568"
Expand Down
40 changes: 40 additions & 0 deletions mobile/app/_layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
import { useFonts } from 'expo-font';
import { Stack } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
import { useEffect } from 'react';
import { Inter_400Regular, Inter_700Bold } from '@expo-google-fonts/inter';
import { SpaceGrotesk_400Regular, SpaceGrotesk_700Bold } from '@expo-google-fonts/space-grotesk';
import "../global.css";
import { StatusBar } from 'expo-status-bar';

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
const [loaded] = useFonts({
Inter_400Regular,
Inter_700Bold,
SpaceGrotesk_400Regular,
SpaceGrotesk_700Bold,
});

useEffect(() => {
if (loaded) {
SplashScreen.hideAsync();
}
}, [loaded]);
Comment on lines +22 to +26
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 28, 2025

Choose a reason for hiding this comment

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

🧹 Nitpick | 🔵 Trivial

Add error handling for font loading failures.

The useEffect hides the splash screen when fonts are loaded, but doesn't handle loading errors. If font loading fails, users may be stuck on the splash screen indefinitely.

Consider handling the error state from useFonts:

- const [loaded] = useFonts({
+ const [loaded, error] = useFonts({
    Inter_400Regular,
    Inter_700Bold,
    SpaceGrotesk_400Regular,
    SpaceGrotesk_700Bold,
  });

  useEffect(() => {
-   if (loaded) {
+   if (loaded || error) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);
+
+ if (error) {
+   console.error('Font loading error:', error);
+ }

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In mobile/app/_layout.tsx around lines 22 to 26, the effect currently hides the
splash screen only when fonts load successfully; it lacks handling for font
loading errors which can leave users stuck on the splash screen. Update the
component to read the error returned by useFonts, and in the effect hide the
splash screen both when loaded is true or when an error occurs; also surface a
fallback UI or return early to avoid rendering the app with missing fonts, and
log or report the error for diagnostics. Ensure the effect cleans up correctly
and you don’t call hideAsync more than necessary.


if (!loaded) {
return null;
}

return (
<ThemeProvider value={DefaultTheme}>
<Stack>
<Stack.Screen name="index" options={{ headerShown: false }} />
</Stack>
<StatusBar style="dark" />
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 28, 2025

Choose a reason for hiding this comment

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

🧹 Nitpick | 🔵 Trivial

StatusBar positioning may be incorrect.

The StatusBar is rendered as a sibling to the Stack component inside ThemeProvider. Typically, StatusBar should be:

  • Outside all navigation containers (as a top-level component), or
  • Inside the first screen component

The current positioning might cause the StatusBar to remount unnecessarily during navigation transitions.

Consider moving it outside the ThemeProvider:

  return (
    <ThemeProvider value={DefaultTheme}>
+     <StatusBar style="dark" />
      <Stack>
        <Stack.Screen name="index" options={{ headerShown: false }} />
      </Stack>
-     <StatusBar style="dark" />
    </ThemeProvider>
  );

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In mobile/app/_layout.tsx around line 37, the StatusBar is rendered as a sibling
to the Stack inside ThemeProvider which can cause unnecessary remounts during
navigation; move the <StatusBar> out of the ThemeProvider to a top-level
position (above ThemeProvider and navigation containers) so it remains stable
across screen transitions, or alternatively place it inside the app's first
screen component if you require screen-specific bar settings; update imports if
needed and ensure only one global StatusBar instance exists.

</ThemeProvider>
);
}
Loading
Loading