I'm trying to make that the costumer will not be able to leave the app, even when he press on the home button.
My app is coded with react native, and I'm looking for solution by the code and not by configuration because this feature should work only for specific users...
Do you have any idea or any guide that can help me with that?
I was looking for the solution for a long time but nothing came up.
Thank you for the help
You can do this using BackHandler events. You have to put this code in your main navigation file. When user press back button they will exit from app u can customize ur logic for that for particular user etc...
componentWillMount() {
BackHandler.addEventListener('hardwareBackPress', function () {
BackHandler.exitApp();
}.bind(this));
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress');
}
Related
According to expos documentation, if I want user to navigate to another screen after user taps the notification received I should use deep linkedin. thats also the suggested method in all similar posts Ive seen. In my case I just do the following:
useEffect(()=> {
responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
if (response) {
navigation.navigate("Page 1")
}
});
}, [])
It works fine, when I have app open or closed. I wonder if I just dont understand something and there will be issues as everywhere I read deep linking. Thanks!
As the title, how can we start a react-native app from background to foreground, like we tap on push notification, it will show the app?
Thank you!
Look at https://github.com/geektimecoil/react-native-onesignal library it is easy to use and you can even specify what screen you want to open within your app with the
opened event listener
OneSignal.addEventListener('opened', (data) => {
if (data.notification.payload.title === 'New mensaje!') {
this.props.pushNewRoute('chat'); // open specific app screen (Redux)
}
});
I'm trying to open the default phone app from my react native app on a button press. when I searched the web I came to know about the deep linking.
As I'm new to react native I don't have an idea how this works. So can anyone help?
I suggest you to use canOpenUrl() to handle errors and then openUrl('tel:string_of_the_number_to_call'), something like this:
const phoneNumber = '1232456';
Linking.canOpenURL(`tel:${phoneNumber}`)
.then(supported => {
if (!supported) {
// handle the error
} else {
return Linking.openURL(`tel:${phoneNumber}`);
}
})
Hope this helps
Say there are two screens: screenA, screenB; these are managed using StackNavigator.
User clicks on a button in screenA that navigates the user to screenB. ScreenB has a form where they can edit their name, username, and more. I want to make it so that, after the user edits their personal information by editting the default values of TextInput in screenB, the user can just either click the backbutton in the navigation header or swipe left on the screen to return back to screenA.
In that process of returning back to screenA, I want to have a loading circle and not allow the user to return back to A until the the user receives confirmation from the API endpoint that edits the user's personal information that it worked.
User edits information on screenB.
User tries to navigate back to screenA by either clicking the back button in the header or by swiping right.
A loading circle appears, indicating that the app has sent a request to the API to edit their information accordingly. The user has not navigated to screenA at this point.
Request is successful, and the user is taken to screenA.
For me to do this, I need to be able to add some sort of function to the going back navigation that lets me do all this. Does anyone know how I can do this?
NOTE: I've already looked into writing my custom button for the backbutton but that still doesn't solve the problem of swiping right to navigate.
Please provide us with your code so that we can help better, what you need is an async function. Something like this:
async UploadInformation(username, password) {
let response = await fetch(url,{
method: method,
body: JSON.stringify({
'username':username},
'password':password),
headers: headers
});
return response;
}
Then in your backbutton
async back_button(){
//show your loading indicator
let r=await UploadInformation(this.username, this.password);
//remove your loading indicator
this.props.navigation.navigate('A');
}
By using async and await you are telling react to wait for the function to finish its job.
I am working on a react-native app where I want to auto Reload a page can anyone tell me how can we do that in react-native code,
I have three component in which one component has to drop down I just want to reload the current screen this is the image of my page in which when a person changes the language i want to reload the page
use setTimeout on componentDidMount() to reload page.
example:
setTimeout(() => {
this.setState({time: true})
}, 1000)
You can use forceupdate see https://reactjs.org/docs/react-component.html#forceupdate
forceupdate will re-render the component.
https://facebook.github.io/react-native/docs/refreshcontrol.html
this is the guide for react native Refresh Component, usually we create function _onRefresh(), and you can callit at some specific time intervel.
Hope this answer will help you.
I'm assuming you are talking about auto-refreshing altered components in the simulator.
You would want to Enable Hot Reloading in the iOS or Android simulator.
You can pull up the developer screen in the iOS simulator showing Hot Reloading by pressing CMD + D.
Simple precise and clear!
componentWillMount(){
this._subscribe = this.props.navigation.addListener('didFocus', () => {
this.LoadData();
//Put your Data loading function here instead of my this.LoadData()
});}