I have a react native compnent that shows a popup message at the bottom of my mobile screen with data from my API http request. Trying to hide the numeric keyboard to be able to see the popup that is behind the keyboard. Calling keyboard.dismiss() when the API response comes does nothing.
Expecting keyboard to be dismissed while using import { Keyboard } from 'react-native' and calling the keyboard.dismiss() from the API response.
You are calling keyboard.dismiss() from an async () method, that's why the keyboard is not hiding.
You will have to call keyboard.dismiss() from the main thread.
Related
Is it possible to add code to callback function for componentWillUnmount that will stop callback from unmounting? I want to provide message to user that says "are you sure you want to quit?"
BackHandler module could solve your issue in android. For ios, you need to add gestureEnabled: false in react navigation props and bind alert function with back button on header.
If using webview for user login, we want to close the webview automatically after user submit their info. How to achieve that?
I have seen this being done when using Facebook sign in library, when user login with Facebook, it closes the website and calls the callback.
I am using 'react-native-inappbrowser-reborn'
you can do it use webView interact with js. firstly, when the user clicks the login button to submit their info, the html can post a message use window.postMessage("content") ., then in the react-native webview add onMessage handle.
<WebView
onMessage={this.onMessage}
...
/>
onMessage = (message) => {
// the message is you posted by window.postMessage
}
for react-native > 0.6; you should change to use window.ReactNativeWebView.postMessage.
Besides that, you can also use the injectJavaScripts. for more details about webview interact with js, you can read this artticle
I built a react-native app and if user clicks a link then app opens a default web browser and go to the link.
Linking.openURL(notification.link);
If user push back button from the android or ios devices, is there any way we can detect the back move?
You can add a listener for the same in react native.
There are total 4 listners for the same.
willFocus - the screen will focus
didFocus - the screen focused (if there was a transition, the transition completed)
willBlur - the screen will be unfocused
didBlur - the screen unfocused (if there was a transition, the transition completed)
Try the below code
componentWillMount(){
const didFocusSubscription = this.props.navigation.addListener(
'didFocus',
payload => {
console.warn('didFocus ', payload);
# just write your code/call a method here which you want to execute when the app comes from background
}
);
}
Dont forget to remove it when it is done.
componentWillUnmount(){
didFocusSubscription.remove();
}
More you can read here. Thanks :)
I have implemented firebase cloud messaging in my app successfully. But when a new notification appears, my app should open and then redirect to the notifications page from app.js.
The app is showing log info when the notification is clicked but when I try this.props.navigator.push("Notification"); in that function, it shows an error undefined is not an object(evaluating this.props.navigation.push)
I am guessing this is because I haven't yet initialised my stacknavigator but I don't know this for sure. I am using react-navigation in my app.
Here is the function in my app.js that gets called when the notification is clicked.
const notificationOpen = await firebase.notifications().getInitialNotification();
if (notificationOpen) {
const { title, body } = notificationOpen.notification;
console.log('getInitialNotification:');
this.props.navigator.push("Notification");
}
Also, the navigation code is not working even in my render function in app.js so I think props is not initialised in app.js.
Can anyone help me fix this and land me to the notification page?
Considering you have a route called Notification in your stack navigator and also your app.js has access to the navigator's navigation prop, then you might want to use this.props.navigation.navigate('Notification') in case you are using react-navigation.
The problem with your code is this.props.navigation doesn't have any method called push so it will surely give an undefined error. To know more about navigation prop consider going through this doc.
Please let me know the code. I tried from the Ajax Listener which is defined in the app.js.But I want to detect user's tap in my application by just writing some tap listener in app.js. Any idea what tap listener should I write? The AJAX listener is:
Ext.Ajax.on('requestcomplete',function(connection,options) {
Ext.Viewport.setMasked(false);
anyfunction();
});