🐛 App Crashes when try to implement camera inside modal.

[Ansari1120]

What's happening?

i have a page. under it i added my custom modal normally i used it elsewhere. problem is , inside that modal i try to implement camera to open. but app goes crashed evetime i opened up the modal. and it is purely due to the usage of camera inside modal. all permissions i checked everything works fine. since no logs , errors , warnings i saw. just app crash.

Reproduceable Code

<ModalComp
        isModalVisible={qrSacannerModal}
        closeModal={() => {
          setVal('');
          setScanned(false);
          setVerify(false);
          setDetailsModal(false);
          setqrSacannerModal(false);
        }}>
    
            <View
              style={{
                marginBottom: -50,
                bottom: 40,
              }}>
              <Text
                style={{...styling.title, alignSelf: 'center', fontSize: 30}}>
                {/* {isTorch ? 'Scan QR Code' : 'Result'} */}
                Scan QR code
              </Text>

              {/* {isTorch && (
            <> */}
              <Text
                style={{
                  ...styling.description,
                  alignSelf: 'center',
                  color: 'gray',
                  fontFamily: Fonts.Regular,
                  textAlign: 'center',
                  fontSize: 12,
                  width: '90%',
                }}>
                Ensure Camera remain still. point camera to the qr code wait a
                while for scanner to catch up code
              </Text>
              <TouchableOpacity
                style={{alignSelf: 'flex-end', zIndex: 99}}
                onPress={() => setTorch(prev => !prev)}>
                <Ionicons
                  name={torch ? 'flash-outline' : 'flash-off-outline'}
                  style={{
                    color: Colors.white,
                    top: 26,
                    fontSize: 22,
                    marginRight: 10,
                    // ...IconStyling,
                  }}
                />
              </TouchableOpacity>
              {/* </> */}
              {/* )} */}
            </View>
            <View
              style={{
                height: '67%',
                width: '100%',
                alignSelf: 'center',
                marginBottom: -180,
              }}>
              <CodeScannerPage
                onPress={() => setqrSacannerModal(false)}
                torch={torch}
                // OnVal={handleVal}
                OnVal={inpt => handleVal(inpt)}
                // isTorch={handleTorch}
                // setIsDetails={val => setIsDetails(val)}
                qrSacannerModal={qrSacannerModal}
              />
            </View>
          </>
   

      
      </ModalComp> 
//and separate component i used inside of that modal which actually contains //camera.
const requestCameraPermissions = async () => {
  if (Platform.OS === 'android') {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.CAMERA,
      {
        title: 'Camera Permission',
        message: 'We need access to your camera to scan QR codes',
        buttonPositive: 'OK',
      },
    );

    return granted === PermissionsAndroid.RESULTS.GRANTED;
  } else {
    const status = await Camera.requestCameraPermission();
    return status === 'authorized';
  }
};

export function CodeScannerPage({
  navigation,
  onPress,
  torch,
  OnVal,
  qrSacannerModal,
}) {
  const [hasPermission, setHasPermission] = useState(false);
  const [device, setDevice] = useState(null);
  const isShowingAlert = useRef(false);

  const showCodeAlert = (value, onDismissed) => {
    const buttons = [{text: 'Close', style: 'cancel', onPress: onDismissed}];
    OnVal(value);
  };

  const fetchPermission = async () => {
    const permission = await requestCameraPermissions();
    if (permission) {
      setHasPermission(true);
    } else {
      Alert.alert(
        'Blockshare Camera Permission Not Granted',
        'You need to grant this app permission to use the camera to scan QR code',
        [
          {text: 'Cancel', onPress: onPress},
          {text: 'Grant', onPress: () => Linking.openSettings()},
        ],
      );
    }
  };

  useEffect(() => {
    fetchPermission();
    return () => {
      // Cleanup function when component unmounts or modal closes
      // Stop any ongoing scanning or release camera resources here
      // For example:
      // Stop camera scanning or other ongoing processes
      // Dispose of any event listeners or subscriptions
      // Reset any state variables used for camera management
      // Example:
      // stopScanning();
      // disposeCamera();
      // resetStateVariables();
      setHasPermission(false);
      setDevice(null);
      onPress();
    };
  }, []);

  useEffect(() => {
    const getCameraDevice = async () => {
      const availableDevices = await Camera.getAvailableCameraDevices();
      if (availableDevices.length > 0) {
        const backCamera = availableDevices.find(
          device => device.position === 'back',
        );
        setDevice(backCamera);
      } else {
        console.log('No camera devices available');
      }
    };

    if (hasPermission) {
      getCameraDevice();
    }
  }, [hasPermission, device]);

  const onCodeScanned = useCallback(codes => {
    const value = codes[0]?.value;
    if (value == null || isShowingAlert.current) return;
    showCodeAlert(value, () => {
      isShowingAlert.current = false;
    });
    isShowingAlert.current = true;
  }, []);

  const codeScanner = useCodeScanner({
    codeTypes: ['qr', 'ean-13'],
    onCodeScanned,
  });

  if (!hasPermission) {
    return (
      <View style={styles.container}>
        <Text style={styling.title}>Requesting Camera Permission...</Text>
      </View>
    );
  }

  if (!device) {
    return (
      <View style={styles.container}>
        <Text style={styling.title}>No Camera Device Available</Text>
        {/* <Button title="Retry" onPress={fetchPermission} /> */}
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text style={styling.title}>Scan QR Code</Text>
      {qrSacannerModal && hasPermission && device && (
        <Camera
          style={StyleSheet.absoluteFill}
          device={device}
          isActive={true}
          codeScanner={codeScanner}
          torch={torch ? 'on' : 'off'}
          enableZoomGesture={true}
        />
      )}
    </View>
  );
}

Relevant log output

No errors just app crash when try to use camera inside modal.

Camera Device

back camera

Device

Techno Camon 18T

VisionCamera Version

3.8.2

Can you reproduce this issue in the VisionCamera Example app?

I didn't try (⚠️ your issue might get ignored & closed if you don't try this)

Additional information

• I am using Expo
• I have enabled Frame Processors (react-native-worklets-core)
• I have read the Troubleshooting Guide
• I agree to follow this project's Code of Conduct
• I searched for similar issues in this repository and found none.

[maintenance-hans]

Guten Tag, Hans here.

Looks like 'ya left out some information!
Make sure to add enough details to the following section:

• Camera Device

Note

New features, bugfixes, updates and other improvements are all handled mostly by @mrousavy in his free time.
To support @mrousavy, please consider 💖 sponsoring him on GitHub 💖.
Sponsored issues will be prioritized.