React_Native_Command

Asstes cmd is required to push new changes, apply before build apk

Android Asstes:-

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

iOS Asstes:-

react-native bundle --minify --entry-file index.js --platform ios --dev false --bundle-output ./ios/release/main.jsbundle --assets-dest ./ios/release

react-native run-ios --configuration Release

Run the code

Android run:-

react-native run-android

iOS run:-

react-native run-ios

For log

Android log:-

react-native log-android

iOS log:-

react-native log-ios

common issue or problem

Metro bundle problem:-

   1> delete node modules android(rm node_modules/) , ios(rm -rf node_modules/)
   2> install node modules using npm i
   3> react-native link
   4> using run cmd based on platform

sharedApplication is unavailable in iOS:-

   1> open xcode
   2> select library
   3> go to build-setting
   4> search with require only app-extension-safe api
   5> change yes to no
   6> rebuild the project

App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file.

NSAppTransportSecurity NSAllowsArbitraryLoads NSExceptionDomains example.com NSExceptionAllowsInsecureHTTPLoads NSIncludesSubdomains

Android build file clean

1> cd android 2> ./gradlew clean

iOS pod file update

1> cd ios 2> pod update

If pod install or use pod then use .xcworkspace to open xcode or else .xcodeproj

xcode clean project shortcut

1> command+shift+k 2> command+shift+option+k

Duplicate line in vscode ios shortcut

1>option+shift+down key

iOS release(https://www.christianengvall.se/react-native-build-for-ios-app-store/)

<!-- <key>NSAppTransportSecurity</key>
<dict>
	<key>NSAllowsArbitraryLoads</key>
	<true/>
	<key>NSExceptionDomains</key>
	<dict>
		<key>localhost</key>
		<dict>
			<key>NSExceptionAllowsInsecureHTTPLoads</key>
			<true/>
		</dict>
	</dict>
</dict> --> 

android release(https://facebook.github.io/react-native/docs/signed-apk-android.html#if-you-don-t-have-a-react-gradle-file / https://github.com/facebook/react-native/issues/4217)

1> def enableSeparateBuildPerCPUArchitecture = true
2> universalApk true
3> def enableProguardInReleaseBuilds = true
4> cd android
5> ./gradlew bundleRelease
6> ./gradlew assembleRelease (or) ./gradlew app:assembleRelease
7> cd..
8> react-native run-android --variant=release

npm cache:-

### `windows:- `
1> npm cache clean --force
2> npm cache verify
**3> npm start -- --reset-cache

Activity class {com.geeksynergy.winkwashuser/com.geeksynergy.winkwashuser.MainActivity} does not exist. error:-

adb uninstall "com.geeksynergy.winkwashuser"

clear react-natve cache

1>react-native start --reset-cache

check adb devices(Physical & Emulator)

1> adb devices

Commands

React Native CLI comes with following commands:

• bundle
• config
• init
• info
• install
• link
• log-android
• log-ios
• ram-bundle
• run-android
• run-ios
• start
• uninstall
• unlink
• upgrade

bundle

Usage:

react-native bundle <flag>

Builds the JavaScript bundle for offline use.

--entry-file <path>

Path to the root JS file, either absolute or relative to JS root.

--platform [string]

default: ios

Either "ios" or "android".

--transformer [string]

Specify a custom transformer to be used.

--dev [boolean]

default: true

If false, warnings are disabled and the bundle is minified.

--minify [boolean]

Allows overriding whether bundle is minified. This defaults to false if dev is true, and true if dev is false. Disabling minification can be useful for speeding up production builds for testing purposes.

--bundle-output <string>

File name where to store the resulting bundle, ex. /tmp/groups.bundle.

If you are planning on building a debug APK, that will run without the packager, by invoking ./gradlew assembleDebug you can simply set bundleInDebug: true in your app/build.gradle file, inside the project.ext.react map.

Alternatively if you want to run react-native bundle manually and then create the APK with ./gradlew assembleDebug you have to make sure to put the bundle into the right directory and give it the right name, so that gradle can find it.

For react-native versions 0.57 and above the bundle output path should be: android/app/build/generated/assets/react/debug/index.android.js

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

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

--bundle-encoding [string]

default: utf8

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

--max-workers [number]

Specifies the maximum number of workers the worker-pool will spawn for transforming files. This defaults to the number of the cores available on your machine.

--sourcemap-output [string]

File name where to store the sourcemap file for resulting bundle, ex. /tmp/groups.map.

--sourcemap-sources-root [string]

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

--sourcemap-use-absolute-path

default: false

Report SourceMapURL using its full path.

--assets-dest [string]

Directory name where to store assets referenced in the bundle.

If you are planning on building a debug APK that will run without the packager, see (--bundle-output)

Alternatively if you want to run react-native bundle manually and then create the APK with ./gradlew assembleDebug you have to make sure to put the assets into the right directory, so that gradle can find them.

For react-native versions 0.57 and above the --assets-dest path should be: android/app/build/generated/res/react/debug

The expected path for the assets can be found in the react.gradle file on the line that starts with resourcesDir =

--reset-cache

default: false

Removes cached files.

--read-global-cache

default: false

Try to fetch transformed JS code from the global cache, if configured.

--config [string]

Path to the CLI configuration file.

config

Usage:

react-native config

Output project and dependencies configuration in JSON format to stdout. Used by autolinking.

init

Available since 0.60.0

IMPORTANT: Please note that this command is not available through react-native-cli, hence you need to either invoke it directly from @react-native-community/cli or react-native package which proxies binary to this CLI since 0.60.0, so it's possible to use it with e.g. npx.

Usage (with npx):

npx react-native init <projectName> [options]

Initialize a new React Native project named in a directory of the same name. You can find out more use cases in init docs.

Options

--version [string]

Uses a valid semver version of React Native as a template.

--directory [string]

Uses a custom directory instead of <projectName>.

--title [string]

Uses a custom app title instead of <projectName>.

--template [string]

Uses a custom template. Accepts following template sources:

• an npm package name
• an absolute path to a local directory
• an absolute path to a tarball created using npm pack

Example:

npx react-native init MyApp --template react-native-custom-template
npx react-native init MyApp --template file:///Users/name/template-path
npx react-native init MyApp --template file:///Users/name/template-name-1.0.0.tgz

A template is any directory or npm package that contains a template.config.js file in the root with the following type:

type Template = {
  // Placeholder used to rename and replace in files
  // package.json, index.json, android/, ios/
  placeholderName: string;
  // Directory with template
  templateDir: string;
  // Path to script, which will be executed after init
  postInitScript?: string;
  // Placeholder used to rename app title inside values.xml and Info.plist
  titlePlaceholder?: string;
};

Example template.config.js:

module.exports = {
  placeholderName: 'ProjectName',
  titlePlaceholder: 'Project Display Name',
  templateDir: './template',
  postInitScript: './script.js',
};

--npm

Force use of npm during initialization

info

Usage:

react-native info

Get relevant version info about OS, toolchain and libraries. Useful when sending bug reports.

install

Usage:

react-native install <packageName>

Installs single package from npm and then links native dependencies. If install detects yarn.lock in your project, it will use Yarn as package manager. Otherwise npm will be used.

link

Will be replaced by autolinking soon.

Usage:

react-native link [packageName]

Links assets and optionally native modules.

Options

--all

Link all native modules and assets.

--platforms [list]

Pass comma-separated list of platforms to scope link to.

log-android

Usage:

react-native log-android

Starts logkitty displaying pretty Android logs.

log-ios

Usage:

react-native log-ios

Starts iOS device syslog tail.

ram-bundle

Usage:

react-native ram-bundle [options]

Builds JavaScript as a "Random Access Module" bundle for offline use.

Options

Accepts all of bundle commands and following:

--indexed-ram-bundle

Force the "Indexed RAM" bundle file format, even when building for Android.

run-android

Usage:

react-native run-android [options]

Builds your app and starts it on a connected Android emulator or device.

Options

--root [string]

Override the root directory for the Android build (which contains the android directory)'.

--variant [string]

default: 'debug'

Specify your app's build variant.

--appFolder [string]

default: 'app'

Specify a different application folder name for the Android source. If not, we assume is "app".

--appId [string]

Specify an applicationId to launch after build.

--appIdSuffix [string]

Specify an applicationIdSuffix to launch after build.

--main-activity [string]

default: 'MainActivity'

Name of the activity to start.

--deviceId [string]

builds your app and starts it on a specific device/simulator with the given device id (listed by running "adb devices" on the command line).

--no-packager

Do not launch packager while building.

--port [number]

default: process.env.RCT_METRO_PORT || 8081

--terminal [string]

default: process.env.REACT_TERMINAL || process.env.TERM_PROGRAM

Launches the Metro Bundler in a new window using the specified terminal path.

--tasks [list]

default: 'installDebug'

Run custom gradle tasks. If this argument is provided, then --variant option is ignored. Example: yarn react-native run-android --tasks clean,installDebug.

--no-jetifier

default: false

Do not run jetifier – the AndroidX transition tool. By default it runs before Gradle to ease working with libraries that don't support AndroidX yet.

run-ios

Usage:

react-native run-ios [options]

Builds your app and starts it on iOS simulator.

Options

--simulator [simulator_name]

default: iPhone 11

Explicitly set the simulator to use. Optionally include iOS version between parenthesis at the end to match an exact version, e.g. "iPhone 6 (10.0)".

Notes: If selected simulator does not exist, cli will try to run fallback simulators in following order:

• iPhone X
• iPhone 8

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:

react-native run-ios --simulator "iPhone XS Max"

--configuration [string]

Explicitly set the scheme configuration to use default: 'Debug'.

--scheme [string]

Explicitly set Xcode scheme to use.

--project-path [string]

Path relative to project root where the Xcode project (.xcodeproj) lives. default: 'ios'.

--device [string]

Explicitly set device to use by name. The value is not required if you have a single device connected.

--udid [string]

Explicitly set device to use by udid.

--no-packager

Do not launch packager while building.

--verbose

Do not use xcpretty even if installed.

--port [number]

Runs packager on specified port

Default: process.env.RCT_METRO_PORT || 8081

start

Usage:

react-native start [option]

Starts the server that communicates with connected devices

Options

--port [number]

Specify port to listen on

--projectRoot [path]

Path to a custom project root

--watchFolders [list]

Specify any additional folders to be added to the watch list

--assetExts [list]

Specify any additional asset extensions to be used by the packager

--sourceExts [list]

Specify any additional source extensions to be used by the packager

--platforms [list]

Specify any additional platforms to be used by the packager

--providesModuleNodeModules [list]

Specify any npm packages that import dependencies with providesModule

--max-workers [number]

Specifies the maximum number of workers the worker-pool will spawn for transforming files. This defaults to the number of the cores available on your machine

--transformer [string]

Specify a custom transformer to be used

--reset-cache, --resetCache

Removes cached files

--custom-log-reporter-path, --customLogReporterPath [string]

Path to a JavaScript file that exports a log reporter as a replacement for TerminalReporter

--verbose

Enables logging

--https

Enables https connections to the server

--key [path]

Path to custom SSL key

--cert [path]

Path to custom SSL cert

--config [string]

Path to the CLI configuration file

uninstall

Usage:

react-native uninstall <packageName>

Unlinks single package native dependencies and then uninstalls it from package.json. If uninstall detects yarn.lock in your project, it will use Yarn as package manager. Otherwise npm will be used.

unlink

Will be replaced by autolinking soon.

Usage:

react-native unlink <packageName> [options]

Unlink native dependency linked with the link command.

Options

--platforms [list]

Scope unlinking to specified platforms

upgrade

Usage:

react-native upgrade [npm-version]

Upgrade your app's template files to the specified or latest npm version using rn-diff-purge project. Only valid semver versions are allowed.

Using this command is a recommended way of upgrading relatively simple React Native apps with not too many native libraries linked. The more iOS and Android build files are modified, the higher chance for a conflicts. The command will guide you on how to continue upgrade process manually in case of failure.

Note: If you'd like to upgrade using this method from React Native version lower than 0.59.0, you may use a standalone version of this CLI: npx @react-native-community/cli upgrade.