I'm trying to debug my app on my android phone. When i first build my app with:
sudo react-native run-android
It builds perfectly, but when I changed my code and saved, it doesn't reload and I need to build over and over again with every change. HMR is active, and tried to press 'Reload' on my Dev Menu, but it doesn't reload. Here is extra information:
using Visual Studio Code.
Android version of my phone: 6.0.1
Connection:Via USB.
USB Debugging:Enabled and Allowed to this computer.
using Linux.
.babelrc
{
"presets": ["module:metro-react-native-babel-preset"],
"plugins": ["#babel/proposal-class-properties"]
}
package.json
{
"name": "hiworld",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"global": "^4.3.2",
"react": "16.6.1",
"react-native": "0.57.7"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-eslint": "^10.0.1",
"babel-jest": "23.6.0",
"babel-preset-flow": "^6.23.0",
"eslint": "^5.9.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^8.0.0",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-react": "^7.11.1",
"eslint-plugin-standard": "^4.0.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.50.0",
"react-test-renderer": "16.6.1"
},
"jest": {
"preset": "react-native"
},
"main": "index.js",
"author": "",
"license": "ISC",
"description": ""
}
if you need anything else, i'll edit this post.
Related
I'm currently building a React Native Android app and I'm trying to do a simple fetch inside my Code.
const response = await fetch('http://localhost:8081/assets/src/...',{
method: 'GET'
})
There is absolutely no output from this call. No Error, no Return. When logging the Metro Server, there is not even a request coming in. The code stalls completely. I tried it with an XMLHttpRequest but the result is almost identical. The only difference is that the server gets the request. onerror or onload are never called.
What I've tried so far:
android:usesCleartextTraffic="true" added to manifest xml
inlineRequires: true, in metro config
used XMLHttpRequest
<uses-permission android:name="android.permission.INTERNET" /> is set
I Really hope someone can help me!
My Current package.json:
{
"name": "myapp",
"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-native-async-storage/async-storage": "^1.17.7",
"#tensorflow/tfjs": "^3.18.0",
"#tensorflow/tfjs-react-native": "^0.8.0",
"async-storage": "^0.1.0",
"aws-sdk": "^2.1170.0",
"expo": "^45.0.0",
"expo-asset": "^8.5.0",
"expo-camera": "^12.2.0",
"expo-constants": "~13.1.1",
"expo-file-system": "^14.0.0",
"expo-gl": "^11.3.0",
"expo-gl-cpp": "^11.3.0",
"expo-modules-core": "^0.9.2",
"ffmpeg-kit-react-native": "^4.5.2",
"geolib": "^3.3.3",
"graphql": "^16.5.0",
"graphql-ws": "^5.9.1",
"react": "17.0.2",
"react-native": "0.68.2",
"react-native-base64": "^0.2.1",
"react-native-battery": "^0.1.18",
"react-native-device-info": "^10.0.0",
"react-native-fs": "^2.20.0",
"react-native-geolocation-service": "^5.3.0",
"react-native-maps": "^1.0.0",
"react-native-polyfill-globals": "^3.1.0",
"react-native-vision-camera": "^2.13.5",
"text-encoding": "^0.7.0"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/eslint-parser": "^7.18.2",
"#babel/plugin-proposal-class-properties": "^7.18.6",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "^7.32.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.67.0",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}
If your response from Postman and from the Browser looks good then its probably the fact that you are using localhost wich the Emulator cant understand.
Try to use your IP Adress (the one from your PC where the Emulator runs).
So instead of: fetch('http://localhost:8081/assets/src...
use: fetch('http://localIPaddressFromYourPC:8081/assets/src
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 />
i get no errors when i compile the APK in release but after i install it it crashes instant on load. Here are my packages:
{
"name": "etwow_rent",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"#babel/runtime": "^7.1.2",
"bundle": "^2.1.0",
"haversine": "^1.1.0",
"react": "16.5.0",
"react-native": "^0.57.1",
"react-native-camera": "^1.3.0",
"react-native-maps": "^0.22.0",
"react-native-qrcode-scanner": "^1.1.0",
"react-navigation": "^2.18.0"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.48.0",
"react-native-bundle": "0.0.4",
"react-test-renderer": "16.5.0"
},
"jest": {
"preset": "react-native"
}
}
maybe you forgot one of the steps for generating Signed APK ,Here is full Documentation of Generating Signed APK https://facebook.github.io/react-native/docs/signed-apk-android
You can go through it.
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
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/"
]
}
}