How to run react-native using application on Android (using CRNA) - android

I have this a simple app which was created using CRNA which runs fine on iOS but fails on Android.
It seems to be related to the missing JSC on Android OS. I added the "android-jsc" (https://github.com/facebook/android-jsc) dep to the project but nothing changed. What am I missing?
Here is my package.json
{
"name": "app",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-plugin-module-resolver": "^2.7.1",
"eslint": "^4.10.0",
"eslint-plugin-react": "^7.4.0",
"jest-expo": "^28.0.0",
"jest-immutable-matchers": "^2.0.1",
"react-native-scripts": "1.14.0",
"react-test-renderer": "16.4.0"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "REACT_NATIVE_ENV=development react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "REACT_NATIVE_ENV=test node node_modules/jest/bin/jest.js --watch",
"test_ci": "REACT_NATIVE_ENV=test node node_modules/jest/bin/jest.js"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"jsc-android": "224109.x.x",
"expo": "^29.0.0",
"immutable": "^3.8.2",
"momentjs": "^2.0.0",
"prop-types": "^15.6.1",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-29.0.0.tar.gz",
"react-native-elements": "1.0.0-beta5",
"react-native-keyboard-aware-scroll-view": "^0.4.1",
"react-native-modal-datetime-picker": "^6.0.0",
"react-native-side-menu": "^1.1.3",
"react-native-vector-icons": "^4.6.0",
"react-navigation": "2.0.4",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-immutablejs": "^0.0.8",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",
"sentry-expo": "^1.9.0",
"validate": "^4.4.1"
}
}

jsc-android needs manual linking, and isn't compatible with Expo. See if all your dependencies are compatible with Expo. If not, you'll either have to detach to ExpoKit, or look for a compatible substitute.
Edit: Upon inspection, you are installing react-native-vector-icons directly. It needs manual linking, but is included on Expo. Check here for the instructions.

Related

Expo error Unexpected token '{'. import call expects exactly one argument

It was working fine until I installed some packages with --legacy-peer-deps. then I uninstalled those packages but the error remained
my package.json:
{
"name": "nativefetchdemo",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#react-native-async-storage/async-storage": "^1.17.7",
"#react-native-community/masked-view": "^0.1.11",
"#react-native-material/core": "^1.3.7",
"#react-navigation/native": "^6.0.11",
"#react-navigation/stack": "^6.2.2",
"axios": "^0.27.2",
"expo": "~45.0.0",
"expo-build-properties": "~0.2.0",
"expo-device": "~4.2.0",
"expo-notifications": "~0.15.4",
"expo-permissions": "~13.2.0",
"expo-status-bar": "~1.3.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-gesture-handler": "~2.2.1",
"react-native-paper": "^4.12.4",
"react-native-reanimated": "~2.8.0",
"react-native-safe-area-context": "4.2.4",
"react-native-screens": "~3.11.1",
"react-native-svg-transformer": "^1.0.0",
"react-native-web": "0.17.7",
"react-redux": "^8.0.2",
"redux": "^4.2.0",
"redux-devtools-extension": "^2.13.9",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.4.1",
"tailwindcss-react-native": "^1.7.10",
"twrnc": "^3.3.3"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"tailwindcss": "^3.1.8"
},
"private": true
}
I installed the packages which made this error appear. It was fine when only the current packages were there. but now the error won' go away.
Idk if it caused it but I used --legacy-peer-deps command line when installing packages because some packages had different versions of react
my babel.config.js:
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
'tailwindcss-react-native/babel',
'react-native-reanimated/plugin',
],
env: {
production: {
plugins: ['react-native-paper/babel', 'react-native-reanimated/plugin'],
},
},
};
};

React native apk release issue

I am new in react-native. I created one app it was working fine on local but when i run the release APK the app crash on change screen/navigate to another screen.
I have tried for days now to resolve this without success. Im not really sure what is causing this issue as when i run the debug version the app works fine no issues.
As soon as i open the installed signed APK the app crashes.
I am using the below packages.
{ "name": "testAPP", "version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-navigation/bottom-tabs": "^6.0.9",
"#react-navigation/drawer": "^6.1.8",
"#react-navigation/material-top-tabs": "^6.0.6",
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.2.5",
"axios": "^0.24.0",
"react": "17.0.2",
"react-native": "0.66.4",
"react-native-auth0": "^2.11.0",
"react-native-elements": "^3.4.2",
"react-native-gesture-handler": "^2.1.1",
"react-native-gifted-chat": "^0.16.3",
"react-native-linear-gradient": "^2.5.6",
"react-native-pager-view": "^5.4.9",
"react-native-paper": "^4.11.1",
"react-native-raw-bottom-sheet": "^2.2.0",
"react-native-reanimated": "^2.2.4",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.10.1",
"react-native-simple-modal": "^9.0.1",
"react-native-svg": "^12.1.1",
"react-native-svg-transformer": "^1.0.0",
"react-native-tab-view": "^3.1.1",
"react-native-vector-icons": "^9.0.0",
"react-redux": "^7.2.6",
"redux": "^4.1.2",
"redux-thunk": "^2.4.1"
},
"devDependencies": {
"#babel/core": "7.16.7",
"#babel/runtime": "7.16.7",
"#react-native-community/eslint-config": "2.0.0",
"babel-jest": "26.6.3",
"eslint": "7.14.0",
"jest": "26.6.3",
"metro-react-native-babel-preset": "0.66.2",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native",
"setupFiles": [
"./node_modules/react-native-gesture-handler/jestSetup.js"
]
}
}

Getting error - Unrecognized command "run-android", when running react native,

I get this error when try and run react native on my emulator, react-native run-android
error Unrecognized command "run-android".
My emulator is connected and working, any ideas?
Package.json:
{
"name": "iaapp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"name": "Inovative Anatomy",
"flow": "flow",
"test": "node ./node_modules/jest/bin/jest.js --watchAll"
},
"dependencies": {
"#babel/plugin-proposal-decorators": "^7.4.4",
"#react-native-community/async-storage": "^1.6.1",
"react": "16.8.5",
"react-dom": "^16.8.6",
"react-native": "0.59.10",
"react-native-circular-progress": "^1.1.0",
"react-native-component-fade": "^1.0.2",
"react-native-elements": "^1.1.0",
"react-native-fade": "^1.0.3",
"react-native-fade-in-view": "^1.0.5",
"react-native-gesture-handler": "^1.3.0",
"react-native-responsive-image": "^2.3.1",
"react-native-share": "^1.2.1",
"react-native-splash-screen": "^3.2.0",
"react-native-svg": "^9.5.1",
"react-native-vector-icons": "^6.6.0",
"react-native-view-shot": "^2.6.0",
"react-native-webview": "^5.12.1",
"react-native-webview-bridge": "^0.40.1",
"react-navigation": "^3.0.9",
"react-navigation-backhandler": "^1.3.2",
"react-navigation-transitions": "^1.0.11",
"react-redux": "^6.0.1",
"redux": "^4.0.1",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"#babel/cli": "^7.5.5",
"#babel/core": "^7.5.5",
"#babel/runtime": "^7.8.4",
"#react-native-community/eslint-config": "^0.0.7",
"#types/jest": "^24.0.18",
"#types/react": "^16.9.2",
"#types/react-native": "^0.60.14",
"#types/react-redux": "^7.1.7",
"#types/react-test-renderer": "^16.9.0",
"#types/redux-logger": "^3.0.7",
"#types/redux-persist": "^4.3.1",
"babel-jest": "^24.1.0",
"eslint": "^6.8.0",
"jest": "^24.1.0",
"metro-react-native-babel-preset": "0.54.1",
"prettier": "^1.18.2",
"react-native-dotenv": "^0.2.0",
"react-test-renderer": "16.8.6",
"redux-logger": "^3.0.6",
"tslint-react": "^4.2.0",
"typescript": "^3.6.3"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
}
}
I had this issue for a few minutes until I realized I was running the command in the wrong directory...
I'm putting this here in hopes that this will help some future dev from making a similar, simple, mistake.
try npx react-native run-android
if "npx react-native run-android" is not working goto "package.jason" file
and look over "scripts" debugger is there.
clicking on debugger gives you options on top of the screen.
select"react-native run-android".
You have to update your npm version... Use this command and try again...
npm install npm#latest -g
credits here

how to import the eth-lightwallet package to the react-native project?

First, I created a project: react-native init project, and
when I try to import * as lightwallet from 'eth-lightwallet' in my react-native project, I get an error see this image
Found a solution at github, but this did not solve the problem for me.
My package.json:
{
"name": "androidWallet",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"asn1": "^0.2.3",
"buffer": "^5.2.0",
"eth-lightwallet": "^3.0.1",
"history": "^4.7.2",
"native-base": "^2.7.2",
"node-libs-browser": "^2.1.0",
"node-libs-react-native": "^1.0.2",
"react": "16.4.1",
"react-native": "0.55.2",
"react-native-table-component": "^1.1.8",
"react-navigation": "^2.9.3",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"web3": "^0.20.6"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-jest": "23.4.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react-native": "4",
"jest": "23.4.2",
"react-test-renderer": "16.4.1"
},
"jest": {
"preset": "react-native"
}
}
The problem is that the eth-lightwallet depends on node core modules that isn't supported by React Native out of the box. The current workaround involves using
rn-nodeify in order to provide shims for React Native to use instead. See this issue for react native and see this open issue from eth-lightwallet.

is it possible to create a production build with react-native-mapbox-gl?

I have a location based app built with react-native and the react-native-mapbox-gl package (MapBox Maps SDK for React Native). The app runs on both Android and IOS devices with the commands react-native run-android and react-native run-ios respectively.
When i build a production release, the .ipa and .apk files are created successfully, but they fail to install on the devices
(without any specific error messages).
Is there some extra work that i need to do for building a production release with react-native-mapbox-gl?
this is my package.json
{
"name": "MyAppName",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"#mapbox/react-native-mapbox-gl": "^6.1.1",
"babel-eslint": "^6.1.2",
"eslint": "^3.7.1",
"eslint-config-airbnb": "^12.0.0",
"eslint-plugin-import": "^1.16.0",
"eslint-plugin-jsx-a11y": "^2.2.2",
"eslint-plugin-react": "^6.3.0",
"geolib": "^2.0.24",
"mobx": "^3.1.9",
"mobx-react": "^4.1.8",
"prop-types": "^15.6.1",
"react": "16.3.1",
"react-native": "^0.54.4",
"react-native-animatable": "^1.2.4",
"react-native-keyboard-aware-scroll-view": "^0.4.4",
"react-native-modal": "^5.0.0",
"react-native-simple-toast": "0.0.8",
"react-navigation": "^1.5.2",
"tcomb-form-native": "^0.6.11"
},
"devDependencies": {
"babel-jest": "22.2.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-react-native": "4.0.0",
"jest": "22.2.0",
"react-test-renderer": "16.2.0"
},
"jest": {
"preset": "react-native"
},
"rnpm": {
"assets": [
"./src/assets/fonts/"
]
}
}

Categories

Resources