Click here to Skip to main content
15,880,956 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
I want to create an app in React Native in which I want to open the camera in a row.
When I click on the green row, the camera should open and the photo should click. I want to do it this way.

What I have tried:

JavaScript
// 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;


This is my screen code. In this code, I have a green color row which I want to use for camera.
I write code for camera, but it is not working.
Posted
Updated 24-Oct-23 10:27am
v3
Comments
OriginalGriff 24-Oct-23 8:25am    
"It's not working" is one of the most useless problem descriptions we get: it tells us absolutely nothing about the problem. We don't know if you get an error message, or the wrong data, or even that that code compiles successfully!
Remember that we can't see your screen, access your HDD, or read your mind - we only get exactly what you type to work with.
So tell us what happens when you run that code, what you expected to happen, how you checked what happened. Help us to help you!
Use the "Improve question" widget to edit your question and provide better information.
Pete O'Hanlon 24-Oct-23 11:09am    
You don't have any code for accessing the camera here so how can we tell you what's wrong with it? I can see the placeholder where you wanted to add the ability, but that view is just an empty bit of placeholder comment right now.

1 solution

If you want to hook up to a web camera in React, I would suggest that you start by looking at Using React Webcam to capture and display images - LogRocket Blog[^]. This blog details the various things that you can do with the following npm package: https://www.npmjs.com/package/react-webcam[^]. As the underlying component is MIT licensed, this should cost you nothing other than a bit of your time developing your own solution.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900