バーコードから栄養成分表示へ：React Nativeで食品スキャナー

// src/BarcodeScanner.js
import React, { useEffect, useState } from 'react';
import { View, StyleSheet, Text, Linking, Button } from 'react-native';
import {
  Camera,
  useCameraDevice,
  useCodeScanner,
} from 'react-native-vision-camera';

const BarcodeScanner = ({ onBarcodeScanned }) => {
  const [hasPermission, setHasPermission] = useState(false);
  const device = useCameraDevice('back');

  useEffect(() => {
    const checkCameraPermission = async () => {
      const status = await Camera.getCameraPermissionStatus();
      if (status === 'not-determined') {
        const newStatus = await Camera.requestCameraPermission();
        setHasPermission(newStatus === 'granted');
      } else {
        setHasPermission(status === 'granted');
      }
    };
    checkCameraPermission();
  }, []);

  const codeScanner = useCodeScanner({
    codeTypes: ['ean-13', 'upc-a', 'qr'], // Specify the barcode types you want to scan
    onCodeScanned: (codes) => {
      if (codes.length > 0) {
        onBarcodeScanned(codes[0].value);
      }
    },
  });

  if (device == null) {
    return <Text>No camera device found.</Text>;
  }

  if (!hasPermission) {
    return (
      <View style={styles.container}>
        <Text>Camera permission is required to scan barcodes.</Text>
        <Button title="Grant Permission" onPress={() => Linking.openSettings()} />
      </View>
    );
  }

  return (
    <View style={StyleSheet.absoluteFill}>
      <Camera
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={true}
        codeScanner={codeScanner}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default BarcodeScanner;

// src/api.js
const API_URL = 'https://world.openfoodfacts.org/api/v2/product/';

export const fetchNutritionData = async (barcode) => {
  try {
    const response = await fetch(`${API_URL}${barcode}?fields=product_name,nutriments,image_url`);
    if (!response.ok) {
      throw new Error('Product not found');
    }
    const data = await response.json();
    if (data.status === 0 || !data.product) {
      throw new Error('Product not found in the database.');
    }
    return data.product;
  } catch (error) {
    console.error('API Error:', error);
    throw error;
  }
};

// App.js
import React, { useState } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  Button,
  ActivityIndicator,
  Image,
} from 'react-native';
import BarcodeScanner from './src/BarcodeScanner';
import { fetchNutritionData } from './src/api';

const App = () => {
  const [isScanning, setIsScanning] = useState(false);
  const [productData, setProductData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleBarcodeScanned = async (barcode) => {
    setIsScanning(false);
    setIsLoading(true);
    setError(null);
    setProductData(null);

    try {
      const data = await fetchNutritionData(barcode);
      setProductData(data);
    } catch (err) {
      setError(err.message);
    } finally {
      setIsLoading(false);
    }
  };

  const renderProductInfo = () => {
    if (!productData) return null;

    const { product_name, nutriments, image_url } = productData;

    return (
      <View style={styles.infoContainer}>
        {image_url && <Image source={{ uri: image_url }} style={styles.productImage} />}
        <Text style={styles.title}>{product_name}</Text>
        <Text>Calories per 100g: {nutriments['energy-kcal_100g'] || 'N/A'}</Text>
        <Text>Carbs per 100g: {nutriments.carbohydrates_100g || 'N/A'}</Text>
        <Text>Protein per 100g: {nutriments.proteins_100g || 'N/A'}</Text>
        <Text>Fat per 100g: {nutriments.fat_100g || 'N/A'}</Text>
      </View>
    );
  };

  if (isScanning) {
    return <BarcodeScanner onBarcodeScanned={handleBarcodeScanned} />;
  }

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.header}>Nutrition Scanner</Text>
      <View style={styles.content}>
        {isLoading && <ActivityIndicator size="large" />}
        {error && <Text style={styles.errorText}>Error: {error}</Text>}
        {productData && renderProductInfo()}
      </View>
      <Button
        title={productData ? 'Scan Another Item' : 'Start Scanning'}
        onPress={() => {
          setProductData(null);
          setError(null);
          setIsScanning(true);
        }}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'space-between', padding: 16 },
  header: { fontSize: 24, fontWeight: 'bold', textAlign: 'center' },
  content: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  infoContainer: { alignItems: 'center' },
  productImage: { width: 150, height: 150, resizeMode: 'contain', marginBottom: 12 },
  title: { fontSize: 20, fontWeight: 'bold', marginBottom: 8 },
  errorText: { color: 'red', textAlign: 'center' },
});

export default App;