How to open camera in row when click on row.

// YourCropScreen.js
import React from 'react';
import { View, Text, ScrollView, StyleSheet, Image, TouchableOpacity } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import WeatherInfo from './WeatherInfo'; // Import the WeatherInfo component

// Import your crop images here
import KapasImage from './kapas.png';
import MarchaImage from './marcha.png';
import AduImage from './adu.png';
import JuvarImage from './juvar.png';
import TAmetaImage from './tameta.png';
import DingaliImage from './dungali.png';
import TuverImage from './tuvar.png';
import BajariImage from './bajari.png';
import MakaiImage from './makai.png';
import ChanaImage from './chana.png';

function YourCropScreen() {
  const navigation = useNavigation(); // Access the navigation prop

  const names = [
    "Kapas",
    "Marcha",
    "Adu",
    "Juvar",
    "Tameta",
    "Dungali",
    "Tuver",
    "Bajari",
    "Makai",
    "Chana"
  ];

  const images = [
    KapasImage,
    MarchaImage,
    AduImage,
    JuvarImage,
    TAmetaImage,
    DingaliImage,
    TuverImage,
    BajariImage,
    MakaiImage,
    ChanaImage
  ];

  const navigateToCropScreen = (name) => {
    // You can use a switch statement to determine which screen to navigate to based on the crop name.
    switch (name) {
      case 'Kapas':
        navigation.navigate('KapasScreen'); 
        break;
      case 'Marcha':
        navigation.navigate('MarchaScreen'); 
        break;
      case 'Adu':
        navigation.navigate('AduScreen'); 
        break;
      case 'Juvar':
        navigation.navigate('JuvarScreen');
        break;
      case 'Tameta':
        navigation.navigate('TametaScreen');
        break; 
      case 'Dungali':
        navigation.navigate('DungaliScreen');
        break;
      case 'Tuver':
        navigation.navigate('TuverScreen');
        break;
      case 'Bajari':
        navigation.navigate('BajariScreen');
        break;
      case 'Makai':
        navigation.navigate('MakaiScreen');
        break;
      case 'Chana':
        navigation.navigate('ChanaScreen');
        break;
      // Add cases for other crop names and corresponding screen names
      default:
        // Handle the case for unknown crops or do nothing
        break;
    }
  }
 
  return (
    <View>
      <ScrollView
        horizontal={true}
        contentContainerStyle={{ flexDirection: 'row' }}
      >
        {names.map((name, index) => (
          <TouchableOpacity
            key={index}
            onPress={() => navigateToCropScreen(name)}
            style={{ alignItems: 'center', marginRight: 10 }}
          >
            <View style={{ width: 85, height: 85, borderRadius: 45, borderWidth: 1, borderColor: 'black' }}>
              <Image
                source={images[index]}
                style={{ width: 83, height: 83, borderRadius: 45 }}
              />
            </View>
            <Text style={{ fontWeight: '500', fontSize: 13 }}>{name}</Text>
          </TouchableOpacity>
        ))}
      </ScrollView>

      <View style={{ flexDirection: 'row', height: 185, backgroundColor: 'green', alignItems: 'center', justifyContent: 'space-around', marginBottom: 10 }}>
        {/* You can add your green row content here */}
      </View>
      <View style={{ flexDirection: 'row', height: 185, backgroundColor: 'white', alignItems: 'left' }}>
          <WeatherInfo />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  menuItem: {
    fontSize: 24,
    fontWeight: 'bold',
    marginVertical: 10,
  },
});

export default YourCropScreen;