chore: fix typos, grammar, and formatting in Fabric components guide (facebook#4315)

Co-authored-by: Nicola Corti <[email protected]>

Author: coolsoftwaretyler

docs/fabric-native-components-android.md

@@ -187,7 +187,7 @@ The `ReactWebView` extends the Android `WebView` so you can reuse all the proper
 
 The class defines the three Android constructors but defers their actual implementation to the private `configureComponent` function. This function takes care of initializing all the components specific properties: in this case you are setting the layout of the `WebView` and you are defining the `WebClient` that you use to customize the behavior of the `WebView`. In this code, the `ReactWebView` emits an event when the page finishes loading, by implementing the `WebClient`'s `onPageFinished` method.
 
-The code then define an helper function to actually emit an event. To emit an event, you have to:
+The code then defines a helper function to actually emit an event. To emit an event, you have to:
 
 - grab a reference to the `ReactContext`;
 - retrieve the `surfaceId` of the view that you are presenting;
@@ -327,7 +327,7 @@ class ReactWebViewManager(context: ReactApplicationContext) : SimpleViewManager<
 </TabItem>
 </Tabs>
 
-The `ReactWebViewManager` extends the `SimpleViewManager` class from react and implements the `CustomWebViewManagerInterface`, generated by Codegen.
+The `ReactWebViewManager` extends the `SimpleViewManager` class from React and implements the `CustomWebViewManagerInterface`, generated by Codegen.
 
 It holds a reference of the `CustomWebViewManagerDelegate`, another element generated by Codegen.
 
@@ -341,7 +341,7 @@ Finally, if the component can emit an event, you need to map the event name by o
 
 ### 4. Write the `ReactWebViewPackage`
 
-As you do with Native Modules, also Native Components needs to implement the `ReactPackage` class. This is an object that you can use to register the component in the React Native runtime.
+As you do with Native Modules, Native Components also need to implement the `ReactPackage` class. This is an object that you can use to register the component in the React Native runtime.
 
 This is the code for the `ReactWebViewPackage`:
 

docs/fabric-native-components-ios.md

@@ -18,7 +18,7 @@ You can [manually run](the-new-architecture/codegen-cli) the Codegen, however it
 ```bash
 cd ios
 bundle install
-bundle exec pods install
+bundle exec pod install
 ```
 
 Importantly you will see logging output from Codegen, which we're going to use in Xcode to build our WebView native component.
@@ -193,11 +193,11 @@ This code is written in Objective-C++ and contains various details:
 
 - the `@interface` implements two protocols:
   - `RCTCustomWebViewViewProtocol`, generated by Codegen;
-  - `WKNavigationDelegate`, provided by the WebKit frameworks to handle the web view navigation events;
-- the `init` method that instantiate the `WKWebView`, adds it to the subviews and that set the `navigationDelegate`;
+  - `WKNavigationDelegate`, provided by the WebKit framework to handle the web view navigation events;
+- the `init` method that instantiates the `WKWebView`, adds it to the subviews and that sets the `navigationDelegate`;
 - the `updateProps` method that is called by React Native when the component's props change;
-- the `layoutSubviews` method that describe how the custom view needs to be laid out;
-- the `webView:didFinishNavigation:` method that let you handle the what do when the `WKWebView` finishes loading the page;
+- the `layoutSubviews` method that describes how the custom view needs to be laid out;
+- the `webView:didFinishNavigation:` method that lets you handle what to do when the `WKWebView` finishes loading the page;
 - 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;
@@ -212,10 +212,10 @@ Update the `AppDelegate.mm` to make your application aware of our custom WebView
 #import "AppDelegate.h"
 
 #import <React/RCTBundleURLProvider.h>
+// highlight-start
 #import <React/RCTBridge+Private.h>
-// highlight-next-line
 #import "RCTWebView.h"
-
+// highlight-end
 @implementation AppDelegate
 // ...
 // highlight-start
@@ -230,9 +230,9 @@ Update the `AppDelegate.mm` to make your application aware of our custom WebView
 @end
 ```
 
-This code override the `thirdPartyFabricComponents` method by obtainig a mutable copy of the dictionary of third party's components coming from other sources, like third party libraries.
+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 requires to load a component with name `CustomWebView`, React Native will instantiate a `RCTWebView`.
+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.
 

docs/fabric-native-components.md

@@ -10,9 +10,9 @@ import {FabricNativeComponentsAndroid,FabricNativeComponentsIOS} from './\_fabri
 
 # Native Components
 
-If you want to build _new_ React Native Components that wraps around a [Host Component](https://reactnative.dev/architecture/glossary#host-view-tree-and-host-view) like a unique kind of [CheckBox](https://developer.android.com/reference/androidx/appcompat/widget/AppCompatCheckBox) on Android, or a [UIButton](https://developer.apple.com/documentation/uikit/uibutton?language=objc) on iOS, you should use a Fabric Native Component.
+If you want to build _new_ React Native Components that wrap around a [Host Component](https://reactnative.dev/architecture/glossary#host-view-tree-and-host-view) like a unique kind of [CheckBox](https://developer.android.com/reference/androidx/appcompat/widget/AppCompatCheckBox) on Android, or a [UIButton](https://developer.apple.com/documentation/uikit/uibutton?language=objc) on iOS, you should use a Fabric Native Component.
 
-This guide will show you how to build Fabric Native Component, by implementing a web view component. The steps to doing this are:
+This guide will show you how to build Fabric Native Components, by implementing a web view component. The steps to doing this are:
 
 1. Define a JavaScript specification using Flow or TypeScript.
 2. Configure the dependencies management system to generate code from the provided spec and to be auto-linked.
@@ -27,7 +27,7 @@ npx @react-native-community/cli@latest init Demo --install-pods false
 
 ## Creating a WebView Component
 
-This guide will show you how to create a Web View component. We will be creating the component by using the Android's [`WebView`](https://developer.android.com/reference/android/webkit/WebView) component, and the iOS' [`WKWebView`](https://developer.apple.com/documentation/webkit/wkwebview?language=objc) component.
+This guide will show you how to create a Web View component. We will be creating the component by using the Android's [`WebView`](https://developer.android.com/reference/android/webkit/WebView) component, and the iOS [`WKWebView`](https://developer.apple.com/documentation/webkit/wkwebview?language=objc) component.
 
 Let's start by creating the folders structure to hold our component's code:
 
@@ -101,6 +101,7 @@ type NativeProps = $ReadOnly<{|
 export default (codegenNativeComponent<NativeProps>(
   'CustomWebView',
 ): HostComponent<NativeProps>);
+
 ```
 
 </TabItem>
@@ -109,10 +110,10 @@ export default (codegenNativeComponent<NativeProps>(
 This specification is composed of three main parts, exluding the imports:
 
 - The `WebViewScriptLoadedEvent` is a supporting data type for the data the event needs to pass from native to JavaScript.
-- The `NativeProps` which is a definitions of the props that we can set on the component.
-- The `codegenNativeComponent` statement that allows to codegenerate the code for the custom component and that defines a name for the component used to match the native implementations.
+- The `NativeProps` which is a definition of the props that we can set on the component.
+- The `codegenNativeComponent` statement that allows us to codegenerate the code for the custom component and that defines a name for the component used to match the native implementations.
 
-As with Native Modules, you can have multiple specification files in the `specs/` directory. For more information about the types you can use, and the platform types these map to see the [appendix](appendix.md#codegen-typings).
+As with Native Modules, you can have multiple specification files in the `specs/` directory. For more information about the types you can use, and the platform types these map to, see the [appendix](appendix.md#codegen-typings).
 
 ## 2. Configure Codegen to run
 
@@ -128,7 +129,7 @@ The specification is used by the React Native's Codegen tools to generate platfo
      "type": "components",
      "jsSrcsDir": "specs",
      "android": {
-       "javaPackageName": "com.nativelocalstorage"
+       "javaPackageName": "com.webview"
      }
    },
    // highlight-end