Here is my code. Change the registration screen to make it look better. user materialUI, my project is an expo project.
// App.js
import React from 'react';
import { AuthProvider } from './context/AuthContext';
import AppNavigator from './navigation/AppNavigator';

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

export default App;

// screens/RegistrationScreen.js
import React, { useState, useContext } from 'react';
import {
    View,
    Text,
    TextInput,
    Button,
    StyleSheet,
    ScrollView,
    Alert,
} from 'react-native';
import axios from 'axios';
import { Picker } from '@react-native-picker/picker';
import MultiSelect from 'react-native-multiple-select';
import { AuthContext } from '../context/AuthContext';


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


    const { signIn } = useContext(AuthContext); // Optional: For auto-login after registration


    // 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' },
    ];


    const handleRegistration = async () => {
        // Basic validation
        if (!username || !email || !password || !desiredPhysique) {
            Alert.alert('Error', 'Please fill in all required fields.');
            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


                // Optional: Auto-login after registration
                // const loginResponse = await axios.post('http://your-backend-url/api/auth/login', {
                //     email,
                //     password,
                // });
                // const { token } = loginResponse.data;
                // signIn(token);
            }
        } catch (error) {
            // console.error(error);
            // if (error.response && error.response.data) {
            //     Alert.alert('Registration Failed', error.response.data.error || error.response.data.message);
            // } else {
            //     Alert.alert('Registration Failed', 'Something went wrong. Please try again.');
            // }
            console.error('Registration Error:', error);
            console.error('Backend URL:', '10.0.0.203:5000');
            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);
        }
    };


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


            <TextInput
                placeholder="Username"
                value={username}
                onChangeText={setUsername}
                style={styles.input}
                autoCapitalize="none"
            />


            <TextInput
                placeholder="Email"
                value={email}
                onChangeText={setEmail}
                style={styles.input}
                keyboardType="email-address"
                autoCapitalize="none"
            />


            <TextInput
                placeholder="Password"
                value={password}
                onChangeText={setPassword}
                style={styles.input}
                secureTextEntry
            />


            <Text style={styles.label}>Desired Physique</Text>
            <View style={styles.pickerContainer}>
                <Picker
                    selectedValue={desiredPhysique}
                    onValueChange={(itemValue) => setDesiredPhysique(itemValue)}
                >
                    <Picker.Item label="Lean" value="lean" />
                    <Picker.Item label="Muscular" value="muscular" />
                    <Picker.Item label="Athletic" value="athletic" />
                </Picker>
            </View>


            <Text style={styles.label}>Fitness Goals</Text>
            <MultiSelect
                items={fitnessGoalsOptions}
                uniqueKey="id"
                onSelectedItemsChange={setFitnessGoals}
                selectedItems={fitnessGoals}
                selectText="Select Fitness Goals"
                searchInputPlaceholderText="Search Goals..."
                tagRemoveIconColor="#CCC"
                tagBorderColor="#CCC"
                tagTextColor="#000"
                selectedItemTextColor="#CCC"
                selectedItemIconColor="#CCC"
                itemTextColor="#000"
                displayKey="name"
                searchInputStyle={{ color: '#CCC' }}
                submitButtonColor="#48d22b"
                submitButtonText="Submit"
                styleMainWrapper={styles.multiSelectWrapper}
                styleDropdownMenuSubsection={styles.multiSelectDropdown}
            />


            <Text style={styles.label}>Dietary Preferences</Text>
            <MultiSelect
                items={dietaryPreferencesOptions}
                uniqueKey="id"
                onSelectedItemsChange={setDietaryPreferences}
                selectedItems={dietaryPreferences}
                selectText="Select Dietary Preferences"
                searchInputPlaceholderText="Search Preferences..."
                tagRemoveIconColor="#CCC"
                tagBorderColor="#CCC"
                tagTextColor="#000"
                selectedItemTextColor="#CCC"
                selectedItemIconColor="#CCC"
                itemTextColor="#000"
                displayKey="name"
                searchInputStyle={{ color: '#CCC' }}
                submitButtonColor="#48d22b"
                submitButtonText="Submit"
                styleMainWrapper={styles.multiSelectWrapper}
                styleDropdownMenuSubsection={styles.multiSelectDropdown}
            />


            <Text style={styles.label}>Dietary Restrictions</Text>
            <MultiSelect
                items={dietaryRestrictionsOptions}
                uniqueKey="id"
                onSelectedItemsChange={setDietaryRestrictions}
                selectedItems={dietaryRestrictions}
                selectText="Select Dietary Restrictions"
                searchInputPlaceholderText="Search Restrictions..."
                tagRemoveIconColor="#CCC"
                tagBorderColor="#CCC"
                tagTextColor="#000"
                selectedItemTextColor="#CCC"
                selectedItemIconColor="#CCC"
                itemTextColor="#000"
                displayKey="name"
                searchInputStyle={{ color: '#CCC' }}
                submitButtonColor="#48d22b"
                submitButtonText="Submit"
                styleMainWrapper={styles.multiSelectWrapper}
                styleDropdownMenuSubsection={styles.multiSelectDropdown}
            />


            <Button
                title={loading ? 'Registering...' : 'Register'}
                onPress={handleRegistration}
                disabled={loading}
            />


            <View style={styles.loginRedirect}>
                <Text>Already have an account?</Text>
                <Button
                    title="Login"
                    onPress={() => navigation.navigate('Login')}
                />
            </View>
        </ScrollView>
    );
};


const styles = StyleSheet.create({
    container: {
        padding: 20,
        backgroundColor: '#fff',
        flexGrow: 1,
        justifyContent: 'center',
    },
    title: {
        fontSize: 28,
        fontWeight: 'bold',
        marginBottom: 20,
        alignSelf: 'center',
    },
    input: {
        height: 50,
        borderColor: '#ccc',
        borderWidth: 1,
        paddingHorizontal: 15,
        borderRadius: 5,
        marginBottom: 15,
    },
    label: {
        fontSize: 16,
        marginVertical: 10,
    },
    pickerContainer: {
        borderColor: '#ccc',
        borderWidth: 1,
        borderRadius: 5,
        marginBottom: 15,
    },
    multiSelectWrapper: {
        marginBottom: 15,
    },
    multiSelectDropdown: {
        borderRadius: 5,
    },
    loginRedirect: {
        marginTop: 20,
        alignItems: 'center',
    },
});


export default RegistrationScreen;


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

export const AuthContext = createContext();

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

    const signIn = async (token) => {
        setAuthToken(token);
        await AsyncStorage.setItem('authToken', token);
    };

    const signOut = async () => {
        setAuthToken(null);
        await AsyncStorage.removeItem('authToken');
    };

    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}
        </AuthContext.Provider>
    );
};
// navigation/AppNavigator.js
import React, { useContext } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { AuthContext } from '../context/AuthContext';
import AuthNavigator from '../navigation/AuthNavigator';
import MainNavigator from '../navigation/MainNavigator';

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

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

export default AppNavigator;

// 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/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;