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 />
Related
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')
}
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 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
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.
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/"
]
}
}