doesn’t read the QR codes on my smartphones. how can I do?

import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Button, Text, Alert } from 'react-native';
import { Camera } from 'expo-camera';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'flex-end',
  },
  preview: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  scanText: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  qrFrame: {
    width: 150,  // Riduci ulteriormente le dimensioni del riquadro
    height: 150,
    borderRadius: 10,
    borderColor: '#FFF',
    borderWidth: 2,
    position: 'absolute',
    justifyContent: 'center',
    alignItems: 'center',
  },
  qrCodeText: {
    fontSize: 16,  // Riduci la dimensione del testo
    textAlign: 'center',
    color: '#FFF',
  },
});

export default function App() {
  const [hasCameraPermission, setHasCameraPermission] = useState(null);
  const [scanned, setScanned] = useState(false);
  const [scannedData, setScannedData] = useState('');
  const [serverResponse, setServerResponse] = useState('');

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasCameraPermission(status === 'granted');
    })();
  }, []);

  const handleBarCodeScanned = async ({ data }) => {
    setScanned(true);
    setScannedData(`Dati: ${data}`);

    // Send data to PHP server
    try {
      const response = await fetch('https://www.chesifastasera.com/handleQR.php', {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ qrData: data }), // Send data as JSON
      });

      if (!response.ok) {
        throw new Error(`HTTP Error! Code: ${response.status}`);
      }

      const responseData = await response.text();
      setServerResponse(responseData); // Set server response in state

      // Display the response in an alert or other way
      Alert.alert('Server Response', responseData);

      // Other actions based on server response here

    } catch (error) {
      console.error('Error during server request:', error.message);
      // Error handling if needed
    }
  };

  const resetScanner = () => {
    setScanned(false);
    setScannedData('');
    setServerResponse('');
  };

  if (hasCameraPermission === null) {
    return <View />;
  }
  if (hasCameraPermission === false) {
    return <Text>Camera permission denied</Text>;
  }

  return (
    <View style={styles.container}>
      <Camera
        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
        style={styles.preview}
      >
        {/* Frame the QR code here */}
        <View style={styles.qrFrame}>
          <Text style={styles.qrCodeText}>{scannedData}</Text>
        </View>
      </Camera>
      {scanned && (
        <View>
          <Text style={styles.scanText}>{`Risposta del server: ${serverResponse}`}</Text>
          <Button title="Scansiona di nuovo" onPress={resetScanner} />
        </View>
      )}
    </View>
  );
}