Modernize mobile UI: Expo 54, Themes, and Custom Components

mobile/App.js

@@ -1,14 +1,47 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import AppNavigator from './navigation/AppNavigator';
-import { PaperProvider } from 'react-native-paper';
+import { PaperProvider, MD3LightTheme, MD3DarkTheme } from 'react-native-paper';
 import { AuthProvider } from './context/AuthContext';
+import { ThemeProvider, useTheme } from './context/ThemeContext';
+import { useFonts, Inter_400Regular, Inter_700Bold } from '@expo-google-fonts/inter';
+import { SpaceGrotesk_400Regular, SpaceGrotesk_700Bold } from '@expo-google-fonts/space-grotesk';
+import { COLORS } from './constants/theme';
+import { View, ActivityIndicator } from 'react-native';
+
+const AppContent = () => {
+    const { mode } = useTheme();
+    const [fontsLoaded] = useFonts({
+        Inter_400Regular,
+        Inter_700Bold,
+        SpaceGrotesk_400Regular,
+        SpaceGrotesk_700Bold,
+    });
+
+    const paperTheme = mode === 'dark'
+        ? { ...MD3DarkTheme, colors: { ...MD3DarkTheme.colors, primary: COLORS.neo.main, secondary: COLORS.neo.second } }
+        : { ...MD3LightTheme, colors: { ...MD3LightTheme.colors, primary: COLORS.neo.main, secondary: COLORS.neo.second } };
+
+    if (!fontsLoaded) {
+        return (
+            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+                <ActivityIndicator size="large" color={COLORS.neo.main} />
+            </View>
+        );
+    }
+
+    return (
+        <PaperProvider theme={paperTheme}>
+            <AppNavigator />
+        </PaperProvider>
+    );
+};
 
 export default function App() {
   return (
-    <AuthProvider>
-      <PaperProvider>
-        <AppNavigator />
-      </PaperProvider>
-    </AuthProvider>
+    <ThemeProvider>
+      <AuthProvider>
+          <AppContent />
+      </AuthProvider>
+    </ThemeProvider>
   );
 }

mobile/app.json

@@ -2,7 +2,11 @@
   "expo": {
     "name": "frontend",
     "slug": "frontend",
-    "platforms": ["ios", "android", "web"],
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ],
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -25,7 +29,9 @@
         "backgroundColor": "#ffffff"
       },
       "edgeToEdgeEnabled": true,
-      "permissions": ["READ_MEDIA_IMAGES"]
+      "permissions": [
+        "READ_MEDIA_IMAGES"
+      ]
     },
     "web": {
       "favicon": "./assets/favicon.png"
@@ -35,6 +41,9 @@
         "projectId": "afe97159-52c4-425a-9ce3-c56d4f2cb568"
       }
     },
-    "owner": "devasy23"
+    "owner": "devasy23",
+    "plugins": [
+      "expo-font"
+    ]
   }
 }

mobile/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: ['react-native-reanimated/plugin'],
+  };
+};

mobile/components/ThemeWrapper.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { View, StyleSheet, StatusBar } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { THEMES, COLORS } from '../constants/theme';
+import { useTheme } from '../context/ThemeContext';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export const ThemeWrapper = ({ children }) => {
+  const { style, mode } = useTheme();
+
+  let BackgroundComponent;
+  let statusBarColor;
+
+  if (style === THEMES.NEOBRUTALISM) {
+    const bgColor = mode === 'dark' ? COLORS.neo.dark : COLORS.neo.lightBg;
+    BackgroundComponent = <View style={[styles.container, { backgroundColor: bgColor }]}>{children}</View>;
+    statusBarColor = mode === 'dark' ? 'light-content' : 'dark-content';
+  } else {
+    // Glassmorphism
+    const colors = mode === 'dark' ? COLORS.glass.dark : COLORS.glass.light;
+    BackgroundComponent = (
+      <LinearGradient colors={colors} style={styles.container} start={{ x: 1, y: 0 }} end={{ x: 0, y: 1 }}>
+        {children}
+      </LinearGradient>
+    );
+    statusBarColor = mode === 'dark' ? 'light-content' : 'dark-content';
+  }
+
+  return (
+    <>
+        <StatusBar barStyle={statusBarColor} />
+        <SafeAreaView style={{flex: 1}} edges={['top', 'left', 'right']}>
+            {BackgroundComponent}
+        </SafeAreaView>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

mobile/components/ui/ThemedButton.js

@@ -0,0 +1,127 @@
+import React from 'react';
+import { Pressable, StyleSheet, ActivityIndicator } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { useTheme } from '../../context/ThemeContext';
+import { THEMES, COLORS } from '../../constants/theme';
+import { ThemedText } from './ThemedText';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export const ThemedButton = ({ onPress, children, variant = 'primary', style, loading = false, disabled = false }) => {
+  const { style: themeStyle, mode } = useTheme();
+  const scale = useSharedValue(1);
+  const pressed = useSharedValue(false);
+
+  // Press animation handlers
+  const onPressIn = () => {
+    scale.value = withSpring(0.95);
+    pressed.value = true;
+  };
+
+  const onPressOut = () => {
+    scale.value = withSpring(1);
+    pressed.value = false;
+  };
+
+  // Styles based on theme
+  const animatedStyle = useAnimatedStyle(() => {
+    const isNeo = themeStyle === THEMES.NEOBRUTALISM;
+
+    // Base transform
+    let transform = [{ scale: scale.value }];
+
+    if (isNeo && pressed.value) {
+        // Neo press effect: move down-right to simulate button press into shadow
+        transform.push({ translateX: 2 }, { translateY: 2 });
+    }
+
+    return {
+        transform
+    };
+  });
+
+  // Color Logic
+  let backgroundColor = COLORS.neo.main;
+  let textColor = 'white';
+  let borderColor = COLORS.neo.dark;
+
+  if (variant === 'secondary') {
+      backgroundColor = COLORS.neo.second;
+      textColor = COLORS.neo.dark;
+  } else if (variant === 'outline') {
+      backgroundColor = 'transparent';
+      textColor = mode === 'dark' ? 'white' : COLORS.neo.dark;
+  }
+
+  // Container Styles
+  const containerStyle = [
+      styles.base,
+      themeStyle === THEMES.NEOBRUTALISM ? {
+          borderRadius: 0,
+          borderWidth: 2,
+          borderColor: borderColor,
+          backgroundColor: backgroundColor,
+          shadowColor: borderColor,
+          shadowOffset: { width: 4, height: 4 },
+          shadowOpacity: 1,
+          shadowRadius: 0,
+          elevation: 0, // customized shadow manually
+      } : {
+          // Glass / Soft
+          borderRadius: 16,
+          backgroundColor: backgroundColor,
+          shadowColor: "#000",
+          shadowOffset: { width: 0, height: 4 },
+          shadowOpacity: 0.2,
+          shadowRadius: 4,
+          elevation: 4,
+          borderWidth: 0,
+      },
+      variant === 'outline' && themeStyle !== THEMES.NEOBRUTALISM && {
+          borderWidth: 1,
+          borderColor: mode === 'dark' ? 'white' : '#ddd',
+          backgroundColor: 'transparent',
+          elevation: 0,
+      },
+      (disabled || loading) && { opacity: 0.6 },
+      style
+  ];
+
+  // Neo "pressed" state removes shadow
+  const neoPressStyle = useAnimatedStyle(() => {
+      if (themeStyle !== THEMES.NEOBRUTALISM) return {};
+      return {
+          shadowOffset: {
+              width: pressed.value ? 0 : 4,
+              height: pressed.value ? 0 : 4
+          },
+      };
+  });
+
+  return (
+    <AnimatedPressable
+      onPress={disabled || loading ? null : onPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      style={[containerStyle, animatedStyle, neoPressStyle]}
+    >
+      {loading ? (
+          <ActivityIndicator color={textColor} />
+      ) : (
+          <ThemedText variant="title" style={{ color: textColor, fontSize: 16 }}>
+            {children}
+          </ThemedText>
+      )}
+    </AnimatedPressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  base: {
+    paddingVertical: 14,
+    paddingHorizontal: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: 8,
+  },
+});

mobile/components/ui/ThemedInput.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { TextInput, View, StyleSheet } from 'react-native';
+import { useTheme } from '../../context/ThemeContext';
+import { THEMES, COLORS } from '../../constants/theme';
+import { ThemedText } from './ThemedText';
+
+export const ThemedInput = ({ label, value, onChangeText, secureTextEntry, style, ...props }) => {
+  const { style: themeStyle, mode } = useTheme();
+
+  const isNeo = themeStyle === THEMES.NEOBRUTALISM;
+  const isDark = mode === 'dark';
+
+  const containerStyle = [
+      styles.container,
+      isNeo ? {
+          backgroundColor: isDark ? COLORS.neo.dark : COLORS.neo.white,
+          borderWidth: 2,
+          borderColor: isDark ? COLORS.neo.white : COLORS.neo.dark,
+          borderRadius: 0,
+          shadowColor: isDark ? COLORS.neo.white : COLORS.neo.dark,
+          shadowOffset: { width: 4, height: 4 },
+          shadowOpacity: 1,
+          shadowRadius: 0,
+      } : {
+          backgroundColor: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(255,255,255,0.8)',
+          borderRadius: 12,
+          borderWidth: 1,
+          borderColor: isDark ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.1)',
+      },
+      style
+  ];
+
+  const inputStyle = {
+      fontFamily: 'Inter_400Regular',
+      fontSize: 16,
+      color: isDark ? 'white' : 'black',
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+  };
+
+  const placeholderColor = isDark ? '#aaa' : '#666';
+
+  return (
+    <View style={{ marginBottom: 16 }}>
+        {label && <ThemedText variant="caption" style={{ marginBottom: 6, fontWeight: 'bold' }}>{label}</ThemedText>}
+        <View style={containerStyle}>
+            <TextInput
+                value={value}
+                onChangeText={onChangeText}
+                secureTextEntry={secureTextEntry}
+                placeholderTextColor={placeholderColor}
+                style={inputStyle}
+                {...props}
+            />
+        </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+});

mobile/components/ui/ThemedText.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { useTheme } from '../../context/ThemeContext';
+import { THEMES, COLORS } from '../../constants/theme';
+
+export const ThemedText = ({ style, variant = 'body', children, color, ...props }) => {
+  const { style: themeStyle, mode } = useTheme();
+
+  // Font family based on variant
+  const fontFamily = variant.includes('headline') || variant === 'title'
+    ? 'SpaceGrotesk_700Bold'
+    : 'Inter_400Regular';
+
+  // Default color logic
+  let textColor = color;
+  if (!textColor) {
+    if (themeStyle === THEMES.NEOBRUTALISM) {
+        textColor = mode === 'dark' ? COLORS.neo.white : COLORS.neo.dark;
+    } else {
+        textColor = mode === 'dark' ? '#fff' : '#1f2937';
+    }
+  }
+
+  // Size logic
+  let fontSize = 16;
+  if (variant === 'headlineLarge') fontSize = 32;
+  if (variant === 'headlineMedium') fontSize = 24;
+  if (variant === 'title') fontSize = 20;
+  if (variant === 'caption') fontSize = 12;
+
+  return (
+    <Text style={[{ fontFamily, color: textColor, fontSize }, style]} {...props}>
+      {children}
+    </Text>
+  );
+};

mobile/constants/theme.js

@@ -0,0 +1,20 @@
+export const THEMES = {
+  NEOBRUTALISM: 'neobrutalism',
+  GLASSMORPHISM: 'glassmorphism',
+};
+
+export const COLORS = {
+  neo: {
+    main: '#8855ff', // Purple
+    second: '#ff9900', // Orange
+    accent: '#00cc88', // Green
+    bg: '#f0f0f0', // Light Gray
+    dark: '#1a1a1a', // Dark Gray/Black
+    white: '#ffffff',
+    lightBg: '#fffdf5',
+  },
+  glass: {
+    light: ['#c7d2fe', '#e9d5ff', '#ffffff'],
+    dark: ['#312e81', '#0f172a', '#000000'],
+  }
+};