[RN][Native components] Update documentation on how to write Native components for 0.77 (facebook#4389)

Author: cipolleschi

docs/fabric-native-components-ios.md

@@ -183,11 +183,6 @@ using namespace facebook::react;
   return concreteComponentDescriptorProvider<CustomWebViewComponentDescriptor>();
 }
 
-Class<RCTComponentViewProtocol> WebViewCls(void)
-{
-  return RCTWebView.class;
-}
-
 @end
 ```
 
@@ -203,40 +198,6 @@ This code is written in Objective-C++ and contains various details:
 - the `urlIsValid:(std::string)propString` method that checks whether the URL received as prop is valid;
 - the `eventEmitter` method which is a utility to retrieve a strongly typed `eventEmitter` instance
 - the `componentDescriptorProvider` which returns the `ComponentDescriptor` generated by Codegen;
-- the `WebViewCls` which is an helper method to register the `RCTWebView` in the application.
-
-#### AppDelegate.mm
-
-Finally, you can register the component in the app.
-Update the `AppDelegate.mm` to make your application aware of our custom WebView component:
-
-```objc title="Demo/ios/Demo/AppDelegate.mm"
-#import "AppDelegate.h"
-
-#import <React/RCTBundleURLProvider.h>
-// highlight-start
-#import <React/RCTBridge+Private.h>
-#import "RCTWebView.h"
-// highlight-end
-@implementation AppDelegate
-// ...
-// highlight-start
-- (NSDictionary<NSString *,Class<RCTComponentViewProtocol>> *)thirdPartyFabricComponents
-{
-  NSMutableDictionary * dictionary = [super thirdPartyFabricComponents].mutableCopy;
-  dictionary[@"CustomWebView"] = [RCTWebView class];
-  return dictionary;
-}
-// highlight-end
-
-@end
-```
-
-This code overrides the `thirdPartyFabricComponents` method by obtaining a mutable copy of the dictionary of third party components coming from other sources, like third party libraries.
-
-It then adds an entry to the dictionary with the name used in the Codegen specification file. In this way, when React is required to load a component with name `CustomWebView`, React Native will instantiate a `RCTWebView`.
-
-Finally, it returns the new dictionary.
 
 #### Add WebKit framework
 

docs/fabric-native-components.md

@@ -120,24 +120,31 @@ As with Native Modules, you can have multiple specification files in the `specs/
 The specification is used by the React Native's Codegen tools to generate platform specific interfaces and boilerplate for us. To do this, Codegen needs to know where to find our specification and what to do with it. Update your `package.json` to include:
 
 ```json package.json
-     "start": "react-native start",
-     "test": "jest"
-   },
-   // highlight-start
-   "codegenConfig": {
-     "name": "AppSpec",
-     "type": "components",
-     "jsSrcsDir": "specs",
-     "android": {
-       "javaPackageName": "com.webview"
-     }
-   },
-   // highlight-end
-   "dependencies": {
+      "start": "react-native start",
+      "test": "jest"
+    },
+    // highlight-start
+    "codegenConfig": {
+      "name": "AppSpec",
+      "type": "components",
+      "jsSrcsDir": "specs",
+      "android": {
+        "javaPackageName": "com.webview"
+      },
+      "ios": {
+        "componentProvider": {
+          "CustomWebView": "RCTWebView"
+      }
+    }
+  },
+  // highlight-end
+  "dependencies": {
 ```
 
 With everything wired up for Codegen, we need to prepare our native code to hook into our generated code.
 
+Note that for iOS, we are declaratively mapping the name of the JS component that is exported by the spec (`CustomWebView`) with the iOS class that will implement the component natively.
+
 ## 2. Building your Native Code
 
 Now it's time to write the native platform code so that when React requires to render a view, the platform can create the right native view and can render it on screen.