You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
import RemoveGlobalCLI from './\_remove-global-cli.md';
2
-
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
3
-
4
1
## Installing dependencies
5
2
6
3
You will need Node, the React Native command line interface, a JDK, and Android Studio.
@@ -74,32 +71,6 @@ Follow the [Watchman installation guide](https://facebook.github.io/watchman/doc
74
71
75
72
> [Watchman](https://facebook.github.io/watchman/docs/install) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance and increased compatibility in certain edge cases (translation: you may be able to get by without installing this, but your mileage may vary; installing this now may save you from a headache later).
76
73
77
-
<h3>React Native Command Line Interface</h3>
78
-
79
-
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-native <command>`, the current stable version of the CLI will be downloaded and executed at the time the command is run.
80
-
81
-
<h2>Creating a new application</h2>
82
-
83
-
<RemoveGlobalCLI />
84
-
85
-
React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using `npx`, which ships with Node.js. Let's create a new React Native project called "AwesomeProject":
86
-
87
-
```shell
88
-
npx react-native@latest init AwesomeProject
89
-
```
90
-
91
-
This is not necessary if you are integrating React Native into an existing application, or if you've installed [Expo](https://docs.expo.dev/bare/installing-expo-modules/) in your project, or if you're adding Android support to an existing React Native project (see [Integration with Existing Apps](integration-with-existing-apps.md)). You can also use a third-party CLI to init your React Native app, such as [Ignite CLI](https://github.com/infinitered/ignite).
92
-
93
-
<h3>[Optional] Using a specific version or template</h3>
94
-
95
-
If you want to start a new project with a specific React Native version, you can use the `--version` argument:
You can also start a project with a custom React Native template with the `--template` argument.
102
-
103
74
<h2>Preparing the Android device</h2>
104
75
105
76
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
120
91
121
92
> 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.
122
93
123
-
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.
124
-
125
-
<h2>Running your React Native application</h2>
126
-
127
-
<h3>Step 1: Start Metro</h3>
128
-
129
-
[**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:
If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript.
150
-
:::
151
-
152
-
<h3>Step 2: Start your application</h3>
153
-
154
-
Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:
import RemoveGlobalCLI from './\_remove-global-cli.md';
2
-
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
3
-
4
1
## Installing dependencies
5
2
6
3
You will need Node, Watchman, the React Native command line interface, a JDK, and Android Studio.
@@ -90,32 +87,6 @@ Run `source ~/.zprofile` (or `source ~/.bash_profile` for `bash`) to load the co
90
87
91
88
> 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**.
92
89
93
-
<h3>React Native Command Line Interface</h3>
94
-
95
-
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-native <command>`, the current stable version of the CLI will be downloaded and executed at the time the command is run.
96
-
97
-
<h2>Creating a new application</h2>
98
-
99
-
<RemoveGlobalCLI />
100
-
101
-
React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using `npx`, which ships with Node.js. Let's create a new React Native project called "AwesomeProject":
102
-
103
-
```shell
104
-
npx react-native@latest init AwesomeProject
105
-
```
106
-
107
-
This is not necessary if you are integrating React Native into an existing application, or if you've installed [Expo](https://docs.expo.dev/bare/installing-expo-modules/) in your project, or if you're adding Android support to an existing React Native project (see [Integration with Existing Apps](integration-with-existing-apps.md)). You can also use a third-party CLI to init your React Native app, such as [Ignite CLI](https://github.com/infinitered/ignite).
108
-
109
-
<h3>[Optional] Using a specific version or template</h3>
110
-
111
-
If you want to start a new project with a specific React Native version, you can use the `--version` argument:
You can also start a project with a custom React Native template with the `--template` argument.
118
-
119
90
<h2>Preparing the Android device</h2>
120
91
121
92
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.
@@ -134,77 +105,15 @@ If you use Android Studio to open `./AwesomeProject/android`, you can see the li
134
105
135
106
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.
136
107
137
-
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.
138
-
139
-
<h2>Running your React Native application</h2>
140
-
141
-
<h3>Step 1: Start Metro</h3>
142
-
143
-
[**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:
If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript.
import RemoveGlobalCLI from './\_remove-global-cli.md';
2
-
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
3
-
4
1
## Installing dependencies
5
2
6
3
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
44
41
45
42
For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).
46
43
47
-
### React Native Command Line Interface
48
-
49
-
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-native <command>`, the current stable version of the CLI will be downloaded and executed at the time the command is run.
50
-
51
-
## Creating a new application
52
-
53
-
<RemoveGlobalCLI />
54
-
55
-
You can use React Native's built-in command line interface to generate a new project. Let's create a new React Native project called "AwesomeProject":
56
-
57
-
```shell
58
-
npx react-native@latest init AwesomeProject
59
-
```
60
-
61
-
This is not necessary if you are integrating React Native into an existing application, or if you've installed [Expo](https://docs.expo.dev/bare/installing-expo-modules/) in your project, or if you're adding iOS support to an existing React Native project (see [Integration with Existing Apps](integration-with-existing-apps.md)). You can also use a third-party CLI to init your React Native app, such as [Ignite CLI](https://github.com/infinitered/ignite).
62
-
63
-
:::info
64
-
65
-
If you are having trouble with iOS, try to reinstall the dependencies by running:
66
-
67
-
1.`cd ios` to navigate to the `ios` folder.
68
-
2.`bundle install` to install [Bundler](https://bundler.io/)
69
-
3.`bundle exec pod install` to install the iOS dependencies managed by CocoaPods.
70
-
71
-
:::
72
-
73
-
### [Optional] Using a specific version or template
74
-
75
-
If you want to start a new project with a specific React Native version, you can use the `--version` argument:
You can also start a project with a custom React Native template with the `--template` argument.
82
-
83
-
> **Note** If the above command is failing, you may have old version of `react-native` or `react-native-cli` installed globally on your pc. Try uninstalling the cli and run the cli using `npx`.
84
-
85
44
### [Optional] Configuring your environment
86
45
87
46
Starting from React Native version 0.69, it is possible to configure the Xcode environment using the `.xcode.env` file provided by the template.
@@ -102,81 +61,13 @@ export NVM_DIR="$HOME/.nvm"
102
61
You might also want to ensure that all "shell script build phase" of your Xcode project, is using `/bin/zsh` as its shell.
103
62
:::
104
63
105
-
## Running your React Native application
106
-
107
-
### Step 1: Start Metro
108
-
109
-
[**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:
If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript.
130
-
:::
131
-
132
-
### Step 2: Start your application
64
+
<h3>That's it!</h3>
133
65
134
-
Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:
You should see your new app running in the iOS Simulator shortly.
154
-
155
-
156
-
157
-
This is one way to run your app. You can also run it directly from within Xcode.
158
-
159
-
> If you can't get this to work, see the [Troubleshooting](troubleshooting.md) page.
160
-
161
-
### Running on a device
162
-
163
-
The above command will automatically run your app on the iOS Simulator by default. If you want to run the app on an actual physical iOS device, please follow the instructions [here](running-on-device.md).
164
-
165
-
### Modifying your app
166
-
167
-
Now that you have successfully run the app, let's modify it.
168
-
169
-
- Open `App.tsx` in your text editor of choice and edit some lines.
170
-
- Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes!
171
-
172
-
### That's it!
173
-
174
-
Congratulations! You've successfully run and modified your first React Native app.
66
+
Congratulations! You successfully set up your development environment.
0 commit comments