I'm completely new to this technology and I can't manage to run the InAppBrowser from #ionic-native/in-app-browser. I've installed the respective plugin but it seems not to be working in the actual native app. This is my code:
import { InAppBrowser, InAppBrowserOptions } from "#ionic-native/in-app-browser";
const websiteUrl: string = "https://a-working-url.com"
const options: InAppBrowserOptions = {
zoom: 'no',
location: 'no',
toolbar: 'no',
hidden: 'yes',
hideurlbar: 'yes',
toolbarposition: 'bottom'
}
const browser = InAppBrowser.create(websiteUrl, '_self', options)
browser?.on('loadstop').subscribe(event => {
browser.insertCSS({ code: "body{color: red; padding: 10mm;" });
console.log('loadstop DONE!')
});
I get the following message in the Android log:
Msg: Native: InAppBrowserOriginal is not installed or you are running
on a browser. Falling back to window.open.
What am I missing?
Note: the reason why I don't use Browser from #capacitor/core is that I can't make the browser hide its navigation bar and there is no support for insertCSS which I actually need.
ok the issue is fixed. I noticed that the plugin wasn't installed properly..
I had to reinstall the plugin by:
npm install cordova-plugin-inappbrowser
Related
I am working with electron and reactjs and rendering the view with electron js, I am facing an Error: Illegal invocation: Function must be called on an object of type NativeImage after electron version upgrade. I can't downgrade the electron version as some functionality is not working in surface machines.
We have the functionality to capture screenshots but after the package upgrade facing an error while screenshot capture. I am using webview to render view in the electron application.
Here is the code how I am using to load view in webview.
const webview = <webview src="path" class="webview__3kBDE" style="width: 768px; height: 576px; margin-top: 0px; margin-left: auto; margin-right: auto;"></webview>
const rawImage = await webview.capturePage()
const URL = rawImage.toPNG()
When I am printing the rawImage I am getting blank object so while rawImage.toPNG() I am facing an error. If anyone has any idea how to fix this error that would be a great help. Thank you.
The Electron 10 release had major changes and if you are using the Electron 10 > the remote module is now disabled by default. To use the remote module, enableRemoteModule: true must be specified in WebPreferences:
const w = new BrowserWindow({
webPreferences: {
enableRemoteModule: true
}
})
For more details check here https://www.electronjs.org/docs/latest/breaking-changes#default-changed-enableremotemodule-defaults-to-false
I am currently stuck with a problem trying to fetch github repo data using the octokit npm package.
I use vite to run a dev server and when I try to make a request, the error that i get is:
Uncaught Error: Module "stream" has been externalized for browser compatibility and cannot be accessed in client code.
My React .tsx file looks like this:
import { Octokit, App } from 'octokit'
import React from 'react'
const key = import.meta.env.GITHUB_KEY
const octokit = new Octokit({
auth: key
})
await octokit.request('GET /repos/{owner}/{repo}', {
owner: 'OWNER',
repo: 'REPO'
})
export default function Repos() {
return (
<>
</>
)
}
I have redacted the information for privacy purposes.
If anyone knows how to resolve this issue with vite, please let me know!
Check first if this is similar to octokit/octokit.js issue 2126
I worked around this problem by aliasing node-fetch to isomorphic-fetch. No idea if it works for all usages within octokit, but works fine for my project.
You'll need to install the isomorphic-fetch dependency before making this config change.
// svelte.config.js
const config = { // ... kit: {
// ...
vite: {
resolve: {
alias: {
'node-fetch': 'isomorphic-fetch',
},
},
},
},
};
export default config;
Note: there are still questions about the support/development of octokit: issue 620.
I have a little issue here, and I cannot find what exactly is wrong. I would like to use prompt in my react-native app. But when I do so, then I get this error:
TypeError: null is not an object (evaluating 'PromptAndroid.promptWithArgs')
Let me show you some of my code.
At very start I have imported prompt like this:
import prompt from 'react-native-prompt-android';
Then I have this function which using prompt itself:
_handleAddProductPress() {
prompt (
'Enter product name',
'',
[
{ text: 'Cancel', style: 'cancel'},
{ text: 'OK', onPress: this.addNewProduct.bind(this)}
],
{
type: 'plain-text'
}
);
}
And finally, this function is called within my render function like this:
<Fab
style={{ backgroundColor: '#5067FF'}}
position="bottomRight"
onPress={this._handleAddProductPress.bind(this)}
>
<Icon name="add" />
</Fab>
I installed prompt like it says in documentation npm i react-native-prompt-android --save.
Really don't know why am I getting this error? I really can't see the reason. If anyone have idea or any lead how to solve this unhappy problem, I will be grateful.
Thanks a lot for any advice.
AV.
P.S.: I am using Expo as well but I don't think that would be a case.
A native code won't link correctly
To test:
import { NativeModules} from 'react-native';
console.log( { PromptAndroid: NativeModules.PromptAndroid } ) // { PromptAndroid: null }
Please sure that you rebuild an Android app after installing react-native-prompt-android
Also, you can remove a Gradle cache, then rebuilt the app again
# to clear cache
rm -rf android/app/build
npx react-native run-android
I have problem with connect NeDB to my react-electron app. Now I install NeDB on my project and connect him to electron.js file.
const Datastore = require('nedb');
let db = {};
db.students = new Datastore({
filename:'./students.json',
autoload: true
})
db.students.insert({name : "Putin V.V.", year: 1952});
Now I need connect this db to my app.js file.
How I can manipulate with this file on render part?
GitHub code
You can achive your idea by using ipc at Electron.
I posted an answer before. Please check the below.
how to communicate between react and electron
But here is the pre-requirements.
You should enable the nodeintegration when you are creating the BrowserWindow
So at your code, it should be like this
mainWindow = new BrowserWindow({
width: 1280,
height: 720,
minWidth: 900,
minHeight: 600,
show: false,
icon: "",
webPreferences: {
nodeIntegration: true
}
});
After this, you can use this ipcRenderer at renderer(your react app).
If you don't set this option. Then you will face the similar issue as below
ipcRenderer not receiving message from main process
trying Neutrino for the first time to jumpstart a react project. Want to add google fonts to it; tried passing google URLS in as a links array in config/html but no joy. suggestions?
There are two ways you could load Google fonts into your Web-based Neutrino project.
The easiest would probably be to install the font you would like from npm, such as Works Sans:
npm install --save typeface-work-sans
Which you can then import into your project with:
import 'typeface-work-sans';
The second method would involve the links way you mentioned, by adding an external stylesheet to your local Web-based .neutrinorc.js (using react for this example):
// .neutrinorc.js
module.exports = {
use: [
['#neutrinojs/react', {
html: {
links: [
{
href: 'https://fonts.googleapis.com/css?family=Work+Sans',
rel: 'stylesheet'
}
]
}
}]
]
};