Here is my current code:// App.js
import React from 'react';
import { Provider as PaperProvider, DefaultTheme } from 'react-native-paper';
import { AuthProvider } from './context/AuthContext';
import AppNavigator from './navigation/AppNavigator';

const theme = {
    ...DefaultTheme,
    colors: {
        ...DefaultTheme.colors,
        primary: '#4caf50', // Customize your primary color
        accent: '#8bc34a',  // Customize your accent color
    },
    // Customize other theme properties as needed
};

const App = () => {
    return (
        <AuthProvider>
            <PaperProvider theme={theme}>
                <AppNavigator />
            </PaperProvider>
        </AuthProvider>
    );
};

export default App;

// screens/RegistrationScreen.js
import React, { useState, useContext } from 'react';
import {
    StyleSheet,
    View,
    ScrollView,
    Alert,
    TouchableOpacity,
} from 'react-native';
import { 
    Text, 
    TextInput, 
    Button, 
    HelperText, 
    Menu, 
    Divider, 
    Chip, 
    ActivityIndicator, 
    useTheme 
} from 'react-native-paper';
import axios from 'axios';
import { AuthContext } from '../context/AuthContext';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

const RegistrationScreen = ({ navigation }) => {
    const { signIn } = useContext(AuthContext); // For auto-login after registration
    const { colors } = useTheme();

    const [username, setUsername] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [desiredPhysique, setDesiredPhysique] = useState('');
    const [fitnessGoals, setFitnessGoals] = useState([]);
    const [dietaryPreferences, setDietaryPreferences] = useState([]);
    const [dietaryRestrictions, setDietaryRestrictions] = useState([]);
    const [loading, setLoading] = useState(false);

    // Menus for Dropdowns
    const [physiqueMenuVisible, setPhysiqueMenuVisible] = useState(false);

    // Sample options for multi-select fields
    const fitnessGoalsOptions = [
        { id: 'strength', name: 'Strength' },
        { id: 'endurance', name: 'Endurance' },
        { id: 'flexibility', name: 'Flexibility' },
        { id: 'weight_loss', name: 'Weight Loss' },
        { id: 'muscle_gain', name: 'Muscle Gain' },
    ];

    const dietaryPreferencesOptions = [
        { id: 'vegetarian', name: 'Vegetarian' },
        { id: 'vegan', name: 'Vegan' },
        { id: 'keto', name: 'Keto' },
        { id: 'paleo', name: 'Paleo' },
        { id: 'mediterranean', name: 'Mediterranean' },
    ];

    const dietaryRestrictionsOptions = [
        { id: 'gluten_free', name: 'Gluten-Free' },
        { id: 'dairy_free', name: 'Dairy-Free' },
        { id: 'nut_allergy', name: 'Nut Allergy' },
        { id: 'lactose_intolerant', name: 'Lactose Intolerant' },
        { id: 'none', name: 'None' },
    ];

    // Validation States
    const [errors, setErrors] = useState({});

    const validate = () => {
        let valid = true;
        let newErrors = {};

        if (!username.trim()) {
            newErrors.username = 'Username is required';
            valid = false;
        }

        if (!email.trim()) {
            newErrors.email = 'Email is required';
            valid = false;
        } else if (!/\S+@\S+\.\S+/.test(email)) {
            newErrors.email = 'Email address is invalid';
            valid = false;
        }

        if (!password) {
            newErrors.password = 'Password is required';
            valid = false;
        } else if (password.length < 6) {
            newErrors.password = 'Password must be at least 6 characters';
            valid = false;
        }

        if (!desiredPhysique) {
            newErrors.desiredPhysique = 'Please select desired physique';
            valid = false;
        }

        setErrors(newErrors);
        return valid;
    };

    const handleRegistration = async () => {
        if (!validate()) {
            return;
        }

        setLoading(true);

        try {
            const response = await axios.post('http://10.0.0.203:5000/api/auth/register', {
                username,
                email,
                password,
                desiredPhysique,
                fitnessGoals,
                dietaryPreferences,
                dietaryRestrictions,
            });

            if (response.status === 201) {
                const { token } = response.data;
                Alert.alert('Success', 'Registration successful!', [
                    { text: 'OK', onPress: () => navigation.navigate('Login') },
                ]);
                signIn(token); // Automatically log in the user
            }
        } catch (error) {
            console.error('Registration Error:', error);
            if (error.response) {
                console.error('Error Response:', error.response.data);
                Alert.alert('Registration Failed', error.response.data.error || error.response.data.message);
            } else if (error.request) {
                console.error('No Response:', error.request);
                Alert.alert('Registration Failed', 'No response from server. Please try again.');
            } else {
                console.error('Error Setting Up Request:', error.message);
                Alert.alert('Registration Failed', error.message);
            }
        } finally {
            setLoading(false);
        }
    };

    // Functions to handle Chip selections
    const toggleFitnessGoal = (id) => {
        setFitnessGoals((prev) => {
            if (prev.includes(id)) {
                return prev.filter((goal) => goal !== id);
            } else {
                return [...prev, id];
            }
        });
    };

    const toggleDietaryPreference = (id) => {
        setDietaryPreferences((prev) => {
            if (prev.includes(id)) {
                return prev.filter((pref) => pref !== id);
            } else {
                return [...prev, id];
            }
        });
    };

    const toggleDietaryRestriction = (id) => {
        setDietaryRestrictions((prev) => {
            if (prev.includes(id)) {
                return prev.filter((rest) => rest !== id);
            } else {
                return [...prev, id];
            }
        });
    };

    return (
        <ScrollView contentContainerStyle={styles.container}>
            <Text style={styles.title}>Register</Text>

            {/* Username Input */}
            <TextInput
                label="Username"
                mode="outlined"
                value={username}
                onChangeText={setUsername}
                left={<TextInput.Icon name="account" />}
                error={!!errors.username}
                style={styles.input}
            />
            <HelperText type="error" visible={!!errors.username}>
                {errors.username}
            </HelperText>

            {/* Email Input */}
            <TextInput
                label="Email"
                mode="outlined"
                value={email}
                onChangeText={setEmail}
                keyboardType="email-address"
                autoCapitalize="none"
                left={<TextInput.Icon name="email" />}
                error={!!errors.email}
                style={styles.input}
            />
            <HelperText type="error" visible={!!errors.email}>
                {errors.email}
            </HelperText>

            {/* Password Input */}
            <TextInput
                label="Password"
                mode="outlined"
                value={password}
                onChangeText={setPassword}
                secureTextEntry
                left={<TextInput.Icon name="lock" />}
                error={!!errors.password}
                style={styles.input}
            />
            <HelperText type="error" visible={!!errors.password}>
                {errors.password}
            </HelperText>

            {/* Desired Physique Dropdown */}
            <Menu
                visible={physiqueMenuVisible}
                onDismiss={() => setPhysiqueMenuVisible(false)}
                anchor={
                    <TouchableOpacity onPress={() => setPhysiqueMenuVisible(true)} style={styles.menuAnchor}>
                        <View style={[styles.menuBox, errors.desiredPhysique && styles.errorBorder]}>
                            <Text style={desiredPhysique ? styles.selectedText : styles.placeholderText}>
                                {desiredPhysique ? desiredPhysique.charAt(0).toUpperCase() + desiredPhysique.slice(1) : 'Select Desired Physique'}
                            </Text>
                            <Icon name="chevron-down" size={24} color="#666" />
                        </View>
                    </TouchableOpacity>
                }
            >
                <Menu.Item onPress={() => { setDesiredPhysique('lean'); setPhysiqueMenuVisible(false); }} title="Lean" />
                <Menu.Item onPress={() => { setDesiredPhysique('muscular'); setPhysiqueMenuVisible(false); }} title="Muscular" />
                <Menu.Item onPress={() => { setDesiredPhysique('athletic'); setPhysiqueMenuVisible(false); }} title="Athletic" />
            </Menu>
            {errors.desiredPhysique && <HelperText type="error" visible={!!errors.desiredPhysique}>{errors.desiredPhysique}</HelperText>}

            {/* Fitness Goals Multi-select */}
            <Text style={styles.label}>Fitness Goals</Text>
            <View style={styles.chipContainer}>
                {fitnessGoalsOptions.map((goal) => (
                    <Chip
                        key={goal.id}
                        icon={fitnessGoals.includes(goal.id) ? 'check' : undefined}
                        onPress={() => toggleFitnessGoal(goal.id)}
                        selected={fitnessGoals.includes(goal.id)}
                        style={styles.chip}
                        selectedColor={colors.primary}
                    >
                        {goal.name}
                    </Chip>
                ))}
            </View>

            {/* Dietary Preferences Multi-select */}
            <Text style={styles.label}>Dietary Preferences</Text>
            <View style={styles.chipContainer}>
                {dietaryPreferencesOptions.map((pref) => (
                    <Chip
                        key={pref.id}
                        icon={dietaryPreferences.includes(pref.id) ? 'check' : undefined}
                        onPress={() => toggleDietaryPreference(pref.id)}
                        selected={dietaryPreferences.includes(pref.id)}
                        style={styles.chip}
                        selectedColor={colors.primary}
                    >
                        {pref.name}
                    </Chip>
                ))}
            </View>

            {/* Dietary Restrictions Multi-select */}
            <Text style={styles.label}>Dietary Restrictions</Text>
            <View style={styles.chipContainer}>
                {dietaryRestrictionsOptions.map((rest) => (
                    <Chip
                        key={rest.id}
                        icon={dietaryRestrictions.includes(rest.id) ? 'check' : undefined}
                        onPress={() => toggleDietaryRestriction(rest.id)}
                        selected={dietaryRestrictions.includes(rest.id)}
                        style={styles.chip}
                        selectedColor={colors.primary}
                    >
                        {rest.name}
                    </Chip>
                ))}
            </View>

            {/* Register Button */}
            <Button
                mode="contained"
                onPress={handleRegistration}
                loading={loading}
                disabled={loading}
                style={styles.button}
                contentStyle={styles.buttonContent}
                icon="account-plus"
            >
                Register
            </Button>

            {/* Login Redirect */}
            <View style={styles.loginRedirect}>
                <Text>Already have an account?</Text>
                <Button 
                    onPress={() => navigation.navigate('Login')} 
                    mode="text" 
                    compact 
                    color={colors.primary}
                >
                    Login
                </Button>
            </View>
        </ScrollView>
    );

};

const styles = StyleSheet.create({
    container: {
        padding: 20,
        backgroundColor: '#fff',
    },
    title: {
        fontSize: 28,
        fontWeight: 'bold',
        marginBottom: 20,
        alignSelf: 'center',
        color: '#333',
    },
    input: {
        marginBottom: 10,
    },
    label: {
        fontSize: 16,
        marginVertical: 10,
        color: '#555',
    },
    menuAnchor: {
        marginBottom: 10,
    },
    menuBox: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 12,
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 4,
    },
    errorBorder: {
        borderColor: '#B00020',
    },
    placeholderText: {
        color: '#999',
        fontSize: 16,
    },
    selectedText: {
        color: '#000',
        fontSize: 16,
    },
    chipContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        marginBottom: 10,
    },
    chip: {
        margin: 4,
    },
    button: {
        marginTop: 10,
        borderRadius: 25,
    },
    buttonContent: {
        height: 50,
    },
    loginRedirect: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 20,
    },
});

export default RegistrationScreen;

// navigation/MainNavigator.js
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from '../screens/HomeScreen';
import ExercisesScreen from '../screens/ExercisesScreen';
import ProgressScreen from '../screens/ProgressScreen';

const Stack = createStackNavigator();

const MainNavigator = () => (
    <Stack.Navigator initialRouteName="Home">
        <Stack.Screen
            name="Home"
            component={HomeScreen}
            options={{ headerTitle: 'Home' }}
        />
        <Stack.Screen
            name="Exercises"
            component={ExercisesScreen}
            options={{ headerTitle: 'Exercises' }}
        />
        {/* <Stack.Screen
            name="Body Analysis"
            component={BodyAnalysisScreen}
            options={{ headerTitle: 'Body Analysis' }}
        /> */}
        <Stack.Screen
            name="Progress"
            component={ProgressScreen}
            options={{ headerTitle: 'Progress' }}
        />
        {/* <Stack.Screen
            name="Notifications"
            component={NotificationSettingsScreen}
            options={{ headerTitle: 'Notifications' }}
        /> */}
    </Stack.Navigator>
);

export default MainNavigator;

// navigation/AuthNavigator.js
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import LoginScreen from '../screens/LoginScreen';
import RegistrationScreen from '../screens/RegistrationScreen';

const Stack = createStackNavigator();

const AuthNavigator = () => (
    <Stack.Navigator initialRouteName="Login">
        <Stack.Screen
            name="Login"
            component={LoginScreen}
            options={{ headerShown: false }}
        />
        <Stack.Screen
            name="Register"
            component={RegistrationScreen}
            options={{ headerTitle: 'Register' }}
        />
    </Stack.Navigator>
);

export default AuthNavigator;


// navigation/AppNavigator.js
import React, { useContext } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { AuthContext } from '../context/AuthContext'; // Correct import
import AuthNavigator from './AuthNavigator';
import MainNavigator from './MainNavigator';

const AppNavigator = () => {
    const { authToken } = useContext(AuthContext); // Destructure authToken

    return (
        <NavigationContainer>
            {authToken ? <MainNavigator /> : <AuthNavigator />}
        </NavigationContainer>
    );
};

export default AppNavigator;

// context/AuthContext.js
import React, { createContext, useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

export const AuthContext = createContext(); // Correctly created context

export const AuthProvider = ({ children }) => {
    const [authToken, setAuthToken] = useState(null);
    const [loading, setLoading] = useState(true);

    // Function to handle sign-in
    const signIn = async (token) => {
        setAuthToken(token);
        await AsyncStorage.setItem('authToken', token);
    };

    // Function to handle sign-out
    const signOut = async () => {
        setAuthToken(null);
        await AsyncStorage.removeItem('authToken');
    };

    // Function to load token from AsyncStorage on app startup
    const loadToken = async () => {
        try {
            const token = await AsyncStorage.getItem('authToken');
            if (token) setAuthToken(token);
        } catch (e) {
            console.log('Failed to load token');
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        loadToken();
    }, []);

    return (
        <AuthContext.Provider value={{ authToken, signIn, signOut }}>
            {!loading && children} {/* Render children only after loading */}
        </AuthContext.Provider>
    );
};

 ERROR  Error: Text strings must be rendered within a <Text> component.
 ERROR  Error: Text strings must be rendered within a <Text> component.

This error is located at:

This error is located at:
This error is located at:
    in AuthProvider (created by App)
    in AuthProvider (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent), js engine: hermes
 ERROR  Error: Text strings must be rendered within a <Text> component.

This error is located at:
    in AuthProvider (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent), js engine: hermes