use the code for the modal with react native vector icon and write best approach for the react native code
checkout or place order screen and show farmer list to select screen but it can be within the same screen to manage the farmer and it can be a multiple select from form-control
import {StyleSheet} from 'react-native';
import {s} from '../utils/scaling';
const formControlStyles = StyleSheet.create({
checkboxContainer: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
gap: 4,
},
// Switch styles
container: {
width: 16,
height: 16,
borderWidth: 1,
borderRadius: 4,
alignItems: 'center',
justifyContent: 'center',
},
// Radio styles
outer: {
width: 16,
height: 16,
borderRadius: 10,
borderWidth: 1,
alignItems: 'center',
justifyContent: 'center',
},
inner: {
width: 10,
height: 10,
borderRadius: 5,
},
// Checkbox styles
track: {
width: 40,
height: 25,
borderRadius: 15,
justifyContent: 'center',
},
thumb: {
width: 26,
height: 26,
borderRadius: 15,
},
// Circle checkbox styles
circleContainer: {
width: 20,
height: 20,
borderWidth: 1,
borderRadius: 12, // Circular shape
alignItems: 'center',
justifyContent: 'center',
},
check: {
fontSize: s(16),
fontWeight: 'bold',
fontFamily: 'Inter-Regular',
},
});
export default formControlStyles;
React Native Checkout Modal with Farmer Selection
Based on your screenshots and code snippets, I'll create a comprehensive solution for a checkout screen with a modal for selecting multiple farmers. This implementation will use React Native Vector Icons and follow best practices for React Native development.
Implementation Approach
I'll create a checkout screen with a modal that allows users to select multiple farmers. The modal will be accessible from the main checkout screen and will use the form controls you've provided.
Best Practices for React Native Implementation
Here are the best practices I've incorporated into this implementation:
1. Component Structure
- Separation of Concerns: Each component has a specific responsibility (checkout screen, farmer selection modal, confirmation modal).
- Reusable Components: The form controls you provided are reused across components.
- Proper Typing: TypeScript interfaces are used to define props and state types.
2. State Management
- Local State: Using React's useState for component-specific state.
- Derived State: Calculating filtered farmers based on search query.
- Initialization: Properly initializing state based on props using useEffect.
3. Performance Optimization
- Memoization: The filtered farmers list is only recalculated when necessary.
- Efficient Rendering: Using FlatList for the farmer list to optimize rendering of large lists.
- Conditional Rendering: Only rendering components when needed.
4. UI/UX Considerations
- Responsive Design: Using flexible layouts that adapt to different screen sizes.
- Consistent Styling: Following the design patterns from your screenshots.
- Feedback: Providing visual feedback for user interactions.
- Accessibility: Using proper contrast and touch target sizes.
5. Vector Icons Usage
- MaterialIcons: Using React Native Vector Icons (MaterialIcons) for consistent iconography.
- Proper Sizing: Icons are sized appropriately for their context.
6. Modal Implementation
- BlurView Background: Using BlurView for a modern, semi-transparent background.
- Animation: Using Modal's built-in animations for smooth transitions.
- Proper Closing: Handling both the close button and back button press.
7. Form Controls
- Reusing Existing Components: Leveraging your existing form control components.
- Consistent Interaction: Maintaining consistent behavior across different form controls.
How to Use This Implementation
- Place these files in your project structure as shown in the file paths.
- Import the CheckoutScreen component where needed in your navigation.
- The FarmerSelectionModal and OrderConfirmationModal are already imported and used within the CheckoutScreen.
- Make sure you have the required dependencies installed (react-native-vector-icons, @react-native-community/blur).
This implementation provides a complete solution for your checkout flow with farmer selection, following React Native best practices and matching the design in your screenshots.
If “Cash payment” is selected, the delivery option is automatically set to pickup “inactive icon-text” and just use number of farmer selected on the modal
and use this icon import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
then add another screens to track orders use the modal type that is provided just like the order comfirmation modal
Updated Checkout and Order Tracking Implementation
I'll update the checkout screen to handle the cash payment logic and create a new order tracking screen based on your requirements.
Key Updates and Implementations
I've made several updates to the checkout flow and added a new order tracking screen based on your requirements:
1. Checkout Screen Updates
- Cash Payment Logic: When "Cash Payment" is selected, the delivery method is automatically set to "Pickup" and the delivery options become inactive.
- Farmer Selection Count: The modal now shows the number of selected farmers, and the checkout screen displays the count instead of listing individual farmers.
- Icon Updates: Replaced MaterialIcons with MaterialCommunityIcons throughout the application.
2. Order Tracking Implementation
I've created a comprehensive order tracking system with the following features:
- Payment Method Tabs: Toggle between "Afrifarmex Wallet" and "Cash Payment" orders.
- Order Status Filters: Filter orders by "Ongoing", "Completed", or "Cancelled" status.
Order Cards: Display order information including:
- Product details and count
- Order dates
- Order ID and status
- Tracking history with timeline visualization
- Action buttons (Cancel Order, Order Received)
- Empty States: Custom empty state screens for each filter type.
- Cancel Order Modal: Confirmation dialog when cancelling an order.
- Order Detail Screen: Detailed view of a specific order with all information.
3. Status Visualization
- Status Badges: Color-coded status badges (Awaiting Confirmation, Confirmed, In Transit, Supplied, Delivered).
- Timeline View: Visual representation of order progress with checkmarks and timestamps.
4. Modals
- Farmer Selection Modal: Updated to show the count of selected farmers.
- Order Confirmation Modal: Shows order details before confirming.
- Cancel Order Modal: Simple confirmation dialog with Yes/No options.
Best Practices Used
- Component Separation: Each functional area is separated into its own component.
- Type Safety: Comprehensive TypeScript interfaces for all data structures.
- Conditional Rendering: Different UI elements based on order status and payment method.
- State Management: Proper use of React state and effects.
- Responsive Design: Flexible layouts that adapt to different screen sizes.
- Consistent Styling: Following the design patterns from your screenshots.
- Accessibility: Proper contrast and touch target sizes.
These implementations provide a complete solution for your checkout and order tracking flows, matching the designs in your screenshots and incorporating all the requested functionality.
add other screens and flow and use scaling for better responsiveness across all platforms
/**
- Extended Responsive Scaling Utility for React Native
- Provides functions to scale dimensions, font sizes, padding, margins,
- as well as responsive width and height based on a percentage of the screen's
- dimensions. This helps build UIs that adapt to various device sizes.
*/
import {Dimensions, PixelRatio} from 'react-native';
// Get the device screen dimensions
export const {width: screenWidth, height: screenHeight} =
Dimensions.get('window');
// Determine the short and long dimensions regardless of orientation
const [shortDimension, longDimension] =
screenWidth < screenHeight
? [screenWidth, screenHeight]
: [screenHeight, screenWidth];
/**
- Base design dimensions (e.g., from your Figma design)
*/
export const guidelineBaseWidth = 430;
export const guidelineBaseHeight = 944;
/**
- Scales a size horizontally based on the device's width.
- Use this when you want the element's width (or horizontal padding/margin)
- to scale proportionally with the device width.
*/
export function scale(size: number): number {
return (shortDimension / guidelineBaseWidth) * size;
}
/**
- Scales a size vertically based on the device's height.
- Use this for vertical properties like height, top/bottom margins or padding.
*/
export function verticalScale(size: number): number {
return (longDimension / guidelineBaseHeight) * size;
}
/**
- Moderately scales a size horizontally with a factor to control the scaling effect.
- It reduces the impact of extreme differences across devices.
- Ideal for text sizes, horizontal paddings, or margins where full scaling might be too aggressive.
*/
export function moderateScale(size: number, factor: number = 0.5): number {
return size + (scale(size) - size) * factor;
}
/**
- Moderately scales a size vertically with a factor to control the scaling effect.
- Use it for vertical properties that need a moderated response.
*/
export function moderateVerticalScale(
size: number,
factor: number = 0.5,
): number {
return size + (verticalScale(size) - size) * factor;
}
/**
- Responsive font size using moderate scale and rounding based on PixelRatio.
- Use this function for text elements to ensure they remain legible across devices.
*/
export function responsiveFontSize(fontSize: number): number {
const newSize = moderateScale(fontSize);
return Math.round(PixelRatio.roundToNearestPixel(newSize));
}
/**
- Responsive width based on a percentage value of the screen width.
- Use this when you need a component to take up a specific percentage of the device's width.
- Example: responsiveWidth(80) will return 80% of the current screen width.
*/
export function responsiveWidth(percentage: number): number {
return (screenWidth * percentage) / 100;
}
/**
- Responsive height based on a percentage value of the screen height.
- Use this for components whose height should be a percentage of the screen height.
*/
export function responsiveHeight(percentage: number): number {
return (screenHeight * percentage) / 100;
}
/**
- General responsive scaling that factors both horizontal and vertical scales.
- Useful for properties like padding, margin, or any other dimension that
- does not distinctly follow a horizontal or vertical orientation.
*/
export function generalScale(size: number): number {
return (scale(size) + verticalScale(size)) / 2;
}
/**
- Example: Responsive border radius using the general scale.
- Border radius benefits from uniform scaling.
*/
export function responsiveBorderRadius(radius: number): number {
return generalScale(radius);
}
// Shorthand aliases for convenience
export const s = scale;
export const vs = verticalScale;
export const ms = moderateScale;
export const mvs = moderateVerticalScale;
export const rfs = responsiveFontSize;
export const rw = responsiveWidth;
export const rh = responsiveHeight;
export const gs = generalScale;
export const rbr = responsiveBorderRadius;
