one-time password popup does appear, but no code is being filled into the OTP field

[MuhammadAsif99]

My Project React/React-native Version "react": "18.1.0", "react-native": "0.70.4",

i am using this library with legacy deep peer

npm install @eabdullazyanov/react-native-sms-user-consent "node_modules/@eabdullazyanov/react-native-sms-user-consent": { "version": "1.0.11", "resolved": ""xyz, "integrity": "xyz", "peerDependencies": { **"react": "^16.8.1",** **"react-native": ">=0.60.0-rc.0 <1.0.x"** } Attempting: I’m attempting to automatically fetch and fill the OTP using the react-native-sms-user-consent API, as I don’t have control over the OTP.

Expect: I expect it to auto-fill the OTP that arrives from the third-party service.

Result: the result is not as expected. The OTP from the third-party service does arrive, and the one-time password popup does appear, but no code is being filled into the OTP field.

Debugging: For debugging: I’m attempting to directly print the OTP on the screen to verify whether it’s arriving or not.But no value is being set in my TextInput

import React, { useEffect, useState } from 'react';
import { TextInput } from 'react-native';

import { useSmsUserConsent } from '@eabdullazyanov/react-native-sms-user-consent';

const Example = () => {
  const [code, setCode] = useState();

  const retrievedCode = useSmsUserConsent();

  useEffect(() => {
    if (retrievedCode) setCode(retrievedCode);
  }, [retrievedCode]);`

  return <TextInput value={code} onChangeText={setCode}/>;
};

///images for Reference///

My Orginal Code :

 import { useSmsUserConsent } from '@eabdullazyanov/react-native-sms-user-consent';
      const webviewRef = useRef(null);
 const [autoReadOTP, setAutoReadOTP] = useState('');

  const injectJavaScript = `
    window.addEventListener('beforeunload', (event) => 
    {
      window.ReactNativeWebView.postMessage('pagefade()');
    });
  `;

 useEffect(() => {
    const stopSmsHandling = SmsUserConsent.startSmsHandling((event) => {
      if (event.sms) {
        const otpMatch = event.sms.match(/Your OTP is ([a-zA-Z0-9]{10})/);
        if (otpMatch) {
          setAutoReadOTP(otpMatch[1]);
        }
      }
    });

    return () => {
      stopSmsHandling();
    };
  }, []);
  useEffect(() => 
  {
    if (!FUNCTION.IsEmptyString(autoReadOTP))
    {
      const jsCode = `
        window.addEventListener('beforeunload', (event) => 
        {
          window.ReactNativeWebView.postMessage('pagefade()');
        });

        document.getElementById('otp').value = '${autoReadOTP}';
      `;

      webviewRef.current.injectJavaScript(jsCode);
    }

  }, [autoReadOTP]);
 function HandleMessage(event)
  {
    if (event?.nativeEvent?.data == 'pagefade()')
    {
      OnClose();
    }
  }
 return (
      <View style={localStyleSheet.container}>

 <WebView
            ref={webviewRef}
            onLoad={() => setIsLoading(false)}
            onMessage={event => HandleMessage(event)}
            injectedJavaScript={injectJavaScript}
            scalesPageToFit={false}
            source= xyz
/>
..........

[MuhammadAsif99]

Initially, I was utilizing the react-native-android-sms-listener for automatic OTP retrieval and auto-filling. This API was fetching the Sender’s Number. However, in the current scenario, the startSmsHandling() function is only retrieving the body of the SMS, not the Sender’s Number. This discrepancy was the source of the error. I have made modifications to my code in the issue section which working Fine for reference.