@oxyhq/services 5.1.12 → 5.1.13

package/src/ui/components/OxyProvider.tsx

@@ -14,6 +14,7 @@ import { FontLoader, setupFonts } from './FontLoader';
 
 // Import bottom sheet components directly - no longer a peer dependency
 import { BottomSheetModal, BottomSheetBackdrop, BottomSheetBackdropProps, BottomSheetModalProvider, BottomSheetView } from './bottomSheet';
+import { BottomSheetScrollView } from '@gorhom/bottom-sheet';
 
 // Initialize fonts automatically
 setupFonts();
@@ -95,6 +96,10 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
     // Use the internal ref (which is passed as a prop from OxyProvider)
     const modalRef = useRef<BottomSheetModal>(null);
 
+    // Track content height for dynamic sizing
+    const [contentHeight, setContentHeight] = useState<number>(0);
+    const screenHeight = Dimensions.get('window').height;
+
     // Set up effect to sync the internal ref with our modal ref
     useEffect(() => {
         if (bottomSheetRef && modalRef.current) {
@@ -116,18 +121,18 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
 
             // Add a method to navigate between screens
             // @ts-ignore - Adding custom method
-            bottomSheetRef.current._navigateToScreen = (screenName: string) => {
+            bottomSheetRef.current._navigateToScreen = (screenName: string, props?: Record<string, any>) => {
                 // Access the navigation function exposed by OxyRouter
                 // Use internal mechanism to notify router about navigation
                 // We'll use a simple event-based approach
                 if (typeof document !== 'undefined') {
                     // For web - use a custom event
-                    const event = new CustomEvent('oxy:navigate', { detail: screenName });
+                    const event = new CustomEvent('oxy:navigate', { detail: { screen: screenName, props } });
                     document.dispatchEvent(event);
                 } else {
                     // For React Native - use the navigation prop directly if available
-                    console.log(`Requesting navigation to ${screenName}`);
-                    // We'll implement a simpler mechanism in OxyRouter
+                    // We'll implement a mechanism in OxyRouter to listen for this
+                    (global as any).oxyNavigateEvent = { screen: screenName, props };
                 }
             };
         }
@@ -300,22 +305,37 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
             const highestPoint = points[points.length - 1];
             setSnapPoints([highestPoint, highestPoint]);
         } else {
-            setSnapPoints(points);
+            // If we have content height, use it as a constraint
+            if (contentHeight > 0) {
+                // Calculate content height as percentage of screen (plus some padding)
+                const contentHeightPercent = Math.min(Math.ceil((contentHeight + 40) / screenHeight * 100), 90) + '%';
+                // Use content height for first snap point if it's taller than the default
+                const firstPoint = contentHeight / screenHeight > 0.6 ? contentHeightPercent : points[0];
+                setSnapPoints([firstPoint, points[1]]);
+            } else {
+                setSnapPoints(points);
+            }
         }
-    }, [keyboardVisible]);
-
-    // Method to programmatically navigate to a specific screen
-    const navigateToScreen = useCallback((screenName: string) => {
-        // If we have a router component with navigate method, use it
-        if (modalRef.current) {
-            // Store the navigate function on the modal ref so it can be accessed externally
-            // @ts-ignore - Adding custom property for external navigation
-            modalRef.current._navigateToScreen = (screen: string) => {
-                // This will be populated by the OxyRouter component when it renders
-                console.log(`Navigating to ${screen} programmatically`);
-            };
+    }, [keyboardVisible, contentHeight, screenHeight]);
+
+    // Handle content layout changes to measure height
+    const handleContentLayout = useCallback((event: any) => {
+        const layoutHeight = event.nativeEvent.layout.height;
+        setContentHeight(layoutHeight);
+
+        // Update snap points based on new content height
+        if (keyboardVisible) {
+            // If keyboard is visible, use the highest snap point
+            const highestPoint = snapPoints[snapPoints.length - 1];
+            setSnapPoints([highestPoint, highestPoint]);
+        } else {
+            if (layoutHeight > 0) {
+                const contentHeightPercent = Math.min(Math.ceil((layoutHeight + 40) / screenHeight * 100), 90) + '%';
+                const firstPoint = layoutHeight / screenHeight > 0.6 ? contentHeightPercent : snapPoints[0];
+                setSnapPoints([firstPoint, snapPoints[1]]);
+            }
         }
-    }, []);
+    }, [keyboardVisible, screenHeight, snapPoints]);
 
     // Close the bottom sheet with animation
     const handleClose = useCallback(() => {
@@ -367,6 +387,7 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
             snapPoints={snapPoints}
             enablePanDownToClose
             backdropComponent={renderBackdrop}
+            // Remove enableDynamicSizing as we're implementing our own solution
             handleComponent={() => (
                 <Animated.View
                     style={{
@@ -410,16 +431,13 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
                 console.log(`Animating from index ${fromIndex} to ${toIndex}`);
             }}
         >
-            <BottomSheetView
+            <BottomSheetScrollView
                 style={[
                     styles.contentContainer,
                     // Override padding if provided in customStyles
                     customStyles.contentPadding !== undefined && { padding: customStyles.contentPadding },
-                    // Add bottom padding when keyboard is visible to ensure content is not covered
-                    keyboardVisible && {
-                        paddingBottom: Math.max(keyboardHeight - insets.bottom, 0)
-                    },
                 ]}
+                onLayout={handleContentLayout}
             >
                 <Animated.View
                     style={[
@@ -443,23 +461,18 @@ const OxyBottomSheet: React.FC<OxyProviderProps> = ({
                         adjustSnapPoints={adjustSnapPoints}
                     />
                 </Animated.View>
-            </BottomSheetView>
+            </BottomSheetScrollView>
         </BottomSheetModal>
     );
 };
 
 const styles = StyleSheet.create({
     contentContainer: {
-        flex: 1,
-        padding: 16,
         width: '100%',
-        height: '100%',
         backgroundColor: 'transparent', // Make this transparent to let the bottom sheet background show through
     },
     animatedContent: {
-        flex: 1,
         width: '100%',
-        height: '100%',
     },
     indicator: {
         width: 40,

package/src/ui/components/OxySignInButton.tsx

@@ -44,6 +44,12 @@ export interface OxySignInButtonProps {
      * @default false
      */
     showWhenAuthenticated?: boolean;
+
+    /**
+     * Which screen to open in the bottom sheet
+     * @default 'SignIn'
+     */
+    screen?: string;
 }
 
 /**
@@ -79,6 +85,7 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
     text = 'Sign in with Oxy',
     disabled = false,
     showWhenAuthenticated = false,
+    screen = 'SignIn',
 }) => {
     // Get all needed values from context in a single call
     const { user, showBottomSheet } = useOxy();
@@ -93,10 +100,9 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
             return;
         }
 
-        // Default behavior: open the bottom sheet and navigate to SignIn
+        // Allow passing any screen name, including 'SignUp', 'AccountCenter', etc.
         if (showBottomSheet) {
-            // Show the bottom sheet and navigate to SignIn
-            showBottomSheet('SignIn');
+            showBottomSheet(screen);
         } else {
             console.warn('OxySignInButton: showBottomSheet is not available. Either provide an onPress prop or ensure this component is used within an OxyProvider.');
         }

package/src/ui/context/OxyContext.tsx

@@ -20,7 +20,7 @@ export interface OxyContextState {
     bottomSheetRef?: React.RefObject<any>;
 
     // Methods to directly control the bottom sheet
-    showBottomSheet?: (screen?: string) => void;
+    showBottomSheet?: (screenOrConfig?: string | { screen: string; props?: Record<string, any> }) => void;
     hideBottomSheet?: () => void;
 }
 
@@ -292,16 +292,24 @@ export const OxyContextProvider: React.FC<OxyContextProviderProps> = ({
     };
 
     // Methods to control the bottom sheet
-    const showBottomSheet = useCallback((screen?: string) => {
+    const showBottomSheet = useCallback((screenOrConfig?: string | { screen: string; props?: Record<string, any> }) => {
         if (bottomSheetRef?.current) {
             // Expand the bottom sheet
             bottomSheetRef.current.expand();
-
-            // If a screen is specified, navigate to it
-            if (screen && bottomSheetRef.current._navigateToScreen) {
-                setTimeout(() => {
-                    bottomSheetRef.current._navigateToScreen(screen);
-                }, 100); // Small delay to ensure the sheet is expanded first
+            if (typeof screenOrConfig === 'string') {
+                // If a screen is specified, navigate to it
+                if (screenOrConfig && bottomSheetRef.current._navigateToScreen) {
+                    setTimeout(() => {
+                        bottomSheetRef.current._navigateToScreen(screenOrConfig);
+                    }, 100);
+                }
+            } else if (screenOrConfig && typeof screenOrConfig === 'object' && screenOrConfig.screen) {
+                // If an object is passed, navigate and pass props
+                if (bottomSheetRef.current._navigateToScreen) {
+                    setTimeout(() => {
+                        bottomSheetRef.current._navigateToScreen(screenOrConfig.screen, screenOrConfig.props || {});
+                    }, 100);
+                }
             }
         }
     }, [bottomSheetRef]);

package/src/ui/navigation/OxyRouter.tsx

@@ -7,7 +7,13 @@ import SignInScreen from '../screens/SignInScreen';
 import SignUpScreen from '../screens/SignUpScreen';
 import AccountCenterScreen from '../screens/AccountCenterScreen';
 import AccountOverviewScreen from '../screens/AccountOverviewScreen';
-import AboutKarmaScreen from '../screens/AboutKarmaScreen';
+import KarmaCenterScreen from '../screens/karma/KarmaCenterScreen';
+import KarmaLeaderboardScreen from '../screens/karma/KarmaLeaderboardScreen';
+import KarmaRulesScreen from '../screens/karma/KarmaRulesScreen';
+import KarmaAboutScreen from '../screens/karma/KarmaAboutScreen';
+import KarmaRewardsScreen from '../screens/karma/KarmaRewardsScreen';
+import KarmaFAQScreen from '../screens/karma/KarmaFAQScreen';
+import ProfileScreen from '../screens/ProfileScreen';
 
 // Import types
 import { OxyRouterProps, RouteConfig } from './types';
@@ -16,11 +22,11 @@ import { OxyRouterProps, RouteConfig } from './types';
 const routes: Record<string, RouteConfig> = {
     SignIn: {
         component: SignInScreen,
-        snapPoints: ['60%', '80%'],
+        snapPoints: ['10%', '80%'],
     },
     SignUp: {
         component: SignUpScreen,
-        snapPoints: ['70%', '90%'],
+        snapPoints: ['10%', '90%'],
     },
     AccountCenter: {
         component: AccountCenterScreen,
@@ -30,8 +36,32 @@ const routes: Record<string, RouteConfig> = {
         component: AccountOverviewScreen,
         snapPoints: ['60%', '85%'],
     },
+    KarmaCenter: {
+        component: KarmaCenterScreen,
+        snapPoints: ['60%', '100%'],
+    },
+    KarmaLeaderboard: {
+        component: KarmaLeaderboardScreen,
+        snapPoints: ['60%', '100%'],
+    },
+    KarmaRules: {
+        component: KarmaRulesScreen,
+        snapPoints: ['60%', '90%'],
+    },
     AboutKarma: {
-        component: AboutKarmaScreen,
+        component: KarmaAboutScreen,
+        snapPoints: ['60%', '90%'],
+    },
+    KarmaRewards: {
+        component: KarmaRewardsScreen,
+        snapPoints: ['60%', '90%'],
+    },
+    KarmaFAQ: {
+        component: KarmaFAQScreen,
+        snapPoints: ['60%', '90%'],
+    },
+    Profile: {
+        component: ProfileScreen,
         snapPoints: ['60%', '90%'],
     },
 };
@@ -69,9 +99,16 @@ const OxyRouter: React.FC<OxyRouterProps> = ({
         // Set up event listener for navigation events
         const handleNavigationEvent = (event: any) => {
             if (event && event.detail) {
-                const screenName = event.detail;
-                console.log(`Navigation event received for screen: ${screenName}`);
-                navigate(screenName);
+                // Support both string and object detail
+                if (typeof event.detail === 'string') {
+                    const screenName = event.detail;
+                    console.log(`Navigation event received for screen: ${screenName}`);
+                    navigate(screenName);
+                } else if (typeof event.detail === 'object' && event.detail.screen) {
+                    const { screen, props } = event.detail;
+                    console.log(`Navigation event received for screen: ${screen} with props`, props);
+                    navigate(screen, props || {});
+                }
             }
         };
 

package/src/ui/screens/ProfileScreen.tsx

@@ -0,0 +1,155 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, ActivityIndicator, ScrollView } from 'react-native';
+import { BaseScreenProps } from '../navigation/types';
+import { useOxy } from '../context/OxyContext';
+import Avatar from '../components/Avatar';
+import { Ionicons } from '@expo/vector-icons';
+
+interface ProfileScreenProps extends BaseScreenProps {
+    userId: string;
+    username?: string;
+}
+
+const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme, goBack }) => {
+    const { oxyServices } = useOxy();
+    const [profile, setProfile] = useState<any>(null);
+    const [karmaTotal, setKarmaTotal] = useState<number | null>(null);
+    const [postsCount, setPostsCount] = useState<number | null>(null);
+    const [commentsCount, setCommentsCount] = useState<number | null>(null);
+    const [followersCount, setFollowersCount] = useState<number | null>(null);
+    const [followingCount, setFollowingCount] = useState<number | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const isDarkTheme = theme === 'dark';
+    const backgroundColor = isDarkTheme ? '#121212' : '#FFFFFF';
+    const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
+    const primaryColor = '#d169e5';
+
+    useEffect(() => {
+        setIsLoading(true);
+        setError(null);
+
+        // Load user profile and karma total
+        Promise.all([
+            oxyServices.getUserById(userId),
+            oxyServices.getUserKarmaTotal ? oxyServices.getUserKarmaTotal(userId) : Promise.resolve({ total: undefined })
+        ])
+            .then(([profileRes, karmaRes]) => {
+                setProfile(profileRes);
+                setKarmaTotal(typeof karmaRes.total === 'number' ? karmaRes.total : null);
+
+                // Mock data for other stats
+                // In a real app, these would come from API endpoints
+                setPostsCount(Math.floor(Math.random() * 50));
+                setCommentsCount(Math.floor(Math.random() * 100));
+                setFollowersCount(Math.floor(Math.random() * 200));
+                setFollowingCount(Math.floor(Math.random() * 100));
+            })
+            .catch((err: any) => setError(err.message || 'Failed to load profile'))
+            .finally(() => setIsLoading(false));
+    }, [userId]);
+
+    if (isLoading) {
+        return (
+            <View style={[styles.container, { backgroundColor, justifyContent: 'center' }]}>
+                <ActivityIndicator size="large" color={primaryColor} />
+            </View>
+        );
+    }
+
+    if (error) {
+        return (
+            <View style={[styles.container, { backgroundColor, justifyContent: 'center' }]}>
+                <Text style={{ color: '#D32F2F', textAlign: 'center' }}>{error}</Text>
+            </View>
+        );
+    }
+
+    return (
+        <View style={[styles.container, { backgroundColor }]}>
+            <ScrollView contentContainerStyle={styles.scrollContainer}>
+                {/* Banner Image */}
+                <View style={styles.bannerContainer}>
+                    <View style={styles.bannerImage} />
+                </View>
+                {/* Avatar overlapping banner */}
+                <View style={styles.avatarRow}>
+                    <View style={styles.avatarWrapper}>
+                        <Avatar imageUrl={profile?.avatarUrl} name={profile?.username || username} size={96} theme={theme} />
+                    </View>
+                    {/* Edit Profile/Follow Button placeholder */}
+                    <View style={styles.actionButtonWrapper}>
+                        <Text style={styles.actionButton}>Edit Profile</Text>
+                    </View>
+                </View>
+                {/* Profile Info */}
+                <View style={styles.header}>
+                    <Text style={[styles.displayName, { color: textColor }]}>{profile?.displayName || profile?.username || username || profile?.id}</Text>
+                    {profile?.username && (
+                        <Text style={[styles.subText, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>@{profile.username}</Text>
+                    )}
+                    {/* Bio placeholder */}
+                    <Text style={[styles.bio, { color: textColor }]}>{profile?.bio || 'This user has no bio yet.'}</Text>
+                    {/* Email and Join Date Row */}
+                    <View style={styles.infoRow}>
+                        {profile?.email && (
+                            <View style={styles.infoItem}>
+                                <Ionicons name="mail-outline" size={16} color={isDarkTheme ? '#BBBBBB' : '#888888'} style={{ marginRight: 4 }} />
+                                <Text style={[styles.infoText, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>{profile.email}</Text>
+                            </View>
+                        )}
+                        {profile?.createdAt && (
+                            <View style={styles.infoItem}>
+                                <Ionicons name="calendar-outline" size={16} color={isDarkTheme ? '#BBBBBB' : '#888888'} style={{ marginRight: 4 }} />
+                                <Text style={[styles.infoText, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>Joined {new Date(profile.createdAt).toLocaleDateString()}</Text>
+                            </View>
+                        )}
+                    </View>
+                    {/* Divider */}
+                    <View style={styles.divider} />
+                    {/* All Stats in one row */}
+                    <View style={styles.statsRow}>
+                        <View style={styles.statItem}>
+                            <Text style={[styles.karmaAmount, { color: primaryColor }]}>{karmaTotal !== null && karmaTotal !== undefined ? karmaTotal : '--'}</Text>
+                            <Text style={[styles.karmaLabel, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>Karma</Text>
+                        </View>
+                        <View style={styles.statItem}>
+                            <Text style={[styles.karmaAmount, { color: textColor }]}>{followersCount !== null ? followersCount : '--'}</Text>
+                            <Text style={[styles.karmaLabel, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>Followers</Text>
+                        </View>
+                        <View style={styles.statItem}>
+                            <Text style={[styles.karmaAmount, { color: textColor }]}>{followingCount !== null ? followingCount : '--'}</Text>
+                            <Text style={[styles.karmaLabel, { color: isDarkTheme ? '#BBBBBB' : '#888888' }]}>Following</Text>
+                        </View>
+                    </View>
+                </View>
+            </ScrollView>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: { flex: 1 },
+    scrollContainer: { alignItems: 'stretch', paddingBottom: 40 },
+    bannerContainer: { height: 160, backgroundColor: '#e1bee7', position: 'relative', overflow: 'hidden' },
+    bannerImage: { flex: 1, backgroundColor: '#d169e5' }, // Placeholder, replace with Image if available
+    avatarRow: { flexDirection: 'row', alignItems: 'flex-end', marginTop: -56, paddingHorizontal: 20, justifyContent: 'space-between', zIndex: 2 },
+    avatarWrapper: { borderWidth: 5, borderColor: '#fff', borderRadius: 64, overflow: 'hidden', backgroundColor: '#fff', },
+    actionButtonWrapper: { flex: 1, alignItems: 'flex-end', justifyContent: 'flex-end' },
+    actionButton: { backgroundColor: '#fff', color: '#d169e5', borderWidth: 1, borderColor: '#d169e5', borderRadius: 24, paddingVertical: 7, paddingHorizontal: 22, fontWeight: 'bold', fontSize: 16, marginBottom: 8, elevation: 2, shadowColor: '#d169e5', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.08, shadowRadius: 2 },
+    header: { alignItems: 'flex-start', paddingTop: 18, paddingBottom: 24, width: '100%', paddingHorizontal: 20 },
+    displayName: { fontSize: 24, fontWeight: 'bold', marginTop: 10, marginBottom: 2, letterSpacing: 0.1 },
+    subText: { fontSize: 16, marginBottom: 2, color: '#a0a0a0' },
+    bio: { fontSize: 16, marginTop: 10, marginBottom: 10, color: '#666', fontStyle: 'italic', lineHeight: 22 },
+    infoRow: { flexDirection: 'row', alignItems: 'center', marginBottom: 10, flexWrap: 'wrap' },
+    infoItem: { flexDirection: 'row', alignItems: 'center', marginRight: 28, marginBottom: 4, minWidth: 120 },
+    infoText: { fontSize: 15 },
+    divider: { height: 1, backgroundColor: '#e0e0e0', width: '100%', marginVertical: 14 },
+    statsRow: { width: '100%', flex: 1, flexDirection: 'row', alignItems: 'center', marginTop: 6, marginBottom: 2, justifyContent: 'space-between' },
+    statItem: { flex: 1, alignItems: 'center', minWidth: 50, marginBottom: 12 },
+    karmaLabel: { fontSize: 14, marginBottom: 2, textAlign: 'center', color: '#a0a0a0' },
+    karmaAmount: { fontSize: 24, fontWeight: 'bold', textAlign: 'center', letterSpacing: 0.2 },
+});
+
+export default ProfileScreen;

package/src/ui/screens/SignInScreen.tsx

@@ -15,6 +15,7 @@ import { BaseScreenProps } from '../navigation/types';
 import { useOxy } from '../context/OxyContext';
 import { fontFamilies, useThemeColors, createCommonStyles } from '../styles';
 import OxyLogo from '../components/OxyLogo';
+import { BottomSheetScrollView } from '@gorhom/bottom-sheet';
 
 const SignInScreen: React.FC<BaseScreenProps> = ({
     navigate,
@@ -77,92 +78,86 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
     };
 
     return (
-        <KeyboardAvoidingView
-            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-            style={[commonStyles.container]}
+        <BottomSheetScrollView
+            contentContainerStyle={commonStyles.scrollContainer}
+            keyboardShouldPersistTaps="handled"
         >
-            <ScrollView
-                contentContainerStyle={commonStyles.scrollContainer}
-                keyboardShouldPersistTaps="handled"
-            >
-                <OxyLogo
-                    style={{ marginBottom: 24 }}
-                    width={50}
-                    height={50}
-                />
-                <Text style={[
-                    styles.title,
-                    { color: colors.text }
-                ]}>Sign In</Text>
-
-                {errorMessage ? (
-                    <View style={commonStyles.errorContainer}>
-                        <Text style={commonStyles.errorText}>{errorMessage}</Text>
-                    </View>
-                ) : null}
-
-                <View style={styles.formContainer}>
-                    <View style={styles.inputContainer}>
-                        <Text style={[styles.label, { color: colors.text }]}>Username</Text>
-                        <TextInput
-                            style={commonStyles.input}
-                            placeholder="Enter your username"
-                            placeholderTextColor={colors.placeholder}
-                            value={username}
-                            onChangeText={setUsername}
-                            autoCapitalize="none"
-                            testID="username-input"
-                        />
-                    </View>
-
-                    <View style={styles.inputContainer}>
-                        <Text style={[styles.label, { color: colors.text }]}>Password</Text>
-                        <TextInput
-                            style={commonStyles.input}
-                            placeholder="Enter your password"
-                            placeholderTextColor={colors.placeholder}
-                            value={password}
-                            onChangeText={setPassword}
-                            secureTextEntry
-                            testID="password-input"
-                        />
-                    </View>
+            <OxyLogo
+                style={{ marginBottom: 24 }}
+                width={50}
+                height={50}
+            />
+            <Text style={[
+                styles.title,
+                { color: colors.text }
+            ]}>Sign In</Text>
+
+            {errorMessage ? (
+                <View style={commonStyles.errorContainer}>
+                    <Text style={commonStyles.errorText}>{errorMessage}</Text>
+                </View>
+            ) : null}
+
+            <View style={styles.formContainer}>
+                <View style={styles.inputContainer}>
+                    <Text style={[styles.label, { color: colors.text }]}>Username</Text>
+                    <TextInput
+                        style={commonStyles.input}
+                        placeholder="Enter your username"
+                        placeholderTextColor={colors.placeholder}
+                        value={username}
+                        onChangeText={setUsername}
+                        autoCapitalize="none"
+                        testID="username-input"
+                    />
+                </View>
 
-                    <TouchableOpacity
-                        style={[commonStyles.button, { opacity: isLoading ? 0.8 : 1 }]}
-                        onPress={handleLogin}
-                        disabled={isLoading}
-                        testID="login-button"
-                    >
-                        {isLoading ? (
-                            <ActivityIndicator color="#FFFFFF" size="small" />
-                        ) : (
-                            <Text style={commonStyles.buttonText}>Sign In</Text>
-                        )}
-                    </TouchableOpacity>
+                <View style={styles.inputContainer}>
+                    <Text style={[styles.label, { color: colors.text }]}>Password</Text>
+                    <TextInput
+                        style={commonStyles.input}
+                        placeholder="Enter your password"
+                        placeholderTextColor={colors.placeholder}
+                        value={password}
+                        onChangeText={setPassword}
+                        secureTextEntry
+                        testID="password-input"
+                    />
+                </View>
 
-                    <View style={styles.footerTextContainer}>
-                        <Text style={[styles.footerText, { color: colors.text }]}>
-                            Don't have an account?{' '}
-                        </Text>
-                        <TouchableOpacity onPress={() => navigate('SignUp')}>
-                            <Text style={[styles.linkText, { color: colors.primary }]}>Sign Up</Text>
-                        </TouchableOpacity>
-                    </View>
+                <TouchableOpacity
+                    style={[commonStyles.button, { opacity: isLoading ? 0.8 : 1 }]}
+                    onPress={handleLogin}
+                    disabled={isLoading}
+                    testID="login-button"
+                >
+                    {isLoading ? (
+                        <ActivityIndicator color="#FFFFFF" size="small" />
+                    ) : (
+                        <Text style={commonStyles.buttonText}>Sign In</Text>
+                    )}
+                </TouchableOpacity>
+
+                <View style={styles.footerTextContainer}>
+                    <Text style={[styles.footerText, { color: colors.text }]}>
+                        Don't have an account?{' '}
+                    </Text>
+                    <TouchableOpacity onPress={() => navigate('SignUp')}>
+                        <Text style={[styles.linkText, { color: colors.primary }]}>Sign Up</Text>
+                    </TouchableOpacity>
                 </View>
-            </ScrollView>
-        </KeyboardAvoidingView>
+            </View>
+        </BottomSheetScrollView>
     );
 };
 
 const styles = StyleSheet.create({
-    // Local screen-specific styles
     title: {
         fontFamily: Platform.OS === 'web'
             ? 'Phudu'  // Use CSS font name directly for web
             : 'Phudu-Bold',  // Use exact font name as registered with Font.loadAsync
         fontWeight: Platform.OS === 'web' ? 'bold' : undefined,  // Only apply fontWeight on web
-        fontSize: 44,
+        fontSize: 54,
         marginBottom: 24,
     },
     formContainer: {