I am working on a react project using yarn dependencies .Need to add capacitor plugin to a react project.But there is an issue on adding capacitor plugin and link
capacitor to project.To create a capacitor plugin ,i use the command "npx #capacitor/cli plugin:generate" .Can I add the plugin usng yarn. I refer the document - https://capacitorjs.com/docs/plugins/creating-plugins
In capacitor.config.json just set "npmClient" : "yarn"
Here's a full example
{
"appId": "com.example.test",
"appName": "Example",
"bundledWebRuntime": false,
"npmClient": "yarn",
"webDir": "dist",
"plugins": {
"SplashScreen": {
"launchShowDuration": 3000
}
},
"cordova": {}
}
Should work. You already created the plugin via npx. So to test, substitute the npm commands in the docs with yarn. For local testing:
In your plugin folder
$ yarn link
Then in the capacitor project to test your plugin:
$ yarn link plugin-name
$ yarn install plugin-name
Related
module.exports = function () {
return {
"presets": ['module:metro-react-native-babel-preset'],
"plugins": [
["transform-inline-environment-variables", {
"include": [
"APP_ENV"
]
}]
]
}
};
This is my babel.config.js for my react-native project, and I'm trying to configure the transform-inline-environment-variables babel plugin. But whenever I run the app the environment variable is always undefined.
I run react-native start --reset-cache to clear the cache and run the project using the command APP_ENV=dev react-native run-ios.
But the variable is still undefined. What am I doing wrong here? The react-native version is 0.60.6
Try logging access directly (rather than destructuring):
console.log(process.env.APP_ENV)
Also, once you have the emulator connected, you can then run start, so:
yarn run-ios
Close the metro bundler terminal window and leave the emulator open
API_ENV=dev yarn start --reset-cache
This issue is covered in detail here.
Better still, replace your implementation with react-native-config.
I'm trying to link a large number of font files into my react-native project and I don't want to do it manually because of how many there are.
Most instructions I've found say to do this:
package.json
"rnpm": {
"assets": ["assets/fonts"]
}
and then react-native link
The problem is I can't run react-native link without a second argument as it causes problems with some of the libraries I have installed.
Is there a way I can specify the command so it only links assets?
first edit your package.json
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
then run
react-native link ./assets/fonts
source
I couldn't find a solution without running react-native link either. My solution was to commit everything, clean your stage, run react-native link, then check the git diff and remove the ones that is not your fonts. Works for me.
For example:
package.json
"rnpm": {
"assets": [
"./assets/Fonts/"
]
},
now you can use
react-native link
Here is what worked for me:
Create a configuration file react-native.config.js in the root project directory and add the code below:
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets/fonts'],
};
Then run npx react-native link
Here is the article: https://medium.com/#aravindmnair/add-custom-fonts-to-react-native-0-60-easily-in-3-steps-fcd71459f4c9
I setup a test with Detox, but when I launch it with detox test, the test starts but I receive this error:
Couldn't find preset "module:react-native-dotenv" relative to directory "/Users/iota/workspace/Project"
In the scene file I am trying to test I have this:
import { BASE_URL, GOOGLE_APP_ID } from 'react-native-dotenv';
My .babelrc file:
{
"presets": [
"module:react-native-dotenv",
"module:metro-react-native-babel-preset"
]
}
Any hint?
UPDATE
If I remove the line module:react-native-dotenv, I have a similar error for the module:metro-react-native-babel-preset
You need to install the presets using npm, so a
npm install --save-dev metro-react-native-babel-preset react-native-dotenv
should solve the issue.
I have an electron application using bower to resolve vendor deps and yarn for electron dependencies (node add-ons).
Because bower is deprecated I have migrated to yarn following this guide
how-to-migrate-away-from-bower
that uses bower-away
App launch fine but when I tried to build with electron-builder I got a problem with node module resolution.
$node_modules/.bin/build
• electron-builder version=20.8.1
• writing effective config file=dist/electron-builder-effective-config.yaml
Error: Unresolved node modules: angular, angular-animate, angular-aria, angular-messages, #bower_components/angular-translate, popper.js
at node_modules/electron-builder-lib/src/util/packageDependencies.ts:108:17
you should install of the package like this command
npm i angular --save
Use this answer: https://github.com/electron-userland/electron-builder/issues/2529#issuecomment-465185995
{
...
"dependencies": {
"bootstrap-vue": "^2.0",
"vue": "^2.6",
},
"optionalDependencies": {
"jquery": "1.9.1 - 3",
"popper.js": "^1.14.7"
}
}
I want to integrate relay with react native.
I am getting following error:
getBabelRelayPlugin is not defined while processing preset
I used following steps to integrate react native with relay
1.Back up your project.
2. Make sure you have your GraphQL server ready and your schema.json at hand too. For more details about the latter two visit the React-Relay project page.
Ensure that you’re using npm version 3 or greater.
3.If React Native's packager (react-native start) is running somewhere in the background, you should stop it now.
4.Run: watchman watch-del-all
5.Delete the ./node_modules directory from your project.
6.Edit your package.json file, make sure it has the following:
"dependencies": {
"react": "^0.14.7",
"react-native": "facebook/react-native",
"react-relay": "^0.7.3"
},
"devDependencies": {
"babel-core": "^6.6.4",
"babel-preset-react-native": "^1.4.0",
"babel-relay-plugin": "^0.7.3"
}
Babel version is especially important. Make sure that your project uses babel 6.5 or later, we need it for the passPerPreset feature in .babelrc file.
7.Create a new file .babelrc and place it in your project's directory:
{
"presets": [
"./scripts/babelRelayPlugin",
"react-native"
],
"passPerPreset": true
}
8.Create a new file in your project's directory called babelRelayPlugin.js with the following content:
const getBabelRelayPlugin = require('babel-relay-plugin');
const schema = require('./schema.json');
module.exports = { plugins: [getBabelRelayPlugin(schema.data)] };
9Copy your schema.json file to the project's directory too.
10.Run: npm install