fix(hcaptcha): iOS timeout when passive mode

Author: DSergiu

.github/workflows/publish.yaml

@@ -14,10 +14,10 @@ jobs:
       actions: write
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
           node-version: 24
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
       - run: npm install
       - run: npm test
       - run: npm run lint
@@ -26,10 +26,10 @@ jobs:
     runs-on: ubuntu-latest
     needs: build
     steps:
-      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
           node-version: 24
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
       - name: npm release
         run: |
           npm ci

.github/workflows/tests.yaml

@@ -17,12 +17,12 @@ jobs:
       actions: write
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+    - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
       with:
         node-version: 24
-    - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+    - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
     - run: npm install
-    - run: npm test
+    - run: npm run test
     - run: npm run lint
     - if: github.ref == 'refs/heads/master' && github.event_name == 'push'
       run: npm run perf:baseline
@@ -40,9 +40,9 @@ jobs:
     runs-on: ubuntu-latest
     if: github.event_name == 'pull_request'
     steps:
-    - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+    - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
     - run: npm install
-    - uses: actions/cache/restore@d4323d4df104b026a6aa633fdb11d772146be0bf # v4.2.2
+    - uses: actions/cache/restore@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
       id: cache-reassure
       with:
         path: .reassure
@@ -91,10 +91,10 @@ jobs:
           platform: ios
           pm: yarn
     steps:
-    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+    - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
       with:
         node-version: 24
-    - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+    - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
       with:
         path: react-native-hcaptcha
     - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
@@ -140,7 +140,7 @@ jobs:
         - os: macos-latest
           platform: ios
     steps:
-    - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+    - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
     - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
       with:
         node-version: 22
@@ -174,7 +174,7 @@ jobs:
       name: Run iOS E2E tests
       run: npm run test:e2e:ios
 
-    - uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+    - uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
       if: always()
       with:
         name: e2e-results-${{ matrix.platform }}
@@ -189,7 +189,7 @@ jobs:
     needs: test
     if: always() && github.event_name == 'schedule' && needs.test.result == 'failure'
     steps:
-    - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+    - uses: actions/checkout@df4cb1c069e1874edd31b4311f1884172cec0e10 # v6.0.3
     - run: |
         RN_VERSION="${{ needs.test.outputs.rn-version }}"
         GHA_RUN_URL="${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}"

.mise.toml

@@ -0,0 +1,6 @@
+[env]
+_.path = "{{ cwd }}/bin"
+
+[tools]
+node = "24.16.0"
+yarn = "1.22.22"

Hcaptcha.js

@@ -213,6 +213,7 @@ const Hcaptcha = ({
   const tokenTimeout = 120000;
   const loadingTimeout = 15000;
   const [isLoading, setIsLoading] = useState(true);
+  const isLoadingRef = useRef(true);
   const journeyEnabled = Boolean(userJourney);
   const hasJourneyConsumerRef = useRef(false);
   const normalizedTheme = useMemo(() => normalizeTheme(theme), [theme]);
@@ -345,13 +346,13 @@ const Hcaptcha = ({
 
   useEffect(() => {
     const timeoutId = setTimeout(() => {
-      if (isLoading) {
+      if (isLoadingRef.current) {
         onMessage({ nativeEvent: { data: 'error', description: 'loading timeout' } });
       }
     }, loadingTimeout);
 
     return () => clearTimeout(timeoutId);
-  }, [isLoading, onMessage]);
+  }, [onMessage]);
 
   const webViewRef = useRef(null);
   const injectVerifyData = (resetFirst = false) => {
@@ -407,6 +408,9 @@ const Hcaptcha = ({
         }}
         mixedContentMode={'always'}
         onMessage={(e) => {
+          isLoadingRef.current = false;
+          setIsLoading(false);
+
           if (e.nativeEvent.data === HCAPTCHA_READY_EVENT) {
             injectVerifyData();
             return;
@@ -415,7 +419,6 @@ const Hcaptcha = ({
           e.reset = reset;
           e.success = true;
           if (e.nativeEvent.data === 'open') {
-            setIsLoading(false);
           } else if (e.nativeEvent.data.length > 35) {
             const expiredTokenTimerId = setTimeout(() => onMessage({ nativeEvent: { data: 'expired' }, success: false, reset }), tokenTimeout);
             e.markUsed = () => clearTimeout(expiredTokenTimerId);

README.md

@@ -11,7 +11,7 @@ hCaptcha wrapper for React Native (Android and iOS)
 
 1. Install package:
 - Using NPM
-   `npm install @hcaptcha/react-native-hcaptcha` 
+   `npm install @hcaptcha/react-native-hcaptcha`
 - Using Yarn
    `yarn add @hcaptcha/react-native-hcaptcha`
 2. Import package:
@@ -21,7 +21,7 @@ Full examples for expo and react-native, as well as debugging guides, are in [MA
 
 ## Demo
 
-See live demo in [Snack](https://snack.expo.io/rTUn6wTjW).
+See live demo in [Snack](https://snack.expo.dev/@ds-imi/example-app-react-native-hcaptcha?platform=ios).
 
 ## Usage
 

__scripts__/generate-example.js

@@ -158,8 +158,28 @@ function main({ cliName, projectRelativeProjectPath, projectName, projectTemplat
   } else {
     // https://github.com/facebook/react-native/issues/29977 - react-native doesn't work with symlinks so `cp` instead
     const destLibDir = path.join(projectPath, 'react-native-hcaptcha');
-    const excludes = ['__e2e__/host', '__tests__', '__mocks__', 'node_modules', '.git', 'output', '.reassure'].map(e => `--exclude=${e}`).join(' ');
+    const excludes = [
+      '__e2e__/host',
+      '__tests__',
+      '__mocks__',
+      'node_modules',
+      '.git',
+      'output',
+      '.reassure',
+      'package-lock.json',
+      'yarn.lock',
+    ].map(e => `--exclude=${e}`).join(' ');
     execSync(`rsync -a ${excludes} ${libRoot}/ ${destLibDir}/`, { stdio: 'inherit' });
+
+    const copiedPkgPath = path.join(destLibDir, 'package.json');
+    const copiedPkg = JSON.parse(fs.readFileSync(copiedPkgPath, 'utf8'));
+    delete copiedPkg.devDependencies;
+    delete copiedPkg.packageManager;
+    if (copiedPkg.scripts?.prepare) {
+      delete copiedPkg.scripts.prepare;
+    }
+    fs.writeFileSync(copiedPkgPath, JSON.stringify(copiedPkg, null, 2) + '\n');
+
     execSync('npm i --save file:./react-native-hcaptcha', packageManagerOptions);
     execSync(`npm i --save --dev ${devPackages}`, packageManagerOptions);
     execSync(`npm i --save ${peerPackages}`, packageManagerOptions);

__tests__/Hcaptcha.test.js

@@ -396,6 +396,31 @@ describe('Hcaptcha', () => {
     expect(component.UNSAFE_queryByType(TouchableWithoutFeedback)).toBeNull();
   });
 
+  it('does not emit a loading timeout after the widget becomes ready in passive flows', () => {
+    jest.useFakeTimers();
+    const onMessage = jest.fn();
+    const component = render(
+      <Hcaptcha
+        siteKey="00000000-0000-0000-0000-000000000000"
+        url="https://hcaptcha.com"
+        onMessage={onMessage}
+      />
+    );
+
+    act(() => {
+      getWebView(component).props.onMessage({ nativeEvent: { data: HCAPTCHA_READY_EVENT } });
+      jest.advanceTimersByTime(15000);
+    });
+
+    expect(onMessage).not.toHaveBeenCalledWith({
+      nativeEvent: {
+        data: 'error',
+        description: 'loading timeout',
+      },
+    });
+    expect(getLastInjectJavaScriptMock()).toHaveBeenCalledWith(expect.stringContaining('execute();'));
+  });
+
   it('forwards token messages with reset and markUsed hooks', async () => {
     jest.useFakeTimers();
     const onMessage = jest.fn();