I have followed a tutorial on how to handle a custom URL scheme. This is the way I have it set up.
componentDidMount() {
Linking.addEventListener('url', this.handleOpenURL);
}
componentWillUnmount() {
Linking.removeEventListener('url', this.handleOpenURL);
}
handleOpenURL(event) {
console.log(event.url);
this.abc()
}
abc() {
console.log("Hello World");
}
handleOpenUrl function is being called, but function abc isn't. I click on a today widget button which opens my app with a custom URL from background to foreground. I am getting the error message "this.abc is not a function" on my iPhone simulator. I am new to react native and not sure why this is. I think maybe the script hasn't loaded or something when I go from background to foreground in my app.
You have to bind handleOpenURL to your component.
Replace
handleOpenURL(event) {
console.log(event.url);
this.abc()
}
with
handleOpenURL = (event) => {
console.log(event.url);
this.abc()
}
Related
Someone, please help! 🙏
answerCall event is not firing in Android only. When we call displayIncomingCall and the incoming call shows on Android, and when we press the call end button, the endCall event is firing, but when we press the call-accept button, it stays there on the call screen and nothing happens. And the answerCall event is not firing.
Please help, we've tried all the solutions, nothing is working.
And this is my code:
// Register background handler
messaging().setBackgroundMessageHandler(async remoteMessage => {
console.log('Message handled in the background!', remoteMessage);
const callUUID = uuid.v4().toLowerCase()
const number = String(Math.floor(Math.random() * 100000))
RNCallKeep.displayIncomingCall(callUUID, number, number, 'number', false);
// await Linking.openURL("awesome://");
DeviceEventEmitter.addListener("answerCall", (payload) => {
console.log('answerCall', payload); // it doesn't run here
});
});
AppRegistry.registerComponent(appName, () => App);
This very helpful block, it helps me to implement. you can try this
https://blog.theodo.com/2021/03/react-native-incoming-call-ui-callkeep/
Register your event emitter outside the fcm background messaging class
I had to kill the native UI by calling the endCall method then navigate to the respective screen
messaging().setBackgroundMessageHandler(async remoteMessage => {
//your call trigger code piece
})
RNCallKeep.addEventListener('answerCall', async ({ callUUID }) => {
RNCallKeep.endCall(callUUID);
RNCallKeep.backToForeground();
RootNavigation.navigate("Call", {callUUID});
});
I need to logout my vue app after closing the tab of my app and clear all the credentials, and again when someone types the address I want a login page again
I think you can use this way
window.addEventListener('beforeunload', function (e) {
window.localStorage.clear();
});
Or more affective for Vue Js use
<script>
export default {
created() {
window.addEventListener('beforeunload', (event) => {
// Cancel the event as stated by the standard.
event.preventDefault();
// Chrome requires returnValue to be set.
event.returnValue = '';
});
}
}
</script>
We are using a javascript framework(Not react) to render the ui.
main.js
function logout(){
someObj.lock($('#container'), 'Logging out', true);
document.location = app.context + `/${appName}/signout.action?name=${appName}`;
}
function action(event){
switch(event.target){
case 'user:logout':
logout();
break;
case 'user:application':
document.location = app.context + "/";
break;
}
}
module.exports = {
action: action,
logout: logout
}
main.js along with another js file renders a navbar and a dropdown. My intention is to check whether title, dropdown in the navbar is rendered. Also I
am testing whether the browser redirect takes place in the right way.
action method takes an event object and based on its type, either performs signout('user:logout') or redirects to application page('user:application').
tests/main.js
import main from '../main';
describe("some title", () => {
it("some behavior", () => {
let event = {
target: 'user:logout'
}
let app = {
context: ''
}
let appName = 'Some app';
main.logout = jest.fn();
someObj = jest.fn();
someObj.lock = jest.fn();
document.location.assign = jest.fn();
main.action(event);
expect(main.logout).toHaveBeenCalled();
expect(document.location.assign).toBeCalledWith(app.context + `/${appName}/signout.action?name=${appName}`);
})
});
In the test file, I am trying to mock logout function. However it is executing someObj.lock function. someObj is not availabe to tests/main.js
and I am mocking it as well. I'm not sure whether I have to use spyOn instead. I'm using document.location.assign to test for browser redirects.
This test is not working and the terminal is displaying TypeError: Could not parse "/application name/signout.action?name=application name" as URL.
I have spent an entire day testing this feature but to no avail. I need some advice on the best way to test this feature.
Links explored: Intercept navigation change with jest.js (or how to override and restore location.href)
jest documentation
I am trying to add a global shortcut to my Electron app that will toggle showing/hiding it. My app is a menubar app built using maxogden/menubar and React.
I have the following code. I've left a couple of bits out just for brevity but this is how I have setup the global shortcuts.
I think it's important to note one of the tips on the maxogden/menubar Readme too:
Use mb.on('after-create-window', callback) to run things after your
app has loaded
const { globalShortcut } = require('electron');
const keyboardShortcuts = {
open: 'CommandOrControl+Shift+g',
close: 'CommandOrControl+Shift+g'
}
menu.on('after-create-window', () => {
globalShortcut.register(keyboardShortcuts.open, () => {
menu.window.show();
});
});
menu.on('after-show', () => {
globalShortcut.unregister(keyboardShortcuts.open);
globalShortcut.register(keyboardShortcuts.close, () => {
menu.window.hide();
});
});
menu.on('focus-lost', () => {
globalShortcut.unregister(keyboardShortcuts.close);
globalShortcut.register(keyboardShortcuts.open, () => {
menu.window.show();
});
});
Once the menubar has first been opened, my shortcut is registered and will work to show the app. However, the code I've implemented to unregister the shortcut, and re-register it to hide the app (when showing), doesn't seem to work.
I'm not sure if my code to reregister the shortcut is setup within the right event handler i.e after-show and focus-lost. I have a feeling that these event handlers I'm working within are related directly to my menu rather than menu.window. This would explain why the reregistration of the shortcut isn't happening, but I'm not sure.
Does anyone have any idea how I would sensibly set up a global shortcut toggle to open/close my menubar app?
From the menubar docs (https://github.com/maxogden/menubar) the menubar instance exposes the following methods:
{
app: the electron require('app') instance,
window: the electron require('browser-window') instance,
tray: the electron require('tray') instance,
positioner: the electron-positioner instance,
setOption(option, value): change an option after menubar is created,
getOption(option): get an menubar option,
showWindow(): show the menubar window,
hideWindow(): hide the menubar window
}
Using menu.showWindow() & menu.hideWindow() instead of menu.window.show() & menu.window.hide() will work.
I would further suggest that you use the built in events to manage your state, simplifying your code and implementation:
const { globalShortcut } = require('electron');
let isShown = false;
menu
.on('after-show', () => { isShown = true })
.on('after-hide', () => { isShown = false })
.on('focus-lost', () => { isShown = false });
globalShortcut.register('CommandOrControl+Shift+g', () => {
isShown ? menu.hideWindow() : menu.showWindow()
});
Is that possible create a function inside the WebView component, trigger React Native function?
It's possible but I'm not sure if it's the only way to do this.
Basically you can set an onNavigationStateChange event handler, and embed function call information in navigation url, here's an example of the concept.
In React Native context
render() {
return <WebView onNavigationStateChange={this._onURLChanged.bind(this)} />
}
_onURLChanged(e) {
// allow normal the natvigation
if(!e.url.startsWith('native://'))
return true
var payload = JSON.parse(e.url.replace('native://', ''))
switch(e.functionName) {
case 'toast' :
native_toast(e.data)
break
case 'camera' :
native_take_picture(e.data)
break
}
// return false to prevent webview navitate to the location of e.url
return false
}
To invoke native method, use this just trigger webview's navigation event and embed the function call information in URL.
window.location = 'native://' + JSON.stringify({
functionName : 'toast', data : 'show toast text'
})
use onMessage eventListner on <WebView/>
<WebView onMessage={onMessage} ... />
/** on message from webView -- window.ReactNativeWebView?.postMessage(data) */
const onMessage = event => {
const {
nativeEvent: {data},
} = event;
if (data === 'goBack') {
navigation.goBack();
} else if (data?.startsWith('navigate')) {
// navigate:::routeName:::stringifiedParams
try {
const [, routeName, params] = data.split(':::');
params = params ? JSON.parse(params) : {};
navigation.navigate(routeName, params);
} catch (err) {
console.log(err);
}
}
};
use this in your HTML to post message event
window.ReactNativeWebView?.postMessage("data")
You could inject a javascript function to the webview on load and then use onMessage to get response from the function you injected more info IN Here
yes it's possible , it existe a package for that react-native-webview-bridge.
I used it heavily in production and it works perfectly.
I am not sure, but my opinion is -
You can not. Webview can load only js part which we can define in Webview component. This is totally separate than other components, it is only just a viewable area.