Grocery Cart Pro – React Native UI Kit Template

Here is an example of configuring the Grocery Cart Pro React Native UI Kit Template settings:

Theme Configuration

import { GlobalStyles } from '@components/GlobalStyles';

// Define your theme
const theme = {
  darkMode: false,
  primaryColor: '#43a047',
  primaryColorLight: '#ffee00',
  primaryColorDark: '#212121',
  secondaryColor: '#ff9800',
  secondaryColorLight: '#ffee00',
  secondaryColorDark: '#333',
  tertiaryColor: '#9c27b0',
  textPrimary: '#212121',
  textSecondary: '#666',
  accentColor: '#43a047',
  cardBG: '#fff',
};

// Wrap your app with GlobalStyles
export default function App() {
  return (
    <View style={GlobalStyles/theme}>
      // Your app content here
    </View>
  );
}

Icon Set Configuration

// Import the icon set configuration
import { IconSets } from '@components/IconSets';

// Define your icon set
const iconSet = {
  'ios': 'https://example.com/your-icon-set/iosIcons.json',
  'md': 'https://example.com/your-icon-set/mdIcons.json',
};

Cart and Checkout Configuration

// Import the cart and checkout configuration
import { CartContext } from '@context/CartContext';
import { CheckoutContext } from '@context/CheckoutContext';

// Define your cart and checkout settings
const cartSettings = {
  totalPrice: 0,
  totalItems: 0,
  items: [],
};

const checkoutSettings = {
  paymentMethods: ['cash', 'card'],
  paymentMethodsError: 'Invalid payment method',
  paymentSuccess: 'Payment successful!',
};

Loading State Configuration

// Import the loading state configuration
import { LoadingProvider } from '@context/LoadingContext';

// Define your loading state settings
const loadingState = {
  showSpinner: true,
  errorMessage: 'Error occurred during loading',
};

Notification Configuration

// Import the notification configuration
import { Notifications } from '@components/Notifications';

// Define your notification settings
const notifications = {
  successMessage: 'Item added to cart!',
  failureMessage: 'Error occurred while adding item to cart!',
};

Analytics Configuration

// Import the analytics configuration
import { Analytics } from '@components/Analytics';

// Define your analytics settings
const analyticsSettings = {
  trackingId: 'YOUR_TRACKING_ID',
  debug: false,
};

Here are the features of the Grocery Cart Pro - React Native UI Kit Template:

1. Modern Design: A clean and intuitive user interface with contemporary aesthetics.
2. Customizable Components: All components are built with customization in mind, allowing you to modify colors, fonts, and layouts to match your brand's identity.
3. Pre-built Screens: A variety of pre-built screens to get your app up and running quickly, including:
   • Home Screen: Displays featured products, categories, and promotional banners.
   • Product Listing: Shows a grid or list view of products with search and filter options.
   • Product Details: Offers detailed information, including product images, descriptions, pricing, and more.
   • Shopping Cart: Provides an overview of the selected products with quantity adjustment and total pricing.
   • Checkout: A streamlined checkout process with address selection, payment methods, and order summary.
   • Order Confirmation: Confirms the order and provides an estimated delivery time.
   • User Profile: Allows users to manage their personal information, addresses, and order history.
4. Reusable Components: Includes buttons, forms, modals, and other components that can be used across the app.
5. Responsive Layouts: Designed to look great on various screen sizes, ensuring a consistent experience across devices.
6. Dark Mode Support: Full dark mode support for users who prefer a darker theme.
7. Third-party Integrations: Designed to work seamlessly with popular third-party services for authentication, payments, and analytics.