Updating Native Modules Documentation (#2261)

* feat: updating Native Modules docs

* feat: update native modules documentation (missed the docs changes)

* converting nativemodules to native modules

* language lint tweaks

* Update docs/native-modules-ios.md

* feat: apply code review comments that needed grammer. changes

* feat: updating intro

* feat: apply comment changes

* feat: remove () from method names

* feat: cleaning up docs/responding to comments

* feat: adding the new titles to the original docs

* feat: updating base doc title

* feat:  cleaning up notes and removing references to other mobile platforms in mobile platform docs

* feat: updating some we's to you's

* pulling direct manipulation out

* fixing some outstanding yous and wes

* updating these to new titles

* move ios/android native components section under native components

* Adding platform agnostic note back (it was removed when removing content related to iOS from this androids section)

* fixing an out of date link to the getting started guides

* correcting link

* adding turbomodules note

* adding parentheses for method names

* native module consistency

* editing run ios/android commands

* using correct code block for java

* removing this file, must have stuck around after a merge conflict but its not needed but it should no longer exist in docusouras V2 (i18n will be added in the future)

* only editing in 0.63 moving forward

* original_id is not needed

* cleaning up white space

* using correct Apostrophe characters

* moving argument types to a table

* adding note about where we are adding the method

* adding a link to info on turbo modules

Co-authored-by: lauramedalia <[email protected]>
Co-authored-by: Ramanpreet Nara <[email protected]>

docs/native-components-android.md

@@ -1,6 +1,6 @@
 ---
 id: native-components-android
-title: Native UI Components
+title: Android Native UI Components
 ---
 
 There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.

docs/native-components-ios.md

@@ -1,6 +1,6 @@
 ---
 id: native-components-ios
-title: Native UI Components
+title: iOS Native UI Components
 ---
 
 There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.

docs/native-modules-intro.md

@@ -0,0 +1,25 @@
+---
+id: native-modules-intro
+title: Native Modules Intro
+---
+
+Sometimes a React Native app needs to access a native platform API that is not available by default in Javascript, for example the native APIs to access Apple or Android pay. Maybe you want to reuse some existing Objective-C, Swift, Java or C++ libraries without having to reimplement it in JavaScript, or write some high performance, multi-threaded code for things like image processing.
+
+The NativeModule system exposes instances of Java/Objective-C/C++ (native) classes to JavaScript (JS) as JS objects, thereby allowing you to execute arbitrary native code from within JS. While we don't expect this feature to be part of the usual development process, it is essential that it exists. If React Native doesn't export a native API that your JS app needs you should be able to export it yourself!
+
+## Native Module Setup
+
+There are two ways to write a native module for your React Native application:
+
+1. Directly within your React Native application’s iOS/Android projects
+2. As a NPM package that can be installed as a dependency by your/other React Native applications
+
+This guide will first walk you through implementing a native module directly within a React Native application. However the native module you build in the following guide can be distributed as an NPM package. Check out the [Setting Up a Native Module as a NPM Package](native-modules-setup) guide if you are interested in doing so.
+
+## Getting Started
+
+In the following sections we will walk you through guides on how to build a native module directly within a React Native application. As a prerequisite, you will need a React Native application to work within. You can follow the steps [here](getting-started) to setup a React Native application if you do not already have one.
+
+Imagine that you want to access the iOS/Android native calendar APIs from Javascript within a React Native application in order to create calendar events. React Native does not expose a Javascript API to communicate with the native calendar libraries. However, through native modules, you can write native code that communicates with native calendar APIs. Then you can invoke that native code through Javascript in your React Native application.
+
+In the following sections you will create such a Calendar native module for both [Android](native-modules-android) and [iOS](native-modules-ios).

docs/native-modules-setup.md

@@ -1,6 +1,6 @@
 ---
 id: native-modules-setup
-title: Native Modules Setup
+title: Native Modules NPM Package Setup
 ---
 
 Native modules are usually distributed as npm packages, except that on top of the usual Javascript they will include some native code per platform. To understand more about npm packages you may find [this guide](https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry) useful.

website/sidebars.json

@@ -45,19 +45,22 @@
     ],
     "JavaScript Runtime": ["javascript-environment", "timers", "hermes"],
     "Connectivity": ["network", "security"],
-    "Native Components and Modules": [
-      "native-modules-setup",
+    "Native Modules": [
+      "native-modules-intro",
+      "native-modules-android",
+      "native-modules-ios",
+      "native-modules-setup"
+    ],
+    "Native Components": [
+      "native-components-android",
+      "native-components-ios",
       "direct-manipulation"
     ],
     "Guides (Android)": [
-      "native-modules-android",
-      "native-components-android",
       "headless-js-android",
       "signed-apk-android"
     ],
     "Guides (iOS)": [
-      "native-modules-ios",
-      "native-components-ios",
       "linking-libraries-ios",
       "running-on-simulator-ios",
       "communication-ios",

website/versioned_docs/version-0.63/native-components-android.md

@@ -1,6 +1,6 @@
 ---
 id: native-components-android
-title: Native UI Components
+title: Android Native UI Components
 ---
 
 There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.

website/versioned_docs/version-0.63/native-components-ios.md

@@ -1,6 +1,6 @@
 ---
 id: native-components-ios
-title: Native UI Components
+title: iOS Native UI Components
 ---
 
 There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like `ScrollView` and `TextInput`, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.