-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add usage and simulator setup instructions (#32)
- Loading branch information
Showing
6 changed files
with
172 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
## Managing System Images for Simulators and Emulators | ||
|
||
While the IDE can manage simulator and emulator instances, it requires that the right version of system images is installed on your computer. | ||
|
||
In case when no supported image is installed, you won't be able to create new simulator or emulator using the IDE. | ||
Please follow below sections to learn how to install and manage system versions for Android emulators and iOS simulators. | ||
|
||
### Installing Android images | ||
|
||
1. Open Android Studio and launch SDK Manager from "Tools" menu. | ||
2. Lookup Android version of your choice and install one of available system images. You can use "Show Package Details" checkbox to see full list of options. It is important that you select System Image that's right for your processor (for M1/2/3 Macs select ARM 64 image, or Intel for older generations of Macs). We recommend selecting Google Play-enabled images, but this choice doesn't impact the way the extension works. | ||
3. Select and install the right image. | ||
<img width="800" alt="android-sdk-manager" src="https://github.com/software-mansion-labs/react-native-ide/assets/726445/8c078f77-1b72-477d-b4d3-dcb0b48e5851"> | ||
|
||
|
||
### Installing iOS platforms | ||
|
||
1. Open Xcode and launch settings dialog from Xcode > Settings menu | ||
2. Go to "Platforms" tab: | ||
<img width="800" alt="ios-platforms-manager" src="https://github.com/software-mansion-labs/react-native-ide/assets/726445/edb89317-78cf-48c9-a915-c03006f8b5ca"> | ||
|
||
3. Use "+" button in bottom left corner, select "iOS" from the menu and find the iOS version you want to install from the list: | ||
<img width="800" alt="ios-platforms-manager-select-version" src="https://github.com/software-mansion-labs/react-native-ide/assets/726445/b6cc64a8-bca7-42a3-88cd-13ef458441bb"> | ||
|
||
|
||
4. Click "Download & install" button to begin installing |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,103 @@ | ||
After [INSTALLING](INSTALLATION.md) the extension, you should be able to start using the extension by opening your React Native or Expo project as a workspace in Visual Studio Code. | ||
If that's not the case and you have problems getting the extension to run, please check [TROUBLESHOOTING](TROUBLESHOOTING.md) guide. | ||
|
||
For a quick overview of the features the IDE provides, you can check [React Native IDE website](https://ide.swmansion.com). | ||
|
||
## 1. Open your project in vscode and start the extension panel | ||
|
||
If your project setup is supported, there is no extra configuration that's necessary to get the project running. | ||
The only thing you need to do is open your React Native of Expo project as workspace in vscode (File > Open Folder... option or using `code` command with the folder name from terminal). | ||
Once you have it open, you can start the extension panel in one of a few ways: | ||
|
||
1. When you open any file of your project to edit it, you can launch the extension from "Open IDE Panel" button in the editor toolbar: | ||
<img width="800" alt="sztudio_editor_button" src="https://github.com/software-mansion-labs/react-native-ide/assets/726445/18983660-0a06-4b56-ba3f-2eda2bf50f12"> | ||
2. You can use "React Native IDE: Open IDE Panel" available in vscode's command palette: | ||
<img width="800" alt="sztudio_command_palette" src="https://github.com/software-mansion-labs/react-native-ide/assets/726445/ea7579b1-fc40-47c2-9d1c-50907ec9d665"> | ||
3. If you already had the panel open in this project before restarting the editor, it will automatically reopen in the same place. | ||
|
||
## 2. Create simulator and emulator instances on the first run | ||
|
||
When you open the IDE panel for the first time, it'll ask you to configure Android emulator of iOS simulator. | ||
Depending on which platform you want to run your app on first, click one of the options available at the initial screen: | ||
<img width="650" alt="sztudio-init-screen" src="https://github.com/software-mansion-labs/react-native-ide/assets/726445/d2c6a55a-2f22-46fe-917b-686766ad1f8e"> | ||
|
||
You will be able to add or remove simulators later using the device menu in the left bottom corner of the panel. | ||
|
||
In case the IDE cannot locate system images to use for the device, you will see an empty list when creating new emulator or simulator. | ||
Please follow the [SIMULATORS](SIMULATORS.md) section to learn how to manage system versions of Android emulators or iOS simulators that the IDE can use. | ||
|
||
## 3. Decide on the location of the IDE panel | ||
|
||
The main extension window can be either presented as one of the editor tabs, which is the default behavior, or as a side panel. | ||
To change between these two modes, open VSCode settings and search for "React Native IDE: Show Panel in Activity Bar" option. | ||
Note that when the extension is used as side panel it can be dragged to the secondary side panel that's on the opposite side to where your file explorer is placed: | ||
|
||
## 4. Wait for the project to build and run | ||
|
||
After all the above steps, you should be able to see your app building and launching in the extension device preview. | ||
From there, you can use the simulator normally to navigate in your app and try out some of the developer experience enhancements that the IDE provides. | ||
|
||
## 5. IDE featuers highlights | ||
|
||
Visit [React Native IDE](https://ide.swmansion.com/) webside, for a nicely presented list of the feature highlights. | ||
|
||
### Click to inspect | ||
|
||
Using the built-in inspector you can jump directly from preview to a file where your component is defined. | ||
|
||
<video width="500" controls> | ||
<source src="packages/docs/static/video/2_sztudio_inspect.mp4" type="video/mp4"> | ||
</video> | ||
|
||
### Use breakpoints right in VSCode | ||
|
||
Without any additional setup the extension allows to add a breakpoints in Visual Studio Code to debug your React Native application. | ||
IDE also automatically stops at runtime exceptions showing you the exact line of code where they happened. | ||
|
||
<video width="500" controls> | ||
<source src="packages/docs/static/video/3_sztudio_debugger.mp4" type="video/mp4"> | ||
</video> | ||
|
||
### URL bar (currently supports expo-router only) | ||
|
||
The React Native IDE integrates with your deep-linked application allowing you to jump around the navigation structure. | ||
|
||
<video width="500" controls> | ||
<source src="packages/docs/static/video/4_sztudio_url_bar.mp4" type="video/mp4"> | ||
</video> | ||
|
||
### Logs integration | ||
|
||
React Native IDE uses the built-in VSCode console allowing you to filter through the logs. | ||
The links displayed in the console are automatically linking back to your source code. | ||
|
||
<video width="500" controls> | ||
<source src="packages/docs/static/video/5_sztudio_logs_panel.mp4" type="video/mp4"> | ||
</video> | ||
|
||
### Develop components in isolation | ||
|
||
Develop your components individually without distractions. | ||
|
||
Install `react-native-ide` package and use `preview` method from it to define the components that should render in preview mode: | ||
|
||
```js | ||
import { preview } from 'react-native-ide'; | ||
|
||
preview(<MyComponent param={42} />); | ||
``` | ||
|
||
The extension will display a clickable "Open preview" button over the line with `preview` call that you can use to launch into the preview mode. | ||
|
||
<video width="500" controls> | ||
<source src="packages/docs/static/video/6_sztudio_preview.mp4" type="video/mp4"> | ||
</video> | ||
|
||
### Adjust device settings on the fly | ||
|
||
You can adjust text size and light/dark mode right from the React Native IDE. | ||
Focus just on your app without switching between windows. | ||
|
||
<video width="500" controls> | ||
<source src="packages/docs/static/video/7_sztudio_device_settings.mp4" type="video/mp4"> | ||
</video> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters