How would i further refactor this code.
this is for an expo mobile app ensure dynamic.
// frontend/screens/Nutrition/NutritionScreen.js

import React, { useState } from 'react';
import {
  View,
  FlatList,
  TouchableOpacity,
  Modal,
  TextInput,
  Alert,
  SafeAreaView,
  Text,
  Platform,
  StatusBar,
} from 'react-native';
import { useTheme, Button } from 'react-native-paper';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import SearchBar from '../../Components/SearchBar';
import BarcodeButton from '../../Components/BarcodeButton';
import TotalCaloriesCard from '../../Components/TotalCaloriesCard';
import getStyles from './NutritionScreenStyles';

// FoodItem Component
const FoodItem = ({ item, isSelected, toggleSelect, styles }) => {
  const [isLongPressed, setIsLongPressed] = useState(false);

  return (
    <TouchableOpacity
      style={[
        styles.itemContainer,
        isSelected && styles.selectedItem,
        isLongPressed && styles.longPressedItem,
      ]}
      onPress={() => toggleSelect(item.id)}
      onLongPress={() => setIsLongPressed(true)}
      onPressOut={() => setIsLongPressed(false)}
      accessibilityLabel={`Select ${item.name}`}
      accessibilityRole="button"
    >
      <Icon name={item.icon} size={40} color={styles.iconColor} />
      <View style={styles.foodInfo}>
        <Text style={styles.foodName}>{item.name}</Text>
        <Text style={styles.nutrients}>
          Calories: {item.calories} kcal
        </Text>
        <Text style={styles.nutrients}>
          Protein: {item.protein}g | Carbs: {item.carbs}g | Fat: {item.fat}g
        </Text>
      </View>
      {isSelected && (
        <Icon name="check-circle" size={24} color={styles.iconColor} />
      )}
    </TouchableOpacity>
  );
};

const NutritionScreen = () => {
  const theme = useTheme();
  const styles = getStyles(theme); // Get styles based on the current theme

  // State to manage food items
  const [foodItems, setFoodItems] = useState([
    {
      id: '1',
      name: 'Apple',
      calories: 95,
      protein: 0.5,
      carbs: 25,
      fat: 0.3,
      icon: 'food-apple',
    },
    {
      id: '2',
      name: 'Banana',
      calories: 105,
      protein: 1.3,
      carbs: 27,
      fat: 0.4,
      icon: 'food-croissant',
    },
    {
      id: '3',
      name: 'Grilled Chicken Breast',
      calories: 165,
      protein: 31,
      carbs: 0,
      fat: 3.6,
      icon: 'food-steak',
    },
    // Add more initial food items as needed
  ]);

  // State for modal visibility and new food entry
  const [modalVisible, setModalVisible] = useState(false);
  const [newFood, setNewFood] = useState({
    name: '',
    calories: '',
    protein: '',
    carbs: '',
    fat: '',
    icon: 'food',
  });

  // State for selected items
  const [selectedIds, setSelectedIds] = useState([]);

  // State for search query
  const [searchQuery, setSearchQuery] = useState('');

  // Calculate total nutrients based on filtered items
  const filteredFoodItems = foodItems.filter((item) =>
    item.name.toLowerCase().includes(searchQuery.toLowerCase())
  );

  const totals = filteredFoodItems.reduce(
    (acc, item) => {
      acc.calories += parseFloat(item.calories) || 0;
      acc.protein += parseFloat(item.protein) || 0;
      acc.carbs += parseFloat(item.carbs) || 0;
      acc.fat += parseFloat(item.fat) || 0;
      return acc;
    },
    { calories: 0, protein: 0, carbs: 0, fat: 0 }
  );

  // Handler for barcode scan (Placeholder Function)
  const handleBarcodeScan = () => {
    Alert.alert('Barcode Scan', 'Barcode scanning is not implemented yet.');
  };

  // Handler to toggle selection of items
  const toggleSelect = (id) => {
    setSelectedIds((prevSelectedIds) =>
      prevSelectedIds.includes(id)
        ? prevSelectedIds.filter((selectedId) => selectedId !== id)
        : [...prevSelectedIds, id]
    );
  };

  // Handler to delete selected items
  const deleteSelectedItems = () => {
    Alert.alert(
      'Delete Items',
      'Are you sure you want to delete the selected items?',
      [
        { text: 'Cancel', style: 'cancel' },
        {
          text: 'Delete',
          style: 'destructive',
          onPress: () => {
            setFoodItems((prevItems) =>
              prevItems.filter((item) => !selectedIds.includes(item.id))
            );
            setSelectedIds([]);
          },
        },
      ]
    );
  };

  // Handler to add new food item
  const addNewFoodItem = () => {
    const { name, calories, protein, carbs, fat, icon } = newFood;
    if (!name || !calories || !protein || !carbs || !fat) {
      Alert.alert('Invalid Input', 'Please fill in all fields.');
      return;
    }

    const newItem = {
      id: (foodItems.length + 1).toString(),
      name,
      calories: parseFloat(calories),
      protein: parseFloat(protein),
      carbs: parseFloat(carbs),
      fat: parseFloat(fat),
      icon: icon || 'food',
    };

    setFoodItems((prevItems) => [...prevItems, newItem]);
    setNewFood({
      name: '',
      calories: '',
      protein: '',
      carbs: '',
      fat: '',
      icon: 'food',
    });
    setModalVisible(false);
  };

  // Render function for FlatList items
  const renderItem = ({ item }) => (
    <FoodItem
      item={item}
      isSelected={selectedIds.includes(item.id)}
      toggleSelect={toggleSelect}
      styles={styles}
    />
  );

  return (
    <SafeAreaView style={styles.safeArea}>
      <View style={styles.container}>
        {/* Header Section */}
        <View style={styles.headerContainer}>
          {/* Search Bar */}
          <SearchBar searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
          {/* Barcode Button */}
          <BarcodeButton onPress={handleBarcodeScan} />
        </View>

        {/* Total Nutrients Summary */}
        <TotalCaloriesCard totals={totals} />

        {/* Food Items List */}
        <FlatList
          data={filteredFoodItems}
          keyExtractor={(item) => item.id}
          renderItem={renderItem}
          contentContainerStyle={styles.list}
          ItemSeparatorComponent={() => <View style={{ height: 10 }} />}
        />

        {/* Add Food Button */}
        <TouchableOpacity
          style={styles.addButton}
          onPress={() => setModalVisible(true)}
          accessibilityLabel="Add a new food item"
          accessibilityRole="button"
        >
          <Icon name="plus" size={24} color={styles.addButtonText.color} />
          <Text style={styles.addButtonText}> Add Food</Text>
        </TouchableOpacity>

        {/* Floating Delete Button for Selected Items */}
        {selectedIds.length > 0 && (
          <TouchableOpacity
            style={styles.floatingDeleteButton}
            onPress={deleteSelectedItems}
            accessibilityLabel="Delete selected food items"
            accessibilityRole="button"
          >
            <Icon name="delete" size={20} color={styles.floatingDeleteButtonText.color} />
            <Text style={styles.floatingDeleteButtonText}> Delete Selected</Text>
          </TouchableOpacity>
        )}

        {/* Add Food Modal */}
        <Modal
          visible={modalVisible}
          animationType="slide"
          transparent={true}
          onRequestClose={() => setModalVisible(false)}
        >
          <View style={styles.modalOverlay}>
            <View style={styles.modalContainer}>
              <Text style={styles.modalTitle}>Add New Food</Text>
              <TextInput
                style={styles.input}
                placeholder="Food Name"
                placeholderTextColor={theme.colors.placeholder}
                value={newFood.name}
                onChangeText={(text) => setNewFood({ ...newFood, name: text })}
              />
              <TextInput
                style={styles.input}
                placeholder="Calories"
                placeholderTextColor={theme.colors.placeholder}
                keyboardType="numeric"
                value={newFood.calories}
                onChangeText={(text) => setNewFood({ ...newFood, calories: text })}
              />
              <TextInput
                style={styles.input}
                placeholder="Protein (g)"
                placeholderTextColor={theme.colors.placeholder}
                keyboardType="numeric"
                value={newFood.protein}
                onChangeText={(text) => setNewFood({ ...newFood, protein: text })}
              />
              <TextInput
                style={styles.input}
                placeholder="Carbs (g)"
                placeholderTextColor={theme.colors.placeholder}
                keyboardType="numeric"
                value={newFood.carbs}
                onChangeText={(text) => setNewFood({ ...newFood, carbs: text })}
              />
              <TextInput
                style={styles.input}
                placeholder="Fat (g)"
                placeholderTextColor={theme.colors.placeholder}
                keyboardType="numeric"
                value={newFood.fat}
                onChangeText={(text) => setNewFood({ ...newFood, fat: text })}
              />
              <TextInput
                style={styles.input}
                placeholder="Icon Name (e.g., food-apple)"
                placeholderTextColor={theme.colors.placeholder}
                value={newFood.icon}
                onChangeText={(text) => setNewFood({ ...newFood, icon: text })}
              />

              <View style={styles.modalButtons}>
                <Button mode="contained" onPress={addNewFoodItem}>
                  Add
                </Button>
                <Button
                  mode="outlined"
                  onPress={() => setModalVisible(false)}
                  style={{ marginLeft: 10 }}
                >
                  Cancel
                </Button>
              </View>
            </View>
          </View>
        </Modal>
      </View>
    </SafeAreaView>
  );
};

export default NutritionScreen;