Creating a new application
- -[Optional] Using a specific version or template
- -If you want to start a new project with a specific React Native version, you can use the `--version` argument: - -```shell -npx react-native@X.XX.X init AwesomeProject --version X.XX.X -``` - -You can also start a project with a custom React Native template with the `--template` argument. -Preparing the Android device
You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer. @@ -120,77 +91,15 @@ If you have recently installed Android Studio, you will likely need to [create a > We recommend configuring [VM acceleration](https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux) on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager. -Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step. - -Running your React Native application
- -Step 1: Start Metro
- -[**Metro**](https://metrobundler.dev/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: - -Step 2: Start your application
- -Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following: - -Modifying your app
- -Now that you have successfully run the app, let's modify it. - -- Open `App.tsx` in your text editor of choice and edit some lines. -- Press the R key twice or select `Reload` from the Dev Menu (Ctrl + M) to see your changes! +Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it.That's it!
-Congratulations! You've successfully run and modified your first React Native app. +Congratulations! You successfully set up your development environment.
Now what?
- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). - -If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). +- If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). diff --git a/docs/_getting-started-macos-android.md b/docs/_getting-started-macos-android.md index a666ae40c6a..65762d52621 100644 --- a/docs/_getting-started-macos-android.md +++ b/docs/_getting-started-macos-android.md @@ -1,6 +1,3 @@ -import RemoveGlobalCLI from './\_remove-global-cli.md'; -import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; - ## Installing dependencies You will need Node, Watchman, the React Native command line interface, a JDK, and Android Studio. @@ -91,32 +88,6 @@ Run `source ~/.zprofile` (or `source ~/.bash_profile` for `bash`) to load the co > Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**. -React Native Command Line Interface
- -React Native has a built-in command line interface. Rather than install and manage a specific version of the CLI globally, we recommend you access the current version at runtime using `npx`, which ships with Node.js. With `npx react-nativeCreating a new application
- -[Optional] Using a specific version or template
- -If you want to start a new project with a specific React Native version, you can use the `--version` argument: - -```shell -npx react-native@X.XX.X init AwesomeProject --version X.XX.X -``` - -You can also start a project with a custom React Native template with the `--template` argument. -Preparing the Android device
You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer. @@ -135,77 +106,15 @@ If you use Android Studio to open `./AwesomeProject/android`, you can see the li If you have recently installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the **UpsideDownCake** API Level 34 image. -Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step. - -Running your React Native application
- -Step 1: Start Metro
- -[**Metro**](https://metrobundler.dev/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: - -Step 2: Start your application
- -Modifying your app
- -Now that you have successfully run the app, let's modify it. - -- Open `App.tsx` in your text editor of choice and edit some lines. -- Press the R key twice or select `Reload` from the Dev Menu (Cmd ⌘ + M) to see your changes! +Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it.That's it!
-Congratulations! You've successfully run and modified your first React Native app. +Congratulations! You successfully set up your development environment.Now what?
- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). - -If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). +- If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). diff --git a/docs/_getting-started-macos-ios.md b/docs/_getting-started-macos-ios.md index c2e6b85dd84..eb6fbd8d791 100644 --- a/docs/_getting-started-macos-ios.md +++ b/docs/_getting-started-macos-ios.md @@ -1,6 +1,3 @@ -import RemoveGlobalCLI from './\_remove-global-cli.md'; -import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; - ## Installing dependencies You will need Node, Watchman, the React Native command line interface, Xcode and CocoaPods. @@ -44,44 +41,6 @@ If you are using Xcode version 14.0 or greater than to install a simulator, open For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html). -### React Native Command Line Interface - -React Native has a built-in command line interface. Rather than install and manage a specific version of the CLI globally, we recommend you access the current version at runtime using `npx`, which ships with Node.js. With `npx react-nativeThat's it!
-Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following: - -Now what?
- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). - -If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). +- If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). diff --git a/docs/_getting-started-windows-android.md b/docs/_getting-started-windows-android.md index 197f306a333..15d61eaa500 100644 --- a/docs/_getting-started-windows-android.md +++ b/docs/_getting-started-windows-android.md @@ -1,6 +1,3 @@ -import RemoveGlobalCLI from './\_remove-global-cli.md'; -import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; -Installing dependencies
You will need Node, the React Native command line interface, a JDK, and Android Studio. @@ -105,32 +102,6 @@ The default location for this folder is: %LOCALAPPDATA%\Android\Sdk\platform-tools ``` -React Native Command Line Interface
- -React Native has a built-in command line interface. Rather than install and manage a specific version of the CLI globally, we recommend you access the current version at runtime using `npx`, which ships with Node.js. With `npx react-nativeCreating a new application
- -[Optional] Using a specific version or template
- -If you want to start a new project with a specific React Native version, you can use the `--version` argument: - -```shell -npx react-native@X.XX.X init AwesomeProject --version X.XX.X -``` - -You can also start a project with a custom React Native template with the `--template` argument. -Preparing the Android device
You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer. @@ -151,79 +122,15 @@ If you have recently installed Android Studio, you will likely need to [create a > If you don't have HAXM installed, click on "Install HAXM" or follow [these instructions](https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows) to set it up, then go back to the AVD Manager. -Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step. - -Running your React Native application
- -Step 1: Start Metro
- -[**Metro**](https://metrobundler.dev/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: - -Step 2: Start your application
- -Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following: - -Modifying your app
- -Now that you have successfully run the app, let's modify it. - -- Open `App.tsx` in your text editor of choice and edit some lines. -- Press the R key twice or select `Reload` from the Dev Menu (Ctrl + M) to see your changes! +Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it.That's it!
-Congratulations! You've successfully run and modified your first React Native app. +Congratulations! You successfully set up your development environment.Now what?
- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). - -If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). +- If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). diff --git a/docs/_integration-with-existing-apps-java.md b/docs/_integration-with-existing-apps-java.md index 98916e337c9..ecd86142a8e 100644 --- a/docs/_integration-with-existing-apps-java.md +++ b/docs/_integration-with-existing-apps-java.md @@ -12,7 +12,7 @@ The keys to integrating React Native components into your Android application ar ## Prerequisites -Follow the React Native CLI Quickstart in the [environment setup guide](environment-setup) to configure your development environment for building React Native apps for Android. +Follow the guide on [setting up your development environment](set-up-your-environment) to configure your development environment for building React Native apps for Android. ### 1. Set up directory structure diff --git a/docs/_integration-with-existing-apps-kotlin.md b/docs/_integration-with-existing-apps-kotlin.md index 98f0612ef66..ea724ce54e0 100644 --- a/docs/_integration-with-existing-apps-kotlin.md +++ b/docs/_integration-with-existing-apps-kotlin.md @@ -12,7 +12,7 @@ The keys to integrating React Native components into your Android application ar ## Prerequisites -Follow the React Native CLI Quickstart in the [environment setup guide](environment-setup) to configure your development environment for building React Native apps for Android. +Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for Android. ### 1. Set up directory structure diff --git a/docs/_integration-with-existing-apps-objc.md b/docs/_integration-with-existing-apps-objc.md index 722b562c3ea..1f5cb59bff7 100644 --- a/docs/_integration-with-existing-apps-objc.md +++ b/docs/_integration-with-existing-apps-objc.md @@ -14,7 +14,7 @@ The keys to integrating React Native components into your iOS application are to ## Prerequisites -Follow the React Native CLI Quickstart in the [environment setup guide](environment-setup) to configure your development environment for building React Native apps for iOS. +Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for iOS. ### 1. Set up directory structure diff --git a/docs/_integration-with-existing-apps-swift.md b/docs/_integration-with-existing-apps-swift.md index 3fa945a9743..90d2a2a4475 100644 --- a/docs/_integration-with-existing-apps-swift.md +++ b/docs/_integration-with-existing-apps-swift.md @@ -14,7 +14,7 @@ The keys to integrating React Native components into your iOS application are to ## Prerequisites -Follow the React Native CLI Quickstart in the [environment setup guide](environment-setup) to configure your development environment for building React Native apps for iOS. +Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for iOS. ### 1. Set up directory structure diff --git a/docs/get-started-without-a-framework.md b/docs/get-started-without-a-framework.md new file mode 100644 index 00000000000..cc12293c003 --- /dev/null +++ b/docs/get-started-without-a-framework.md @@ -0,0 +1,120 @@ +--- +id: getting-started-without-a-framework +title: Get Started Without a Framework +hide_table_of_contents: true +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import constants from '@site/core/TabsConstants'; +import PlatformSupport from '@site/src/theme/PlatformSupport'; + +import RemoveGlobalCLI from './\_remove-global-cli.md'; + +
+
-
+Yes. You can use React Native without a Framework. **However, if you’re building a new app with React Native, we recommend using a Framework.**
-Run the following command to create a new React Native project called "AwesomeProject":
+In short, you’ll be able to spend time writing your app instead of writing an entire Framework yourself in addition to your app.
-
-
+The React Native community has spent years refining approaches to navigation, accessing native APIs, dealing with native dependencies, and more. Most apps need these core features. A React Native Framework provides them from the start of your app.
-```shell
-npx create-expo-app AwesomeProject
-
-cd AwesomeProject
-npx expo start
-```
-
-
-
-
-```shell
-yarn create expo-app AwesomeProject
-
-cd AwesomeProject
-yarn expo start
-```
-
-
-
-
-This will start a development server for you.
-
-
-
+
-Can I use React Native without a Framework?
-Running your React Native application
- -Install the [Expo Go](https://expo.dev/client) app on your iOS or Android phone and connect to the same wireless network as your computer. On Android, use the Expo Go app to scan the QR code from your terminal to open your project. On iOS, use the built-in QR code scanner of the default iOS Camera app. - -Modifying your app
- -Now that you have successfully run the app, let's modify it. Open `App.js` in your text editor of choice and edit some lines. The application should reload automatically once you save your changes. - -That's it!
- -Congratulations! You've successfully run and modified your first React Native app. - -Now what?
- -Expo also has [docs](https://docs.expo.dev) you can reference if you have questions specific to the tool. You can also ask for help on the [Expo Discord](https://chat.expo.dev). - -If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it in the [Expo issues](https://github.com/expo/expo/issues). - -If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). - -Running your app on a simulator or virtual device
- -Expo Go allows you to run your React Native app on a physical device without installing iOS and Android native SDKs. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for "React Native CLI Quickstart" to learn how to install Xcode or set up your Android development environment. - -Once you've set these up, you can launch your app on an Android Virtual Device by running `npm run android`, or on the iOS Simulator by running `npm run ios` (macOS only). - -Caveats
- -The Expo Go app is a great tool to get started — it exists to help developers quickly get projects off the ground, to experiment with ideas (such as on [Snack](https://snack.expo.dev/)) and share their work with minimal friction. Expo Go makes this possible by including a feature-rich native runtime made up of every module in the [Expo SDK](https://docs.expo.dev/versions/latest/), so all you need to do to use a module is install the package with `npx expo install` and reload your app. - -The tradeoff is that the Expo Go app does not allow you to add custom native code — you can only use native modules built into the Expo SDK. There are many great libraries available outside of the Expo SDK, and you may even want to build your own native library. You can leverage these libraries with [development builds](https://docs.expo.dev/develop/development-builds/introduction/), or by using ["prebuild"](https://docs.expo.dev/workflow/prebuild/) to generate the native projects, or both. [Learn more about adding native code to projects created with `create-expo-app`](https://docs.expo.dev/workflow/customizing/). - -`create-expo-app` configures your project to use the most recent React Native version that is supported by the Expo SDK. The Expo Go app usually gains support for a given React Native version with new SDK versions (released quarterly). You can check [this document](https://docs.expo.dev/versions/latest/#each-expo-sdk-version-depends-on-a) to find out what versions are supported. +Without a Framework, you’ll either have to write your own solutions to implement core features, or you’ll have to piece together a collection of pre-existing libraries to create a skeleton of a Framework. This takes real work, both when starting your app, then later when maintaining it. -If you're integrating React Native into an existing project, [you can use the Expo SDK](https://docs.expo.dev/bare/installing-expo-modules/) and [development builds](https://docs.expo.dev/develop/development-builds/introduction/), but you will need to set up a native development environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native. +If your app has unusual constraints that are not served well by a Framework, or you prefer to solve these problems yourself, you can make a React Native app without a Framework using Android Studio, Xcode. If you’re interested in this path, learn how to [set up your environment](set-up-your-environment) and how to [get started without a framework](getting-started-without-a-framework). -Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you ran "prebuild" from Expo to generate your project's native code, you'll need this section.
+## Start a new React Native project with Expo -The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both Android and iOS, that's fine - you can pick one to start with, since the setup is a bit different. +
- Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to their own section. Continue reading for an introduction to the documentation, Native Components, React, and more!
+ Welcome to the very start of your React Native journey! If you're looking for getting started instructions, they've moved to their own section. Continue reading for an introduction to the documentation, Native Components, React, and more!
@@ -49,7 +49,7 @@ export default YourApp;
The above is a Snack Player. It’s a handy tool created by Expo to embed and run React Native projects and share how they render in platforms like Android and iOS. The code is live and editable, so you can play directly with it in your browser. Go ahead and try changing the "Try editing me!" text above to "Hello, world!"
-> Optionally, if you want to setup a local development environment, [you can follow our guide to setting up your environment on your local machine](environment-setup) and paste the code examples into your `App.js` file there. (If you are a web developer, you may already have a local environment set up for mobile browser testing!)
+> Optionally, if you want to set up a local development environment, [you can follow our guide to setting up your environment on your local machine](set-up-your-environment) and paste the code examples into your project. (If you are a web developer, you may already have a local environment set up for mobile browser testing!)
## Developer Notes
diff --git a/docs/set-up-your-environment.md b/docs/set-up-your-environment.md
new file mode 100644
index 00000000000..cd4a388de63
--- /dev/null
+++ b/docs/set-up-your-environment.md
@@ -0,0 +1,104 @@
+---
+id: set-up-your-environment
+title: Set Up Your Environment
+hide_table_of_contents: true
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import constants from '@site/core/TabsConstants';
+
+import GuideLinuxAndroid from './\_getting-started-linux-android.md';
+import GuideMacOSAndroid from './\_getting-started-macos-android.md';
+import GuideWindowsAndroid from './\_getting-started-windows-android.md';
+import GuideMacOSIOS from './\_getting-started-macos-ios.md';
+
+In this guide, you'll learn how to set up your environment, so that you can run your project with Android Studio and Xcode. This will allow you to develop with Android emulators and iOS simulators, build your app locally, and more.
+
+:::note
+This guide requires Android Studio or Xcode. If you already have one of these programs installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them.
+
+
+
+:::
+
+#### Development OS
+
+Is setting up my environment required?
+ +Setting up your environment is not required if you're using a [Framework](/architecture/glossary#react-native-framework). With a React Native Framework, you don't need to setup Android Studio or XCode as a Framework will take care of building the native app for you. + +If you have constraints that prevent you from using a Framework, or you'd like to write your own Framework, then setting up your local environment is a requirement. After your environment is set up, learn how to [get started without a framework](getting-started-without-a-framework). + +
+
+
+ );
+}
diff --git a/website/src/theme/BoxLink/styles.module.css b/website/src/theme/BoxLink/styles.module.css
new file mode 100644
index 00000000000..8e0b8500b3e
--- /dev/null
+++ b/website/src/theme/BoxLink/styles.module.css
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1.5rem;
+ border: 1px solid var(--ifm-color-gray-500);
+ border-radius: 0.5rem;
+ font-weight: 500;
+ box-shadow: var(--ifm-alert-shadow);
+}
+
+.container:hover {
+ background-color: var(--ifm-color-gray-100);
+}
diff --git a/website/src/theme/Icon/Android/index.js b/website/src/theme/Icon/Android/index.js
new file mode 100644
index 00000000000..e9c9586ea8c
--- /dev/null
+++ b/website/src/theme/Icon/Android/index.js
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+export default function Android() {
+ return (
+
+ );
+}
diff --git a/website/src/theme/Icon/Apple/index.js b/website/src/theme/Icon/Apple/index.js
new file mode 100644
index 00000000000..39f55180853
--- /dev/null
+++ b/website/src/theme/Icon/Apple/index.js
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+export default function Apple() {
+ return (
+
+ );
+}
diff --git a/website/src/theme/Icon/TV/index.js b/website/src/theme/Icon/TV/index.js
new file mode 100644
index 00000000000..8241f11a0c1
--- /dev/null
+++ b/website/src/theme/Icon/TV/index.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+export default function TV() {
+ return (
+
+ );
+}
diff --git a/website/src/theme/Icon/Web/index.js b/website/src/theme/Icon/Web/index.js
new file mode 100644
index 00000000000..fb76eabc131
--- /dev/null
+++ b/website/src/theme/Icon/Web/index.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+export default function Web() {
+ return (
+
+ );
+}
diff --git a/website/src/theme/PlatformSupport/index.js b/website/src/theme/PlatformSupport/index.js
new file mode 100644
index 00000000000..8140f1ed0af
--- /dev/null
+++ b/website/src/theme/PlatformSupport/index.js
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import styles from './styles.module.css';
+
+import Badge from '@site/src/theme/Badge';
+import Android from '@site/src/theme/Icon/Android';
+import Apple from '@site/src/theme/Icon/Apple';
+import TV from '@site/src/theme/Icon/TV';
+import Web from '@site/src/theme/Icon/Web';
+
+export default function PlatformSupport({platforms}) {
+ return (
+ {children}
+
+
+
+
+ Platform support
+
+ );
+}
diff --git a/website/src/theme/PlatformSupport/styles.module.css b/website/src/theme/PlatformSupport/styles.module.css
new file mode 100644
index 00000000000..b97ba90b1ca
--- /dev/null
+++ b/website/src/theme/PlatformSupport/styles.module.css
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.container {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ margin-bottom: 1.5rem;
+}
+
+.title {
+ font-weight: 600;
+}
+
+.badgeContainer {
+ display: flex;
+ gap: 0.5rem;
+ flex-wrap: wrap;
+}
+ {platforms.includes('android') && (
+
+