React Native app error when running with Relay - reactjs

I have successfully generated create-react-native-app however, when I install relay along with graphql, I am getting error:
> react-native-scripts start
10:50:27 AM: Starting packager...
***ERROR STARTING PACKAGER***
Warning: Problem validating app.json: Unable to perform cache refresh for /home/vagrant/.cache/expo/schema-27.0.0.json: Error: certificate is not yet valid.
Error: Invalid sdkVersion. Valid options are 10.0.0, 11.0.0, 12.0.0, 13.0.0, 14.0.0, 15.0.0, 16.0.0, 17.0.0, 18.0.0, 19.0.0, 20.0.0, 21.0.0, 22.0.0, 23.0.0, 24.0.0, 25.0.0, 7.0.0, 8.0.0, 9.0.0
This is my package.json:
{
"name": "blah",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-plugin-relay": "^1.6.2",
"graphql": "^14.0.2",
"jest-expo": "~27.0.0",
"react-native-scripts": "1.14.0",
"react-test-renderer": "16.3.1",
"relay-compiler": "^1.6.2"
},
"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",
"relay": "relay-compiler --src ./ --schema ./db/schema.json"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^27.0.1",
"react": "16.3.1",
"react-dom": "^16.5.0",
"react-native": "~0.55.2",
"react-relay": "^1.6.2"
}
}
UPDATED
My app.json has:
{
"expo": {
"sdkVersion": "27.0.0"
}
}

Related

Unable to use webrtc in react native

I am trying to use webrtc in my react native app but whenever i install my app , it closes automatically this starts happening after I installed the react-native-webrtc package in my app ,before that my app was working
here's my package.json
{
"name": "demoApp",
"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": "16.11.0",
"react-native": "0.62.1",
"react-native-webrtc": "^1.75.0"
},
"devDependencies": {
"#babel/core": "^7.9.0",
"#babel/runtime": "^7.9.2",
"#react-native-community/eslint-config": "^1.0.0",
"babel-jest": "^25.2.6",
"eslint": "^6.8.0",
"jest": "^25.2.7",
"metro-react-native-babel-preset": "^0.59.0",
"react-test-renderer": "16.11.0"
},
"jest": {
"preset": "react-native"
}
}
I even tried 1.75.1 and 1.75.0 version of react-native-webrtc but still Same Issue
After install react-native-webrtc package,
you have to follow this guide.
Simply add this in your gradle.properties:
android.enableDexingArtifactTransform.desugaring=false
and enjoy!

Why is React Native app not installing after successful build with expo?

After successful building expo app, it wont install in any phone.
This may be very easy but have tried all i know to fix this but didn't work.
This is my craziest experience since i have been working on react...
Below are the steps i take from installing the app to building it
npm install expo-cli --global
expo init my-new-project
cd my-new-project => expo start
npm install -g exp
expo build:android //i choose "Let Expo handle the process!"
Here's my app.json
{
"expo": {
"name": "project",
"slug": "my-new-project",
"privacy": "public",
"sdkVersion": "35.0.0",
"platforms": [
"ios",
"android",
"web"
],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true,
"bundleIdentifier": "com.project.test"
},
"android": {
"package": "com.project.test"
}
}
}
Here's my package.json
{
"name": "project",
"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",
"test": "jest --watchAll"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#expo/samples": "~3.0.3",
"#expo/vector-icons": "^10.0.3",
"#react-navigation/web": "^1.0.0-alpha.9",
"expo": "^35.0.0",
"expo-asset": "^7.0.0",
"expo-constants": "^7.0.0",
"expo-font": "^7.0.0",
"expo-web-browser": "^7.0.0",
"react": "16.8.3",
"react-dom": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
"react-native-gesture-handler": "~1.3.0",
"react-native-web": "^0.11.7",
"react-navigation": "^3.12.0"
},
"devDependencies": {
"babel-preset-expo": "^7.0.0",
"jest-expo": "^35.0.0"
},
"private": true
}
Please any help?
Find your way to developer options in your phone settings and disable it as it shows in the picture above.
That's how I solved mine.
Hope that will work for you.

In react project scss file display empty code space

I am new on React. I have installed jqwidgets and node-sass packages.
I run: npm install --save node-sass
In JS component file:
import './style.scss';
in style.scss:
.welcome{
background-color: firebrick;
}
Then I open developer tools on browser style.scss I see:
module.exports = __webpack_public_path__ + "static/media/style.7388d000.scss";
//////////////////
// WEBPACK FOOTER
// ./src/components/Welcome/style.scss
// module id = ./src/components/Welcome/style.scss
// module chunks = 0
Why sass style code is not displaying?
packages.json:
{
"_from": "https://github.com/jqwidgets/my-app2/tarball/master",
"_id": "my-app2#1.0.0",
"_inBundle": false,
"_integrity": "sha512-TzCrV6rvvYS5En18r6qrM2T7Rz24DQomJCLmQ2j/V08534YPijH5CjTAKJcDI8vNHM+HgyNS3YFxDVd0mHWSqg==",
"_location": "/my-app2/my-app2",
"_phantomChildren": {},
"_requested": {
"type": "remote",
"raw": "my-app2#https://github.com/jqwidgets/my-app2/tarball/master",
"name": "my-app2",
"escapedName": "my-app2",
"rawSpec": "https://github.com/jqwidgets/my-app2/tarball/master",
"saveSpec": "https://github.com/jqwidgets/my-app2/tarball/master",
"fetchSpec": "https://github.com/jqwidgets/my-app2/tarball/master"
},
"_requiredBy": [],
"_resolved": "https://github.com/jqwidgets/my-app2/tarball/master",
"_shasum": "7d2a1b35e0af075c74da15c045aaddabd7a70e35",
"_spec": "my-app2#https://github.com/jqwidgets/my-app2/tarball/master",
"_where": "C:\\Users\\Evoiu\\AppData\\Roaming\\npm\\node_modules\\my-app2",
"bundleDependencies": false,
"dependencies": {
"axios": "^0.18.0",
"react": "16.4.1",
"react-dom": "16.4.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"react-scripts": "1.1.4"
},
"deprecated": false,
"description": "Please refer to its documentation: - [Getting Started](https://github.com/jqwidgets/my-app2/blob/master/README.md#getting-started) - [jQWidgets React Documentation](http://www.jqwidgets.com/reactjs-components-documentation/)",
"name": "my-app2",
"private": true,
"scripts": {
"build": "react-scripts build",
"eject": "react-scripts eject",
"start": "react-scripts start",
"test": "react-scripts test --env=jsdom"
},
"version": "1.0.0",
"devDependencies": {
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0"
}
}
I spend so much hour, Idont know where is problem... :(
If I create new project with only node-sass, then its working. Deam it why its not working with jqwidgets.
https://www.jqwidgets.com/reactjs-components-documentation/documentation/create-jqwidgets-react-app/index.htm
have you install jqwidgets-react-app with this?
I haven't tested it myself.

I can't get my React UI package to compile javascript automatically without building

I have a workspace with 2 packages. One package is the UI Components (#ui/core), the other package is Storybook (#ui/storybook).
I'm new to configuring Webpack and Babel, so I've probably made a silly mistake.
#ui/core contains a basic button component and Storybook is setup with nothing special.
Workspace
package.json
{
"name": "#ui/workspace",
"private": true,
"description": "A Collection of UI Components",
"version": "1.0.0",
"keywords": [
"ui",
"react"
],
"scripts": {},
"license": "UNLICENSED",
"dependencies": {},
"devDependencies": {
"#babel/cli": "7.2.3",
"#babel/core": "7.2.2",
"#babel/node": "7.2.2",
"babel-loader": "8.0.4",
"classnames": "2.2.6",
"cross-env": "5.2.0",
"react": "16.7.0",
"react-dom": "16.7.0",
"react-jss": "8.6.1",
"rimraf": "2.6.2",
"webpack": "4.28.3"
},
"peerDependencies": {
"react": "*",
"react-dom": "*"
},
"workspaces": [
"packages/*"
]
}
UI Components
package.json
{
"name": "#ui/core",
"version": "1.0.0",
"description": "A Collection of UI Components",
"internal": "true",
"keywords": [
"react",
"ui"
],
"main": "./src",
"scripts": {
"build": "yarn build:es2015 && yarn build:copy-files",
"build:copy-files": "babel-node --config-file ../../babel.config.js ./scripts/copy-files.js",
"build:es2015": "cross-env NODE_ENV=production babel --config-file ../../babel.config.js ./src --out-dir ./build --ignore *.test.js",
"prebuild": "rimraf ./build",
"release": "yarn build && npm publish build"
},
"peerDependencies": {
"react": "16.7.0",
"react-dom": "16.7.0"
},
"dependencies": {
"#babel/plugin-transform-react-constant-elements": "7.2.0",
"#babel/plugin-transform-react-inline-elements": "7.2.0",
"#babel/plugin-transform-runtime": "7.2.0",
"#babel/preset-env": "7.2.3",
"#babel/preset-react": "7.0.0",
"babel-plugin-transform-react-pure-class-to-function": "1.0.1",
"babel-plugin-transform-react-remove-prop-types": "0.4.21",
"babel-preset-react": "6.24.1",
"normalize.css": "8.0.1",
"prop-types": "15.6.2"
},
"engines": {
"node": ">=8.0.0"
},
"license": "UNLICENSED",
"devDependencies": {}
}
Storybook
package.json
{
"name": "#ui/storybook",
"version": "1.0.0",
"description": "Storybook Output of the UI Components",
"keywords": [
"react",
"storybook",
],
"scripts": {
"build": "build-storybook -c ./config -o ./build",
"prebuild": "rimraf ./build",
"start": "start-storybook -p 9001 -c ./config"
},
"peerDependencies": {
"react": "16.7.0",
"react-dom": "16.7.0"
},
"dependencies": {},
"engines": {
"node": ">=8.0.0"
},
"license": "UNLICENSED",
"devDependencies": {
"#ui/core": "1.0.0",
"#storybook/react": "4.1.4"
}
}
When I start Storybook (yarn start), I receive the following error:
ERROR in ../ui/src/button/button.js 52:6
Module parse failed: Unexpected token (52:6)
You may need an appropriate loader to handle this file type.
|
| return (
> <ComponentProp
This problem doesn't exist if I build the #ui/core project and make package.json main point to ./build instead of ./src.
Node: v10.15.0
NPM: v6.4.1
Also, massive kudos to Storybook. Best tool ever!

Plugin/Preset files are not allowed to export objects, only functions - v 0.56.0

I'm facing this issue in react native v-0.56.0. Please Help me out. When i am downgrading to 50 or 49 it's working fine, but on latest version it's giving this error when creating build !
cmd npm run ios
My babelrc
{
"presets": [
"babel-preset-react-native-stage-0/decorator-support"
],
"env": {
"development": {
"plugins": [
"transform-react-jsx-source"
]
}
}
}
And my package.json
{
"name": "my-project",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-preset-react-native": "^5.0.0",
"babel-preset-react-native-stage-0": "^1.0.1",
"jest": "^23.3.0",
"jest-react-native": "^18.0.0",
"react-test-renderer": "16.3.1"
},
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"test": "jest"
},
"jest": {
"preset": "react-native"
},
"dependencies": {
"react": "^16.3.0",
"react-native": "^0.56.0",
"react-redux": "^5.0.7",
"redux": "^4.0.0"
}
}

Resources