Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: added last booted simulator pick & iPhone 14 as fallback + doc typos #1701

Merged
merged 3 commits into from
Sep 26, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/autolinking.md
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ correct location and update them accordingly:

Dependencies are only linked if they are listed in the package.json of the mobile workspace, where "react-native" dependency is defined. For example, with this file structure:

```
```sh
/root
/packages
/mobile
Expand Down
12 changes: 6 additions & 6 deletions docs/commands.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ Alternatively if you want to run <code>react-native bundle</code> manually and t
For react-native versions 0.57 and above the bundle output path should be:
<code>android/app/build/generated/assets/react/debug/index.android.js</code>

To find out the correct path for previous react-native versions, take a look at the <code>react.gradle</code> file here: https://github.com/facebook/react-native/blob/0.57-stable/react.gradle or inside your <code>node_modules/react-native</code> directory.
To find out the correct path for previous react-native versions, take a look at the <code>react.gradle</code> file here: <https://github.com/facebook/react-native/blob/0.57-stable/react.gradle> or inside your <code>node_modules/react-native</code> directory.

The expected path for the js bundle can be found on the line that starts with <code>jsBundleDir = </code>.

Expand All @@ -73,7 +73,7 @@ The expected path for the js bundle can be found on the line that starts with <c

> default: utf8

Encoding the bundle should be written in (https://nodejs.org/api/buffer.html#buffer_buffer).
Encoding the bundle should be written in (<https://nodejs.org/api/buffer.html#buffer_buffer>).

#### `--max-workers <number>`

Expand All @@ -85,7 +85,7 @@ File name where to store the sourcemap file for resulting bundle, ex. `/tmp/grou

#### `--sourcemap-sources-root <string>`

Path to make sourcemaps sources entries relative to, ex. `/root/dir`.
Path to make sourcemap sources entries relative to, ex. `/root/dir`.

#### `--sourcemap-use-absolute-path`

Expand Down Expand Up @@ -404,7 +404,7 @@ Notes: If selected simulator does not exist, cli will try to run fallback simula

Notes: `simulator_name` must be a valid iOS simulator name. If in doubt, open your AwesomeApp/ios/AwesomeApp.xcodeproj folder on XCode and unroll the dropdown menu containing the simulator list. The dropdown menu is situated on the right hand side of the play button (top left corner).

Example: this will launch your projet directly onto the iPhone XS Max simulator:
Example: this will launch your project directly onto the iPhone XS Max simulator:

```sh
react-native run-ios --simulator "iPhone XS Max"
Expand Down Expand Up @@ -444,7 +444,7 @@ Default: `process.env.RCT_METRO_PORT || 8081`

Usage:

```
```sh
react-native start [option]
```

Expand Down Expand Up @@ -555,7 +555,7 @@ The local path to your source map file if you generated it manually, ex. `/tmp/s

Generate the JS bundle and source map in `os.tmpdir()`

#### `--port <number>`,
#### `--port <number>`

The running metro server port number

Expand Down
9 changes: 1 addition & 8 deletions docs/healthChecks.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ Plugins can be used to extend the health checks that `react-native doctor` runs.

See [`Plugins`](./plugins.md) for information about how plugins work.


## How does it work?

To provide additional health checks, a package needs to have a `react-native.config.js` at the root folder in order to be discovered by the CLI as a plugin.
Expand Down Expand Up @@ -34,7 +33,6 @@ At the startup, React Native CLI reads configuration from all dependencies liste

At the end, an array of health check categories is concatenated to be checked when `react-native doctor` is run.


## HealthCheckCategory interface

```ts
Expand All @@ -50,8 +48,7 @@ Name of the category for this health check. This will be used to group health ch

##### `healthChecks`

Array of health checks to perorm in this category

Array of health checks to perform in this category

## HealthCheckInterface interface

Expand Down Expand Up @@ -92,7 +89,6 @@ Is this health check required or optional?

Longer description of this health check


##### `getDiagnostics`

Functions which performs the actual check. Simple checks can just return `needsToBeFixed`. Checks which are looking at versions of an installed component (such as the version of node), can also return `version`, `versions` and `versionRange` to provide better information to be displayed in `react-native doctor` when running the check
Expand All @@ -113,7 +109,6 @@ This function will be used to try to fix the issue when `react-native doctor` is

This function will be used to try to fix the issue when `react-native doctor` is run and no more platform specific automatic fix function was provided.


## RunAutomaticFix interface

```ts
Expand Down Expand Up @@ -146,7 +141,6 @@ If an automated fix cannot be performed, this function should be used to provide

Provides information about the current system


### Examples of RunAutomaticFix implementations

A health check that requires the user to manually go download/install something. This check will immediately display a message to notify the user how to fix the issue.
Expand All @@ -165,7 +159,6 @@ async function needToInstallFoo({loader, logManualInstallation}) {
A health check that runs some commands locally which may fix the issue. This check will display a spinner while the exec commands are running. Then once the commands are complete, the spinner will change to a checkmark.

```ts

import { exec } from 'promisify-child-process';
async function fixFoo({loader}) {
await exec(`foo --install`);
Expand Down
13 changes: 7 additions & 6 deletions docs/init.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ npx react-native init ProjectName

> Note: If you have both `yarn` and `npm` installed on your machine, React Native CLI will always try to use `yarn`, so even if you use `npx` utility, only `react-native` executable will be installed using `npm` and the rest of the work will be delegated to `yarn`. You can force usage of `npm` adding `--npm` flag to the command.

> Note: for Yarn users, `yarn dlx` command similar to `npx` will be featured in Yarn 2.0: https://github.com/yarnpkg/berry/pull/40 so we’ll be able to use it in a similar fashion.
> Note: for Yarn users, `yarn dlx` command similar to `npx` will be featured in Yarn 2.0: <https://github.com/yarnpkg/berry/pull/40> so we’ll be able to use it in a similar fashion.

#### Installing `react-native` and invoking `init` command:

Expand All @@ -32,19 +32,19 @@ npx react-native@${VERSION} init ProjectName

#### Initializing project with custom template

It is possible to initialise a new application with a custom template with
It is possible to initialize a new application with a custom template with
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

UK v US English ;)

a `--template` option.

It should point to a valid package that can be installed with `yarn` or `npm` (if you're using `--npm` option).
It should point to a valid package that can be installed with `yarn` or `npm` (if you're using `--npm` option).

The most common options are:

- Full package name, eg. `react-native-template-typescript`.
- Absolute path to directory containing template, eg. `file:///Users/username/project/some-template`.
- Absolute path to a tarball created using `npm pack`.

For all available options, please check [Yarn documentation](https://classic.yarnpkg.com/en/docs/cli/add/#toc-adding-dependencies) and [Npm](https://docs.npmjs.com/cli/v6/commands/npm-install#synopsis).


```sh
# This will initialize new project using template from `react-native-template-typescript` package
npx react-native init ProjectName --template ${TEMPLATE_NAME}
Expand All @@ -70,7 +70,7 @@ react-native init ProjectName

> Note: It is not recommended, but you can also use legacy `react-native-cli` package to initialize projects using latest `react-native` versions.

# Creating custom template
## Creating custom template

Every custom template needs to have configuration file called `template.config.js` in the root of the project:

Expand All @@ -92,7 +92,8 @@ module.exports = {
```

## Post init script loading
The responsibility of showing the user progress of the "Executing post init script" goes to the implementor. In the cli, the `ora` package is used to display progress.

The responsibility of showing the user progress of the "Executing post init script" goes to the implementor. In the cli, the `ora` package is used to display progress.
For a simple usage in a custom template, `ora` can be used like this in a postInitScript :

```javascript
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -976,4 +976,48 @@ describe('findMatchingSimulator', () => {
version: 'iOS 12.1',
});
});

it('should return last booted simulator in list if none is defined (multi ios versions)', () => {
expect(
findMatchingSimulator(
{
devices: {
'com.apple.CoreSimulator.SimRuntime.iOS-16-0': [
{
udid: 'E1C0E452-2671-4EB5-B875-58E3DDC6EE81',
isAvailable: false,
state: 'Shutdown',
name: 'iPhone SE (3rd generation)',
},
{
lastBootedAt: '2022-09-21T11:38:28Z',
udid: '3AA90A75-D9C3-41A6-8DE1-43BE74A0C32B',
isAvailable: true,
state: 'Shutdown',
name: 'iPhone 14',
},
{
udid: '6F2FA108-AC7D-4D3C-BD13-56C5E7FCEDFE',
isAvailable: true,
state: 'Shutdown',
name: 'iPhone 14 Plus',
},
{
udid: 'D87B6D9E-F5B0-486F-BBE3-6EEC5A6D0C22',
isAvailable: false,
state: 'Shutdown',
name: 'iPhone 14 Pro',
},
],
},
},
null,
),
).toEqual({
udid: '3AA90A75-D9C3-41A6-8DE1-43BE74A0C32B',
name: 'iPhone 14',
booted: false,
version: 'iOS 16.0',
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,19 @@ import {Device} from '../../types';
* name can optionally include the iOS version in between parenthesis after the device name. Ex: "iPhone 6 (9.2)" in
* which case it'll attempt to find a simulator with the exact version specified.
*
* If the simulatorString argument is null, we'll go into default mode and return the currently booted simulator, or if
* none is booted, it will be the first in the list.
* If the simulatorString argument is null, we'll go into default mode and return the currently booted simulator,
* the last booted simulator or
* if none is booted, it will be the first in the list.
*
* @param simulators a parsed list from `xcrun simctl list --json devices` command
* @param simulatorString the string with the name of desired simulator. If null, it will use the currently
* booted simulator, or if none are booted, the first in the list.
* @param findOptions null or an object containing:
* ```
* {
* simulator: name of desired simulator
* udid: udid of desired simulator
* }
* ```
* If null, it will use the currently booted simulator, or if none are booted, the first in the list.
*/
function findMatchingSimulator(
simulators: {devices: {[index: string]: Array<Device>}},
Expand Down Expand Up @@ -75,6 +82,7 @@ function findMatchingSimulator(
continue;
}
const booted = simulator.state === 'Booted';
const lastBootedAt = simulator.lastBootedAt;
const simulatorDescriptor = {
udid: simulator.udid,
name: simulator.name,
Expand All @@ -92,17 +100,19 @@ function findMatchingSimulator(
if (simulator.name === simulatorName && !match) {
match = simulatorDescriptor;
}
// If no match found, use first available simulator that was booted before
if (!!lastBootedAt && !match) {
match = simulatorDescriptor;
}
// Keeps track of the first available simulator for use if we can't find one above.
if (simulatorName === null && !match) {
match = simulatorDescriptor;
}
}
}
}
if (match) {
return match;
}
return null;

return match ?? null;
}

export default findMatchingSimulator;
8 changes: 7 additions & 1 deletion packages/cli-platform-ios/src/commands/runIOS/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -141,11 +141,17 @@ async function runOnSimulator(

/**
* If provided simulator does not exist, try simulators in following order
* - iPhone 14
* - iPhone 13
* - iPhone 12
* - iPhone 11
*/
const fallbackSimulators = ['iPhone 13', 'iPhone 12', 'iPhone 11'];
const fallbackSimulators = [
'iPhone 14',
'iPhone 13',
'iPhone 12',
'iPhone 11',
];
const selectedSimulator = fallbackSimulators.reduce((simulator, fallback) => {
return (
simulator || findMatchingSimulator(simulators, {simulator: fallback})
Expand Down
1 change: 1 addition & 0 deletions packages/cli-platform-ios/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,5 @@ export interface Device {
availabilityError?: string;
type?: 'simulator' | 'device' | 'catalyst';
booted?: boolean;
lastBootedAt?: string;
}