Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@nrwl/react-native

Package Overview
Dependencies
Maintainers
1
Versions
1182
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@nrwl/react-native

React Native Plugin for Nx

  • 12.5.0-rc.1
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

React Native Plugin for Nx

License NPM Version Join the chat at https://gitter.im/nrwl-nx/community Join us @nrwl/community on slack

Table of Contents

Getting started

Create a new Nx workspace:

npx create-nx-workspace --cli=nx --preset=empty

Install React Native plugin

# Using npm
npm install --save-dev @nrwl/react-native

# Using yarn
yarn add -D @nrwl/react-native

Create an app

npx nx g @nrwl/react-native:app <app-name>

When using Nx, you can create multiple applications and themes in the same workspace. If you don't want to prefix your commands with npx, install @nrwl/cli globally.

Start the JavaScript bundler

npx nx start <app-name>

This will start the bundler at http://localhost:8081.

Run on devices

Make sure the bundler server is running.

Android:

npx nx run-android <app-name>

iOS: (Mac only)

npx nx run-ios <app-name> --install

Note: The --install flag installs Xcode dependencies before building the iOS app. This option keeps dependencies up to date.

Release build

Android:

npx nx build-android <app-name>

iOS: (Mac only)

No CLI support yet. Run in the Xcode project. See: https://reactnative.dev/docs/running-on-device

Test/lint the app

npx nx test <app-name>
npx nx lint <app-name>

E2e test the app

Setup
Install applesimutils (Mac only)

applesimutils is a collection of utils for Apple simulators.

brew tap wix/brew
brew install applesimutils
Install Jest Globally
npm install -g jest
Commands

A built app must exist before run test commands.

  • nx build-ios <app-name-e2e>: build the iOS app (Mac only)
  • nx test-ios <app-name-e2e>: run e2e tests on the built iOS app (Mac only)
  • nx build-ios <app-name-e2e> --prod and nx test-ios <app-name-e2e> --prod: build and run release version of iOS app. Note: you might need open the xcode project under iOS and choose a team under "Sign & Capabilities".
  • nx build-android <app-name-e2e>: build the android app
  • nx test-android <app-name-e2d>: run e2e tests on the built android app
  • nx build-android <app-name-e2e> --prod and nx test-android <app-name-e2e> --prod: build and run release version of android app.
Manually Add E2E Folder

A <app-name-e2e> folder is automatically generate when you create a react native app. However, if you want to add e2e folder manually, you need to:

Change Testing Simulator/Emulator

For iOS, in terminal, run xcrun simctl list to view a list of simulators on your Mac. To open your active simulator, run open -a simulator. In <app-name-e2e>/.detoxrc.json, you could change the simulator under devices.simulator.device.

For Android: in terminal, run emulator -list-avds to view a list of emulators installed. To open your emulator, run emulator -avd <your emulator name>. In <app-name-e2e>/.detoxrc.json, you could change the simulator under devices.emulator.device.

Using components from React library

You can use a component from React library generated using Nx package for React. Once you run:

npx nx g @nrwl/react-native:lib ui-button

This will generate the UiButton component, which you can use in your app.

import { UiButton } from '@myorg/ui-button';

CLI Commands and Options

Usage:

npx nx [command] [app] [...options]

start

Starts the JS bundler that communicates with connected devices.

--port [number]

The port to listen on.

run-ios

Builds your app and starts it on iOS simulator.

--port [number]

The port of the JS bundler.

--install

Install dependencies for the Xcode project before building iOS app.

--sync

Sync app dependencies to its package.json. On by default, use --no-sync to turn it off.

run-android

Builds your app and starts it on iOS simulator.

--port [number]

The port of the JS bundler.

--sync

Sync app dependencies to its package.json. On by default, use --no-sync to turn it off.

sync-deps

Sync app dependencies to its package.json.

--include [string]

A comma-separate list of additional packages to include.

e.g. nx sync-deps [app] --include react-native-gesture,react-native-safe-area-context

Learn more

Visit the Nx Documentation to learn more.

Contributing

To publish packages to a local registry, do the following:

  • Download Nx main repo. In the nx main repo, run yarn local-registry start in Terminal 1 (keep it running)
  • In the Nx main repo, run yarn local-registry clear in Terminal 2
  • In the current NX-react-native repo, run yarn local-registry enable in Terminal 3
  • Run yarn build in Terminal 3
  • Run yarn release 999.9.9 latest --local in Terminal 3
  • Run cd /tmp in Terminal 3
  • Run npx create-nx-workspace in Terminal 3

Debugging

  • If you got a pod install error like "None of your spec sources contain a spec satisfying the dependency", go to ios folder and run pod install --repo-update in your terminal.
  • If you got an error "error: Signing for "App" requires a development team. Select a development team in the Signing & Capabilities editor." when build for iOS, you need to open the xcode project under iOS and choose a team under "Sign & Capabilities".

Keywords

FAQs

Package last updated on 03 Jul 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc