Develop Reference

Error creating APK Build with React Native having EXPO

I'm trying to use to build an Android APK in my React Native app having expo installed. I've tried in many ways... and always had the same problem telling that some package from Android doesn't exist. This is only a example because the error is replicated with many Android packages.
> Task :expo-modules-core:compileReleaseJavaWithJavac
[stderr] /home/expo/workingdir/build/node_modules/expo-modules-core/android/src/main/java/expo/modules/core/ViewManager.java:3:
error: package android.content does not exist
[stderr] import android.content.Context;
I think this error could be related with versions or versions configuration. I don't know if it could be Java SKD, Expo or something like that.
If anyone could help me please!!
openjdk version "11.0.15" 2022-04-19 LTS
OpenJDK Runtime Environment Zulu11.56+19-CA (build 11.0.15+10-LTS)
OpenJDK 64-Bit Server VM Zulu11.56+19-CA (build 11.0.15+10-LTS, mixed mode)
package.json
{
"name": "AppNative",
"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 . --ext .js,.jsx,.ts,.tsx",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"format:all": "eslint . --fix && prettier . --write",
"prepare": "husky install"
},
"dependencies": {
"#react-navigation/native": "^6.0.10",
"#react-navigation/native-stack": "^6.6.2",
"#storybook/addon-knobs": "^6.4.0",
"#types/react-native": "^0.67.3",
"expo": "^45.0.6",
"expo-dev-client": "~1.0.0",
"expo-device": "~4.2.0",
"expo-notifications": "~0.15.4",
"expo-updates": "~0.13.4",
"native-base": "^3.4.7",
"react": "17.0.1",
"react-native": "0.68.2",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "^3.13.1",
"react-native-svg": "^12.1.1",
"react-native-webview": "^11.22.4",
"webpack-merge": "^5.8.0"
},
"devDependencies": {
"#babel/core": "^7.16.0",
"#babel/helper-builder-react-jsx-experimental": "^7.12.11",
"#babel/plugin-proposal-private-property-in-object": "^7.16.7",
"#babel/runtime": "^7.14.0",
"#react-native-community/eslint-config": "^2.0.0",
"#storybook/addon-actions": "^6.4.20",
"#storybook/addon-essentials": "^6.4.20",
"#storybook/addon-interactions": "^6.4.20",
"#storybook/addon-links": "^6.4.20",
"#storybook/addon-react-native-web": "^0.0.18",
"#storybook/react": "^6.4.20",
"#storybook/testing-library": "^0.0.9",
"#types/jest": "^27.4.1",
"#types/react": "^17.0.43",
"#types/react-test-renderer": "^17.0.1",
"#typescript-eslint/eslint-plugin": "^5.30.0",
"#typescript-eslint/parser": "^5.30.0",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.2",
"babel-plugin-react-native-web": "^0.17.7",
"eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0",
"eslint-config-standard": "^17.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-n": "^15.2.3",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-simple-import-sort": "^7.0.0",
"eslint-plugin-storybook": "^0.5.7",
"husky": ">=7",
"jest": "^26.6.3",
"lint-staged": ">=10",
"metro-react-native-babel-preset": "^0.66.0",
"prettier": "^2.7.1",
"react-dom": "^17.0.0",
"react-native-web": "^0.17.7",
"react-test-renderer": "17.0.1",
"typescript": "^4.6.3"
},
"resolutions": {
"#types/react": "^17"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
},
"lint-staged": {
"*.{js,ts,jsx,tsx,css,scss,md}": [
"prettier --write",
"eslint --fix"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
}

After 3 days of searching... I finally found a solution in this github issue.
https://github.com/expo/expo/issues/17862
As #Kudo says to solve the issue I was using another gradle build version. So I had to change it in my build.gradle file. Make sure is 7.0.4
android/build.gradle
dependencies {
classpath('com.android.tools.build:gradle:7.0.4')
}

Can't see stories on android emulator for react-native storybook

I'm building a mobile app with React Native and Storybook. But somehow, I can't see my component lists in the android emulator but can see my actual app screen.
ScreenShot
This is the screenshot of my android emulator and this is my actual app.
Versions and configurations
This is my package.json.
{
"name": "sushi",
"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 . --ext .js,.jsx,.ts,.tsx",
"storybook": "start-storybook -p 7007 -h 192.168.1.2",
"prestorybook": "rnstl",
"build-storybook": "build-storybook"
},
"dependencies": {
"#react-native-async-storage/async-storage": "^1.15.14",
"#react-navigation/bottom-tabs": "^6.0.9",
"#react-navigation/material-top-tabs": "^6.0.6",
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.2.5",
"react": "17.0.2",
"react-native": "0.66.4",
"react-native-config": "^1.4.5",
"react-native-pager-view": "^5.4.9",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.10.1",
"react-native-tab-view": "^3.1.1"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"#storybook/addon-actions": "^5.3",
"#storybook/addon-knobs": "^5.3",
"#storybook/addon-links": "^5.3",
"#storybook/addon-ondevice-actions": "^5.3.23",
"#storybook/addon-ondevice-knobs": "^5.3.25",
"#storybook/react-native": "^5.3.25",
"#storybook/react-native-server": "^5.3.23",
"#types/jest": "^26.0.23",
"#types/react-native": "^0.66.4",
"#types/react-test-renderer": "^17.0.1",
"#typescript-eslint/eslint-plugin": "^5.7.0",
"#typescript-eslint/parser": "^5.7.0",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.3",
"babel-plugin-module-resolver": "^4.1.0",
"eslint": "^7.14.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.66.2",
"react-dom": "17.0.2",
"react-native-storybook-loader": "^2.0.4",
"react-test-renderer": "17.0.2",
"typescript": "^4.4.4"
},
"resolutions": {
"#types/react": "^17"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
}
}
This is storbook/index.js
// if you use expo remove this line
import { AppRegistry, Platform } from "react-native";
import {
getStorybookUI,
configure,
addDecorator,
} from "#storybook/react-native";
import { withKnobs } from "#storybook/addon-knobs";
import "./rn-addons";
// enables knobs for all stories
addDecorator(withKnobs);
// import stories
configure(() => {
require("./stories/index");
}, module);
// Refer to https://github.com/storybookjs/react-native/tree/master/app/react-native#getstorybookui-options
// To find allowed options for getStorybookUI
const StorybookUIRoot = getStorybookUI({
// host: Platform.OS === "android" ? "10.0.2.2" : "0.0.0.0",
host: Platform.OS === "android" ? "192.168.1.2" : "0.0.0.0",
asyncStorage: require("#react-native-async-storage/async-storage").default,
});
// If you are using React Native vanilla and after installation you don't see your app name here, write it manually.
// If you use Expo you should remove this line.
AppRegistry.registerComponent("%APP_NAME%", () => StorybookUIRoot);
export default StorybookUIRoot;
How do I start storybook
Run adb reverse tcp:7007 tcp:7007 (This is only once)
Start android emulator
Run yarn storybook
Run yarn android
Error log
No error log on metro server and the terminal that storybook running.

You need to import the storybook in your ./App.js:
import StorybookUIRoot from './storybook';
Now add the component to return in the App function:
return <StorybookUIRoot />

Expo push notifications - Error: Couldn’t get GCM token for device

i try to implement Expo Notification on mt app,
very wired, in my last expo app it work well but now it’s doesn’t,
maybe because the versions update
this is show when i try the code from expo documentation
Error: Couldn't get GCM token for device
and this is the pacage.json:
My package.json:
{
"name": "blabla",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"jest-expo": "~27.0.0",
"react-native-scripts": "1.14.0",
"react-test-renderer": "16.3.1"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "jest"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"es6-symbol": "^3.1.1",
"expo": "^29.0.0",
"firebase": "^5.4.1",
"mobx": "^4.3.1",
"mobx-react": "^5.1.0",
"react": "16.3.1",
"react-native": "~0.55.2",
"react-native-animatable": "^1.3.0",
"react-native-ionicons": "^0.2.2",
"react-native-progress": "^3.5.0",
"react-native-simple-toast": "0.0.8",
"react-navigation": "^2.11.0"
}
}

Just fixed it by using expo start instead of react-natives-scripts start.
If u get expo-cli error, run npm install expo-cli --global.
You can find more discussion related to this error here

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/"
]
}
}

Jest testing :: Test failed and error routing to \react-native-vector-icons

Hi i have been trying to run 'npm test' faced a couple of issues like this with native-base but resolved by placing 'native-base-shoutem-theme|||tcomb-form-native' in transformIgnorePatterns key in my Package.json file.
but haven't found a solution with react-native-vector-icons as shown below
myapp#0.0.1 test D:\ReactWorkSpace\myapp
jest
PASS tests\index.ios.js
FAIL tests\index.android.js
● Test suite failed to run
D:\ReactWorkSpace\myapp\node_modules\native-base\node_modules\react-native-vector-icons\Ionicons.js:6
import createIconSet from './lib/create-icon-set';
^^^^^^
SyntaxError: Unexpected token import
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
at Object.<anonymous> (node_modules/native-base/dist/src/basic/IconNB.js:5:15)
at Object.<anonymous> (node_modules/native-base/dist/src/index.js:16:13)
Test Suites: 1 failed, 1 passed, 2 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 3.189s, estimated 8s
Ran all test suites.
npm ERR! Test failed. See above for more details
my package.json file is
{
"name": "myapp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"js-base64": "^2.1.9",
"moment": "^2.18.1",
"native-base": "^2.2.1",
"react": "16.0.0-alpha.12",
"react-native": "0.46.0",
"react-native-animatable": "^1.2.2",
"react-native-button": "^2.0.0",
"react-native-drawer": "^2.3.0",
"react-native-linear-gradient": "^2.2.0",
"react-native-material-design": "^0.3.7",
"react-native-material-kit": "^0.4.1",
"react-native-material-ui": "^1.12.0",
"react-native-vector-icons": "^4.2.0",
"react-navigation": "^1.0.0-beta.11",
"react-toolbox": "^2.0.0-beta.12",
"render-if": "^0.1.1"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "2.1.0",
"jest": "^20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native",
"transformIgnorePatterns": [
"node_modules/(?!react-native|native-base-shoutem-theme|#shoutem/animation|#shoutem/ui|tcomb-form-native)"
]
}
}

Add this to your package.json. It solves your problem :)
"jest": {
"preset": "react-native",
"transformIgnorePatterns": [
"/node_modules/(?!native-base)/"
],
...
}