No +[RCTConvert WKDataDetectorTypes:] function found - dataDetectorTypes prop problem

[a-riva85]

Bug description: After upgrading to v13.8.7 (was 13.2.2 before), the first time i open a webview on ios (both real device and simulator) i receive the following error: No +[RCTConvert WKDataDetectorTypes:] function found

This is caused by the prop dataDetectorTypes, if i pass this props with any value (i usually use the string 'none', but i also tried to pass a constant array of values from the ones defined in the ts types) i receive the error. If i don't pass the prop no issues. If i dismiss the error modal,i can see that the webview loaded correctly. Also, after the first open with error, if i reopen the screen with the webview no errors are reported.

To Reproduce:

Expected behavior: Expect the prop dataDetectorTypes to work correctly

Screenshots/Videos:

Environment:

• OS: macos
• OS version: sonoma 14.4
• react-native version: 0.74
• react-native-webview version: 13.8.7

[alessandro-bottamedi]

Same error

react-native v 0.74.1 react-native-webview v 13.10.0

[Saadnajmi]

Probably caused by https://github.com/facebook/react-native/commit/452bf0ff069b77fc880c57fcb86dbe44ac7285fc

Fix is to move that RCTConvert method for WKDataDetectorType into this library

Potential fix: https://github.com/react-native-webview/react-native-webview/pull/3436

[mcsrk]

same error after upgrading to Expo SDK 51 from 49 and rendering RichEditor from react-native-pell-rich-editor

[hoangann2000]

same issue. How to solve

[Saadnajmi]

@hoangann2000 can you try testing my fix locally? https://github.com/react-native-webview/react-native-webview/pull/3436

[a-riva85]

@Saadnajmi sorry for the late reply, i tried your solution locally and it seems fine (tested on ios sim and real device)

[Saadnajmi]

@Titozzz Any chance you could take a look?

[Bilal-Abdeen]

I would like to confirm that, sadly, this issue is still there with the following versions. react-native-webview: 13.10.3 react-native: 0.74.2

I used the PR #3436 created by @Saadnajmi to create the workaround below. Obviously, you will need to re-apply it after each time you execute the npm install command. I saved these files somewhere safe, to reuse them if necessary.

1. create a file /node_modules/react-native-webview/apple/RCTConvert+WKDataDetectorTypes.h:

   
   #import <WebKit/WebKit.h>

import <React/RCTConvert.h>

if TARGET_OS_IPHONE

@interface RCTConvert (WKDataDetectorTypes)

• (WKDataDetectorTypes)WKDataDetectorTypes:(id)json;

@end

endif // TARGET_OS_IPHONE

2. create a file `/node_modules/react-native-webview/apple/RCTConvert+WKDataDetectorTypes.m`:
```h
#import <WebKit/WebKit.h>

#import <React/RCTConvert.h>

#if TARGET_OS_IPHONE

@implementation RCTConvert (WKDataDetectorTypes)

RCT_MULTI_ENUM_CONVERTER(
     WKDataDetectorTypes,
     (@{
       @"none" : @(WKDataDetectorTypeNone),
       @"phoneNumber" : @(WKDataDetectorTypePhoneNumber),
       @"link" : @(WKDataDetectorTypeLink),
       @"address" : @(WKDataDetectorTypeAddress),
       @"calendarEvent" : @(WKDataDetectorTypeCalendarEvent),
       @"trackingNumber" : @(WKDataDetectorTypeTrackingNumber),
       @"flightNumber" : @(WKDataDetectorTypeFlightNumber),
       @"lookupSuggestion" : @(WKDataDetectorTypeLookupSuggestion),
       @"all" : @(WKDataDetectorTypeAll),
     }),
     WKDataDetectorTypeNone,
     unsignedLongLongValue)

@end

#endif // TARGET_OS_IPHONE

[fahry-mohammed]

@Bilal-Abdeen, you can use the patch-package tool to apply a patch until @Saadnajmi's pull request is merged and released. This way, you won't need to manually modify your node_modules/react-native-webview directory every time you perform an npm install. Thank you for the solution, @Saadnajmi!

[got2golfxx]

@Bilal-Abdeen, I followed your steps (patch). I am now receiving No +[RCTConvert WKDataDetectorTypes:] function found. Any Ideas?

I am running react 18.2.0 , react-native 0.74.2 and react-native-webview 13.10.3.

[Bilal-Abdeen]

@got2golfxx I am sorry, mate; I copied @Saadnajmi code; I don't even know what it does! However, it sounds like the code is not there! I would double-check the names and paths of the 2 files (in my suggestion).

[got2golfxx]

@got2golfxx I am sorry, mate; I copied @Saadnajmi code; I don't even know what it does! However, it sounds like the code is not there! I would double-check the names and paths of the 2 files (in my suggestion).

Thanks, I am attempting to understand the code/patch. Hoping for a release with the fix.

[aliwaqar981]

same issue on react-native 0.74.1 react-native-webview ^13.10.0