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:
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 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();
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) => {
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;
default:
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 }}>
{}
</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.