update react-native-maps to work with create-react-native-app - react-native

When I run create-react-native-app I'm getting a peer dependency for react-native-maps to use react-native#0.54. I need to be able to use react-native#0.55.2 and react#16.3.1
Presented below is the package.json file for react-native-maps. Notice line 81,82,97 and 98
could someone show how to edit this json file and how to update react-native-maps?
When I tried with:
npm --depth 9999 update
I ended up getting tons of errors about duplicate packages.
{
"_from": "react-native-maps#0.21.0",
"_id": "react-native-maps#0.21.0",
"_inBundle": false,
"_integrity": "sha512-FkCCV1AyaT5ut5ZTKNIdFWBxRUXZovGTydy7U4Cyifj2dv0Q3Sv21B0Myj+aoGhJhvBJzxsU25dDGQN3TP7b/Q==",
"_location": "/react-native-maps",
"_phantomChildren": {
"babel-plugin-check-es2015-constants": "6.22.0",
"babel-plugin-syntax-async-functions": "6.13.0",
"babel-plugin-syntax-class-properties": "6.13.0",
"babel-plugin-syntax-flow": "6.18.0",
"babel-plugin-syntax-jsx": "6.18.0",
"babel-plugin-syntax-trailing-function-commas": "6.22.0",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-es2015-arrow-functions": "6.22.0",
"babel-plugin-transform-es2015-block-scoping": "6.26.0",
"babel-plugin-transform-es2015-classes": "6.24.1",
"babel-plugin-transform-es2015-computed-properties": "6.24.1",
"babel-plugin-transform-es2015-destructuring": "6.23.0",
"babel-plugin-transform-es2015-for-of": "6.23.0",
"babel-plugin-transform-es2015-function-name": "6.24.1",
"babel-plugin-transform-es2015-literals": "6.22.0",
"babel-plugin-transform-es2015-modules-commonjs": "6.26.2",
"babel-plugin-transform-es2015-parameters": "6.24.1",
"babel-plugin-transform-es2015-shorthand-properties": "6.24.1",
"babel-plugin-transform-es2015-spread": "6.22.0",
"babel-plugin-transform-es2015-template-literals": "6.22.0",
"babel-plugin-transform-flow-strip-types": "6.22.0",
"babel-plugin-transform-object-assign": "6.22.0",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-plugin-transform-react-display-name": "6.25.0",
"babel-plugin-transform-react-jsx": "6.24.1",
"babel-plugin-transform-react-jsx-source": "6.22.0",
"babel-plugin-transform-regenerator": "6.26.0",
"lodash": "4.17.10",
"react-transform-hmr": "1.0.4"
},
"_requested": {
"type": "version",
"registry": true,
"raw": "react-native-maps#0.21.0",
"name": "react-native-maps",
"escapedName": "react-native-maps",
"rawSpec": "0.21.0",
"saveSpec": null,
"fetchSpec": "0.21.0"
},
"_requiredBy": [
"/expo"
],
"_resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-0.21.0.tgz",
"_shasum": "005f58e93d7623ad59667e8002101970ddf235c2",
"_spec": "react-native-maps#0.21.0",
"_where": "d:\\atestbed\\native-react\\lecture4-contacts\\node_modules\\expo",
"author": {
"name": "Leland Richardson",
"email": "leland.m.richardson#gmail.com"
},
"bugs": {
"url": "https://github.com/airbnb/react-native-maps/issues"
},
"bundleDependencies": false,
"dependencies": {
"babel-plugin-module-resolver": "^2.3.0",
"babel-preset-react-native": "1.9.0"
},
"deprecated": false,
"description": "React Native Mapview component for iOS + Android",
"devDependencies": {
"babel-eslint": "^6.1.2",
"babel-preset-airbnb": "^1.1.1",
"eslint": "^3.3.1",
"eslint-config-airbnb": "^10.0.1",
"eslint-plugin-import": "^1.14.0",
"eslint-plugin-jsx-a11y": "^2.1.0",
"eslint-plugin-prefer-object-spread": "^1.1.0",
"eslint-plugin-react": "^6.1.2",
"gitbook-cli": "^2.3.0",
"lodash": "^4.17.2",
"prop-types": "^15.5.10",
"react": "^16.3.0-alpha.1",
"react-native": "^0.54"
},
"homepage": "https://github.com/airbnb/react-native-maps#readme",
"keywords": [
"react",
"react-native",
"react-component",
"map",
"mapview",
"google-maps",
"mapkit"
],
"main": "index.js",
"name": "react-native-maps",
"peerDependencies": {
"react": "^16.0",
"react-native": "^0.51 || ^0.52 || ^0.53 || ^0.54",
"prop-types": "^15.0 || ^16.0"
},
"repository": {
"type": "git",
"url": "git+https://github.com/airbnb/react-native-maps.git"
},
"rnpm": {
"android": {
"sourceDir": "./lib/android"
}
},
"scripts": {
"build": "npm run build:js && npm run build:android && npm run build:ios",
"build:android": "./gradlew :react-native-maps:assembleDebug",
"build:ios": "bundle install --path ./example/ios/bundles && bundle exec pod install --project-directory=./example/ios/",
"build:js": "exit 0",
"ci": "npm run lint",
"lint": "eslint ./",
"preversion": "./scripts/update-version.js",
"run:android": "./gradlew installDebug && npm run start:android",
"run:ios": "react-native run-ios --project-path ./example/ios",
"run:packager": "./node_modules/react-native/packager/packager.sh",
"start": "node node_modules/react-native/local-cli/cli.js start",
"start:android": "adb shell am start -n com.airbnb.android.react.maps.example/.MainActivity"
},
"version": "0.21.0"
}

ok, so if we just update the package.json file for react-native-maps in the following way:
under devDependencies:
"react": "^16.3.1",
"react-native": "^0.55.2"
under peerDependencies:
"react": "^16.3.1",
"react-native": "^0.55",
then back in the top project install eslint#4.0.0 and ajv#6.0.0 and add them to the dependencies in the package.json.

Related

Cannot find module from setup-jest.js

I have an Angular library that I'm working to update from Angular 11 to 13. Jest ran fine in 11 and 12, but now I'm having a lot of trouble with v13. I've followed the steps outlined here
The error I'm getting is as follows:
Cannot find module '#angular/core/testing' from 'node_modules/jest-preset-angular/setup-jest.js'
Require stack:
node_modules/jest-preset-angular/setup-jest.js
jest.setup.ts
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:306:11)
at Object.<anonymous> (node_modules/jest-preset-angular/setup-jest.js:2:24)
It seems odd that it's looking for angular core files within the setup-jest file.
jest.config.js
module.exports = {
preset: 'jest-preset-angular',
moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
snapshotSerializers: [
],
roots: ['src'],
moduleNameMapper: {
'^lodash-es$': '<rootDir>/node_modules/lodash/index.js'
},
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
testMatch: ['<rootDir>/src/**/*.spec.ts'],
transform: {
'^.+\\.ts?$': 'ts-jest',
'^.+\\.mjs?$': 'ts-jest',
},
transformIgnorePatterns: ['node_modules/(?!(jest-test))', 'node_modules/(?!.*\\.mjs$)', 'node_modules/(?!\\#angular)'],
coveragePathIgnorePatterns: ['<rootDir>/node_modules/'],
coverageReporters: ['json', 'text', 'html', 'cobertura'],
reporters: ['default', ['jest-junit', { outputDirectory: 'TestResults', outputName: 'jest-junit.xml' }]],
};
jest.setup.ts
import 'zone.js';
import 'zone.js/testing';
import 'jest-preset-angular/setup-jest';
package.json
{
"name": "my-lib-name",
"version": "12.0.2",
"description": "",
"main": "src/main.ts",
"scripts": {
"build": "npm run clean && npm run build:types && npm run build:umd && npm run build:esm2015 && npm run build:app",
"build:app": "tsc --project tsconfig.app.json",
"build:types": "tsc --project tsconfig.app.json --emitDeclarationOnly",
"build:umd": "tsc --project tsconfig.umd.json",
"build:esm2015": "tsc --project tsconfig.esm2015.json",
"clean": "rimraf dist",
"test": "jest --watch-all --detect-open-handles --reporters=default",
"lint": "eslint -c .eslintrc.js --ext .ts ./src",
"ci:test": "jest --ci --no-cache --maxWorkers=4 --detect-open-handles --coverage",
"postbuild": "node scripts/postbuild.js"
},
"author": "",
"license": "ISC",
"peerDependencies": {
"#types/lodash-es": "^4.17.4",
"date-fns": "^2.13.0",
"lodash-es": "^4.17.21",
"rxjs": "^6.5.5"
},
"devDependencies": {
"#angular-devkit/build-angular": "^13.3.9",
"#angular/animations": "^13.3.11",
"#angular/cdk": "^12.2.13",
"#angular/cli": "^13.3.9",
"#angular/common": "^13.3.11",
"#angular/compiler": "^13.3.11",
"#angular/compiler-cli": "^13.3.11",
"#angular/core": "^13.3.11",
"#angular/forms": "^13.3.11",
"#angular/material": "^12.2.13",
"#angular/platform-browser": "^13.3.11",
"#angular/platform-browser-dynamic": "^13.3.11",
"#types/chance": "^1.1.3",
"#types/estree": "^1.0.0",
"#types/jest": "^26.0.22",
"#types/lodash": "^4.14.168",
"#types/lodash-es": "^4.17.4",
"#typescript-eslint/eslint-plugin": "^4.14.2",
"#typescript-eslint/parser": "^4.14.2",
"chance": "^1.1.8",
"date-fns": "^2.13.0",
"eslint": "^7.19.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsdoc": "^31.6.0",
"eslint-plugin-prefer-arrow": "^1.2.3",
"jest": "^26.6.3",
"jest-junit": "^12.0.0",
"jest-marbles": "^2.5.1",
"jest-preset-angular": "^12.2.0",
"lodash-es": "^4.17.21",
"rxjs": "6.5.5",
"ts-jest": "^26.5.4",
"ts-loader": "^8.0.17",
"ts-node": "^9.1.1",
"tslib": "^2.4.0",
"typescript": "^4.6.4",
"zone.js": "~0.11.4"
},
"dependencies": {
"ng-packagr": "^12.2.7"
}
}
It seems that you are on an old version of Jest (version 26). Jest Preset Angular version 12 requires Jest version 28.
According to Jest Preset Angular's documentation, you are missing this setting in jest.config.js:
module.exports = {
globalSetup: 'jest-preset-angular/global-setup',
}
Make sure to review Jest Preset Angular's migration guide for Angular 13.

Why Jest coverage creates an .html file from every component?

I'm testing a React Native app.
I run jest --coverage and I get 233 files:
I still get the coverage file and I can see the coverage through index.html.
But why the other files.
Here is the package.json
{
"name": "entoutonika",
"version": "0.0.1",
"private": true,
"scripts": {
"8": "react-native run-ios --simulator=\"iPhone 8 Plus\" ",
"11": "react-native run-ios --simulator=\"iPhone 11 Pro Max\" ",
"ios": "react-native run-ios",
"and": "react-native run-android",
"se": "react-native run-ios --simulator=\"iPhone SE (2nd generation)\" ",
"ipad13": "react-native run-ios --simulator=\"iPad Pro (12.9-inch) (5th generation)\" ",
"air": "react-native run-ios --simulator=\"iPad Air (4th generation)\" ",
"start": "react-native start",
"test": "jest --runInBand --detectOpenHandles --forceExit",
"watch": "jest --watch",
"cov": "jest --coverage",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
"typecheck": "npx tsc",
"checkformat": "prettier --check \"**/*.{js,jsx,ts,tsx,json}\"",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json}\"",
"prepare": "npm run typecheck && lint-staged && husky install",
"postinstall": "npx typesync"
},
"dependencies": {
"#react-native-community/async-storage": "^1.12.1",
"#react-native-community/netinfo": "^7.1.9",
"#react-navigation/drawer": "^6.1.8",
"#react-navigation/elements": "^1.2.1",
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.2.5",
"firebase": "^9.4.1",
"formik": "^2.2.9",
"lottie-react-native": "^4.1.3",
"moment": "^2.29.1",
"react": "17.0.2",
"react-native": "0.66.1",
"react-native-bootsplash": "^4.0.2",
"react-native-code-push": "^7.0.4",
"react-native-gesture-handler": "^1.10.3",
"react-native-image-picker": "^4.3.0",
"react-native-reanimated": "^2.2.3",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.10.1",
"react-native-sound": "^0.11.1",
"react-native-vector-icons": "^9.0.0",
"react-redux": "^7.2.5",
"redux": "^4.1.1",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"typescript": "^4.4.4",
"yup": "^0.32.11"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/preset-typescript": "^7.16.7",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"#testing-library/jest-native": "^4.0.4",
"#testing-library/react": "^12.1.2",
"#testing-library/react-native": "^9.0.0",
"#types/babel__core": "^7.1.16",
"#types/eslint": "^7.28.2",
"#types/jest": "^26.0.24",
"#types/mocha": "^9.0.0",
"#types/react": "17.0.2",
"#types/react-native": "^0.65.0",
"#types/react-native-vector-icons": "^6.4.9",
"#types/react-redux": "^7.1.20",
"#types/react-test-renderer": "^17.0.1",
"#typescript-eslint/eslint-plugin": "^5.1.0",
"#typescript-eslint/parser": "^5.1.0",
"babel-jest": "^26.6.3",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-react": "^7.26.1",
"eslint-plugin-testing-library": "^5.0.5",
"husky": "^7.0.0",
"jest": "^26.6.3",
"jest-fetch-mock": "^3.0.3",
"lint-staged": ">=10",
"metro-react-native-babel-preset": "^0.66.2",
"react-test-renderer": "^17.0.2",
"redux-devtools-extension": "^2.13.9"
},
"resolutions": {
"#types/react": "^17"
},
"jest": {
"verbose": true,
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
"setupFilesAfterEnv": [
"#testing-library/jest-native/extend-expect"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/assetsTransformer.js",
"\\.(css|less)$": "<rootDir>/assetsTransformer.js"
},
"moduleDirectories": [
"node_modules",
"src"
],
"transform": {
"^.+\\.js$": "babel-jest"
},
"transformIgnorePatterns": [
"/node_modules/(?!native-base)/"
],
"setupFiles": [
"./setupJest.js"
]
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": "eslint --cache --fix",
"*.{js,jsx,ts,tsx, json}": "prettier --write"
},
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
}
What I do now is check the coverage, and then delete all the files.
I don't have this issue with React projects.
Is there something wrong with the configuration?
Those files are expected since are part of the repo itself so you can see lines of code covered by your tests etc.
You need to add the folder where those are generated into your .gitignore since the whole coverage shouldn't be tracked in your repo.

How to fix "Support for the experimental syntax 'classProperties' isn't currently enabled" error if it has been already enabled?

Im building a crossplatform monorepo application for Web, Android and iOS from this example https://github.com/brunolemos/react-native-web-monorepo and when I added React Native Base to my project I changed my config-overrides.js according to this guide https://docs.nativebase.io/docs/GetStarted.html for Web
But after that I got
SyntaxError: C:\Users\maksi\Desktop\ecmsk\node_modules\native-base\node_modules\react-native-vector-icons\lib\create-icon-set-from-fontawesome5.js: Support for the experimental syntax 'classProperties' isn't currently enabled error.
I tried adding loose option to #babel/plugin-proposal-class-properties plugin but that didn't work. And I also tried adding plugins to my package.json and that didn't work either.
package.json
{
"name": "web",
"version": "0.0.1",
"private": true,
"dependencies": {
"#types/history": "^4.7.2",
"#types/js-cookie": "^2.2.2",
"#types/react": "^16.8.23",
"#types/react-redux": "^7.1.1",
"#types/redux-api-middleware": "^3.0.1",
"connected-react-router": "^6.5.2",
"history": "^4.9.0",
"js-cookie": "^2.2.0",
"native-base": "^2.13.4",
"react": "16.8.4",
"react-art": "^16.8.6",
"react-dom": "16.8.4",
"react-native-elements": "^1.1.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "0.10.0",
"react-redux": "^7.1.0",
"react-router": "^5.0.1",
"react-scripts": "2.1.8",
"redux": "^4.0.4",
"redux-api-middleware": "^3.0.1"
},
"scripts": {
"compile": "tsc -b",
"prestart": "npm run compile",
"start": "concurrently \"npm run compile -- -w\" \"npm run _start\"",
"_start": "react-app-rewired start",
"prebuild": "npm run compile",
"build": "react-app-rewired build",
"pretest": "npm run compile",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.5.5",
"babel-plugin-react-native-web": "^0.11.5",
"concurrently": "*",
"customize-cra": "^0.4.1",
"react-app-rewired": "^2.1.3",
"typescript": "*"
}
}
config-overrides.js
const path = require('path');
const {
override,
addWebpackAlias,
babelInclude,
addBabelPlugins
} = require('customize-cra');
module.exports = override(
addWebpackAlias({
"react-native/Libraries/Renderer/shims/ReactNativePropRegistry": "react-native-web/dist/modules/ReactNativePropRegistry",
"react-native": "react-native-web"
}),
babelInclude([
path.resolve('src'),
path.resolve('../components/src'),
path.resolve('../../node_modules/native-base-shoutem-theme'),
path.resolve('../../node_modules/react-navigation'),
path.resolve('../../node_modules/react-native-easy-grid'),
path.resolve('../../node_modules/react-native-drawer'),
path.resolve('../../node_modules/react-native-safe-area-view'),
path.resolve('../../node_modules/react-native-vector-icons'),
path.resolve('../../node_modules/react-native-keyboard-aware-scroll-view'),
path.resolve('../../node_modules/react-native-web'),
path.resolve('../../node_modules/react-native-tab-view'),
path.resolve('../../node_modules/static-container'),
]),
addBabelPlugins(
"#babel/plugin-proposal-class-properties"
),
);
The problem might be the included paths. In my case I have it this way:
babelInclude([
path.resolve('node_modules/react-native-typing-animation'),
path.resolve('src')
])
Paths are relative to the config.overrides file.

react native bundle exception java.lang.IllegalStateException: Expected a string but was BEGIN_ARRAY at BundleDeltaClient

I am trying to run react-native RNTester demo app, but after the bundlingthe app crashes with below exception.
12-12 21:05:08.640 25808-25834/com.facebook.react.uiapp E/AndroidRuntime: FATAL EXCEPTION: OkHttp Dispatcher
Process: com.facebook.react.uiapp, PID: 25808
java.lang.IllegalStateException: Expected a string but was BEGIN_ARRAY
at android.util.JsonReader.nextString(JsonReader.java:408)
at com.facebook.react.devsupport.BundleDeltaClient$BundleDeltaJavaClient.processDelta(BundleDeltaClient.java:103)
at com.facebook.react.devsupport.BundleDeltaClient.processDelta(BundleDeltaClient.java:71)
at com.facebook.react.devsupport.BundleDownloader.processBundleResult(BundleDownloader.java:314)
at com.facebook.react.devsupport.BundleDownloader.access$200(BundleDownloader.java:37)
at com.facebook.react.devsupport.BundleDownloader$1.onResponse(BundleDownloader.java:174)
at okhttp3.RealCall$AsyncCall.execute(RealCall.java:153)
at okhttp3.internal.NamedRunnable.run(NamedRunnable.java:32)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1133)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:607)
at java.lang.Thread.run(Thread.java:760)
Package.json
{
"name": "react-native",
"version": "1000.0.0",
"description": "A framework for building native apps using React",
"license": "MIT",
"repository": {
"type": "git",
"url": "git#github.com:facebook/react-native.git"
},
"engines": {
"node": ">=8.3"
},
"prettier": {
"requirePragma": true,
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": false,
"jsxBracketSameLine": true,
"parser": "flow"
},
"jest": {
"transform": {
"^.+\\.(bmp|gif|jpg|jpeg|mp4|png|psd|svg|webp)$": "<rootDir>/jest/assetFileTransformer.js",
".*": "./jest/preprocessor.js"
},
"setupFiles": [
"./jest/setup.js"
],
"timers": "fake",
"moduleNameMapper": {
"^React$": "<rootDir>/Libraries/react-native/React.js"
},
"testRegex": "/__tests__/.*-test\\.js$",
"testPathIgnorePatterns": [
"/node_modules/",
"<rootDir>/template",
"Libraries/Renderer",
"RNTester/e2e"
],
"haste": {
"defaultPlatform": "ios",
"hasteImplModulePath": "<rootDir>/jest/hasteImpl.js",
"providesModuleNodeModules": [
"react-native"
],
"platforms": [
"ios",
"android"
]
},
"modulePathIgnorePatterns": [
"/node_modules/(?!react|fbjs|react-native|react-transform-hmr|core-js|promise)/",
"node_modules/react/node_modules/fbjs/",
"node_modules/react/lib/ReactDOM.js",
"node_modules/fbjs/lib/Map.js",
"node_modules/fbjs/lib/Promise.js",
"node_modules/fbjs/lib/fetch.js",
"node_modules/fbjs/lib/ErrorUtils.js",
"node_modules/fbjs/lib/URI.js",
"node_modules/fbjs/lib/Deferred.js",
"node_modules/fbjs/lib/PromiseMap.js",
"node_modules/fbjs/lib/UserAgent.js",
"node_modules/fbjs/lib/areEqual.js",
"node_modules/fbjs/lib/base62.js",
"node_modules/fbjs/lib/crc32.js",
"node_modules/fbjs/lib/everyObject.js",
"node_modules/fbjs/lib/fetchWithRetries.js",
"node_modules/fbjs/lib/filterObject.js",
"node_modules/fbjs/lib/flattenArray.js",
"node_modules/fbjs/lib/forEachObject.js",
"node_modules/fbjs/lib/isEmpty.js",
"node_modules/fbjs/lib/removeFromArray.js",
"node_modules/fbjs/lib/resolveImmediate.js",
"node_modules/fbjs/lib/someObject.js",
"node_modules/fbjs/lib/sprintf.js",
"node_modules/fbjs/lib/xhrSimpleDataSerializer.js",
"node_modules/jest-cli",
"node_modules/react/dist",
"node_modules/fbjs/.*/__mocks__/",
"node_modules/fbjs/node_modules/"
],
"unmockedModulePathPatterns": [
"node_modules/react/",
"Libraries/Renderer",
"promise",
"source-map",
"fastpath",
"denodeify",
"fbjs"
],
"testEnvironment": "node",
"collectCoverageFrom": [
"Libraries/**/*.js"
],
"coveragePathIgnorePatterns": [
"/__tests__/",
"/vendor/",
"<rootDir>/Libraries/react-native/"
]
},
"main": "Libraries/react-native/react-native-implementation.js",
"files": [
".flowconfig",
"android",
"cli.js",
"flow",
"flow-github",
"init.sh",
"scripts/ios-configure-glog.sh",
"scripts/ios-install-third-party.sh",
"scripts/launchPackager.bat",
"scripts/launchPackager.command",
"scripts/packager.sh",
"scripts/react-native-xcode.sh",
"jest-preset.json",
"jest",
"lib",
"rn-get-polyfills.js",
"Libraries",
"LICENSE",
"packager",
"react.gradle",
"React.podspec",
"React",
"ReactAndroid",
"ReactCommon",
"README.md",
"third-party-podspecs"
],
"scripts": {
"start": "node cli.js start",
"test": "jest",
"test-ci": "JEST_JUNIT_OUTPUT=\"reports/junit/js-test-results.xml\" jest --maxWorkers=2 --ci --testResultsProcessor=\"jest-junit\"",
"flow": "flow",
"flow-check-ios": "flow check",
"flow-check-android": "flow check --flowconfig-name .flowconfig.android",
"lint": "eslint .",
"prettier": "prettier \"./**/*.js\" --write",
"docker-setup-android": "docker pull reactnativeci/android-base:latest",
"docker-build-android-base": "docker build -t reactnativeci/android-base -f ContainerShip/Dockerfile.android-base .",
"docker-build-android": "docker build -t reactnativeci/android -f ContainerShip/Dockerfile.android .",
"test-android-run-instrumentation": "docker run --cap-add=SYS_ADMIN -it reactnativeci/android bash ContainerShip/scripts/run-android-docker-instrumentation-tests.sh",
"test-android-run-unit": "docker run --cap-add=SYS_ADMIN -it reactnativeci/android bash ContainerShip/scripts/run-android-docker-unit-tests.sh",
"test-android-run-e2e": "docker run --privileged -it reactnativeci/android bash ContainerShip/scripts/run-ci-e2e-tests.sh --android --js",
"test-android-all": "yarn run docker-build-android && yarn run test-android-run-unit && yarn run test-android-run-instrumentation && yarn run test-android-run-e2e",
"test-android-instrumentation": "yarn run docker-build-android && yarn run test-android-run-instrumentation",
"test-android-unit": "yarn run docker-build-android && yarn run test-android-run-unit",
"test-android-e2e": "yarn run docker-build-android && yarn run test-android-run-e2e",
"build-ios-e2e": "detox build -c ios.sim.release",
"test-ios-e2e": "detox test -c ios.sim.release --cleanup"
},
"peerDependencies": {
"react": "16.6.3"
},
"dependencies": {
"#babel/runtime": "^7.0.0",
"absolute-path": "^0.0.0",
"art": "^0.10.0",
"base64-js": "^1.1.2",
"chalk": "^2.4.1",
"commander": "^2.9.0",
"compression": "^1.7.1",
"connect": "^3.6.5",
"create-react-class": "^15.6.3",
"debug": "^2.2.0",
"denodeify": "^1.2.1",
"envinfo": "^5.7.0",
"errorhandler": "^1.5.0",
"escape-string-regexp": "^1.0.5",
"event-target-shim": "^1.0.5",
"fbjs": "^1.0.0",
"fbjs-scripts": "^1.0.0",
"fs-extra": "^1.0.0",
"glob": "^7.1.1",
"graceful-fs": "^4.1.3",
"inquirer": "^3.0.6",
"invariant": "^2.2.4",
"jest": "24.0.0-alpha.6",
"jest-junit": "5.2.0",
"lodash": "^4.17.5",
"metro": "0.50.0",
"metro-babel-register": "0.50.0",
"metro-core": "0.50.0",
"metro-memory-fs": "0.50.0",
"mime": "^1.3.4",
"minimist": "^1.2.0",
"mkdirp": "^0.5.1",
"morgan": "^1.9.0",
"node-fetch": "^2.2.0",
"node-notifier": "^5.2.1",
"npmlog": "^2.0.4",
"nullthrows": "^1.1.0",
"opn": "^3.0.2",
"optimist": "^0.6.1",
"plist": "^3.0.0",
"pretty-format": "24.0.0-alpha.6",
"promise": "^7.1.1",
"prop-types": "^15.5.8",
"react-clone-referenced-element": "^1.0.1",
"react-devtools-core": "^3.4.2",
"react-native-local-cli": "1.0.0-alpha.4",
"regenerator-runtime": "^0.11.0",
"rimraf": "^2.5.4",
"semver": "^5.0.3",
"serve-static": "^1.13.1",
"shell-quote": "1.6.1",
"stacktrace-parser": "^0.1.3",
"ws": "^1.1.5",
"xcode": "^1.0.0",
"xmldoc": "^0.4.0",
"yargs": "^9.0.0"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/generator": "^7.0.0",
"#reactions/component": "^2.0.2",
"async": "^2.4.0",
"babel-eslint": "9.0.0",
"detox": "9.0.4",
"coveralls": "^3.0.2",
"eslint": "5.1.0",
"eslint-config-fb-strict": "22.1.0",
"eslint-config-fbjs": "2.0.1",
"eslint-plugin-eslint-comments": "^3.0.1",
"eslint-plugin-flowtype": "2.43.0",
"eslint-plugin-jest": "21.8.0",
"eslint-plugin-prettier": "2.6.0",
"eslint-plugin-react": "7.8.2",
"eslint-plugin-react-native": "3.5.0",
"flow-bin": "^0.87.0",
"jest": "24.0.0-alpha.6",
"jest-junit": "5.2.0",
"prettier": "1.13.6",
"react": "16.6.3",
"react-native-dummy": "0.1.0",
"react-test-renderer": "16.6.3",
"shelljs": "^0.7.8"
},
"detox": {
"test-runner": "jest",
"runner-config": "RNTester/e2e/config.json",
"specs": "RNTester/e2e",
"configurations": {
"ios.sim.release": {
"binaryPath": "RNTester/build/Build/Products/Release-iphonesimulator/RNTester.app/",
"build": "xcodebuild -project RNTester/RNTester.xcodeproj -scheme RNTester -configuration Release -sdk iphonesimulator -derivedDataPath RNTester/build -UseModernBuildSystem=NO -quiet",
"type": "ios.simulator",
"name": "iPhone 8"
},
"ios.sim.debug": {
"binaryPath": "RNTester/build/Build/Products/Debug-iphonesimulator/RNTester.app/",
"build": "xcodebuild -project RNTester/RNTester.xcodeproj -scheme RNTester -configuration Debug -sdk iphonesimulator -derivedDataPath RNTester/build -UseModernBuildSystem=NO -quiet",
"type": "ios.simulator",
"name": "iPhone 8"
}
}
}
}
Steps to reproduce
Cloned https://github.com/facebook/react-native project directly.
RNTester (gradlew RNTester:android:app:installDebug).
Started the npm server (npm start). Bundling completed 100%.
As soon as it finish bundling app is crashing.
Device details:
Device tested on : Amazon Fire TV stick, Lenovo Yoga tab 10, Redmi
4A.
OS: Windows 10.
Thank you for the help.
In my case, the metro bundler was of my some other app already running and I was trying to build another app.
I solved it by closing the metro bundler and re-build the app
Open the android app with no packager running so you get the red box error about no bundle.
Open the developer menu and select "dev settings" at the bottom.
Untick "DEV MODE"
Start the packager and reload the app
This should really be fixed as instead of being able to jump in and make changes to the core I spent my time trying to just get the example app to run.

Unexpected use of reserved word 'import React-native

My bable.src file code is here
{
"presets": ["es2015"]
}
Package.json file code is here
{
"name": "Zoylo",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"postinstall": "rm ./node_modules/react-native/local-cli/core/__fixtures__/files/package.json",
"test": "jest"
},
"dependencies": {
"#ptomasroos/react-native-multi-slider": "0.0.11",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"jwt-node-decoder": "0.0.4",
"npm": "^5.3.0",
"prop-types": "^15.6.1",
"react": "^16.2.0",
"react-dom": "^16.3.2",
"react-native": "^0.52.0",
},
"devDependencies": {
"babel-eslint": "^8.0.3",
"babel-jest": "20.0.3",
"babel-plugin-transform-export-extensions": "^6.22.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-native": "^4.0.0",
"babel-preset-stage-2": "^6.24.1",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
}
I think its a bable issue. Its working fine just 1 day ago and after npm install i am facing this issue.
I got the answer. I had some problem in .babelrc file now here is my new .babelrc file
{ "env": { "test": { "presets": [ "env", "react", "es2015", "stage-2" ], "plugins": [ "transform-export-extensions" ], "only": [ "./**/*.js", "node_modules/jest-runtime" ] } }, "presets": [ "react-native" ] }
and need to run this command also.
watchman watch-del-all && rm -rf node_modules/ && npm cache clean --force && npm install && npm start -- --reset-cache