initial crop roation showing

Soil Analyzer and Optimized Crop Finder - IT20233808/RP-MobileAPP-FE/components/cropRotationPlanner/CropRotationResponse.js

+import React from 'react';
+import { View, Text, FlatList, Image, StyleSheet } from 'react-native';
+
+const CropRotationResponse = ({ route }) => {
+  const { response } = route.params;
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.heading}>Crop Rotation Plan</Text>
+      <FlatList
+        data={response.cropsToGrow}
+        keyExtractor={(item) => item.cropName}
+        renderItem={({ item }) => (
+          <View style={styles.cropItem}>
+            <Image
+              style={styles.cropImage}
+              source={{ uri: `https://example.com/api/crop-images/${item.cropName}` }}
+            />
+            <Text style={styles.cropName}>{item.cropName}</Text>
+            <Text style={styles.year}>{item.year}</Text>
+          </View>
+        )}
+      />
+    </View>
+  );
+};
+
+export default CropRotationResponse;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  heading: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 20,
+  },
+  cropItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  cropImage: {
+    width: 50,
+    height: 50,
+    marginRight: 10,
+    borderRadius: 5,
+  },
+  cropName: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    flex: 1,
+  },
+  year: {
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+});