I'm currently trying to implement some functionality in my react native app where I use information stored locally if the device is offline, and perform a fetch if the device is online.
I used NetInfo after reading this How to handle network failure in React-Native, when network is off, but unfortunately I ran into an error where NetInfo always returns offline. I found this github issue, which recommended that I change the host in RCTReachability.m from 'htpp://apple.com' to 'apple.com'. However, I couldn't find a file with that name in the project directory. Instead I found the only mention of 'apple.com' in any file, which was in RCTNetInfo.m, which was in the correct form.
Does anybody know a way to fix this problem? Or possibly a different way to go about performing one action if the device is online, and another if the device is offline?
Here's the relevant code:
fetchData() {
NetInfo.isConnected.fetch().done((isConnected) => {
console.log('First, is ' + (isConnected ? 'online' : 'offline'));
if ( isConnected )
{
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
store.save('contacts', responseData.feed.entry)
.then(() => store.get('contacts'))
.then((contacts) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(contacts),
isLoading: false
});
})
})
.catch((error) => { console.error(error); });
}
else
{
store.get('contacts')
.then(contacts => {
if (contacts == null)
{
this.setState({
dataSource: this.state.dataSource.cloneWithRows(CONTACT_DATA),
isLoading: false
});
}
else
{
this.setState({
dataSource: this.state.dataSource.cloneWithRows(contacts),
isLoading: false
});
}
})
}
});
}
Related
I am trying to delete an object within a firebase firestore database. This was built in react native expo. When I run the code shown below, the console displays "Doc deleted", however, The object I meant to delete still shows in firebase as well as within my applicaton. Any advice would be greatly appreciated.
async function deleteProperty() {
await firebase.firestore().collection("Properties").get().then((documentSnapshot => {
documentSnapshot.forEach((doc) => {
if (doc.data().address == route.params.address) {
firebase.firestore().collection("Properties").doc().delete().then(() => {
console.log("Doc deleted")
}).catch((error) => {
console.error("Error removing document: ", error)
})
}
})
}))
}
It looks like you have to pass document id to doc() specifically.
firebase.firestore().collection("Properties").doc(doc.id).delete().then(() => {
console.log("Doc deleted")
}).catch((error) => {
console.error("Error removing document: ", error)
})
ref: https://firebase.google.com/docs/firestore/manage-data/delete-data#web-version-8
I created a pwa site which is working totally fine in android devices both online and offline. But it is throwing error FetchEvent.respondWith received an error: Returned response is null when tried to load on IOS device with safari 13.0 if the mobile device is offline.
Here is my code snippet from service_worker.js
// install event
self.addEventListener('install', evt => {
evt.waitUntil(
caches.open(staticCacheName).then((cache) => {
return cache.addAll(assets);
})
);
});
// activate event
self.addEventListener('activate', (e) => {
e.waitUntil(
caches.keys().then((keyList) => {
return Promise.all(keyList.map((key) => {
if(key !== staticCacheName) {
return caches.delete(key);
}
}));
})
);
});
//fetch event
self.addEventListener('fetch', function(event) {
event.respondWith(
fetch(event.request).catch(function() {
return caches.match(event.request,{ignoreSearch: true});
})
);
});
Please, help me find the solution.
I dont get the token when i use my iphone. I get the token when i use the simulator.
I use nativescript-firebase-plugin and in main.js i do the firebase.init functions.
I have tried with everything i have found on this error, or i dont even know if its a common error. The full init looks like this
firebase.init({
showNotifications: true,
showNotificationsWhenInForeground: true,
onPushTokenReceivedCallback: (token) => {
console.log(`onPushTokenReceivedCallback: ${token}`);
appSettings.setString('firebasemessagekeytoken', token);
},
onMessageReceivedCallback: (message) => {
console.log(`onPushTokenReceivedCallback: ${message.title}`);
}
})
.then(() => {
console.log('[Firebase] Initialized');
})
.catch(error => {
console.log(`error: ${error}`);
});```
My app requires being connected to our server for any use. I wrote this function in the app component to prevent the user from using the app if the server is not available
app.component.ts
pingServer(){
this.api.pingServer().subscribe(result => {
if (result.success) {
return true;
}
else {
return false
}
},
error=>{
return false;
}
);
}
}
this function just makes the request to our server, which I verified is hitting the right address
initializeApp() {
console.log("initialize");
this.platform.ready().then(() => {
console.log("platform ready");
this.screenOrientation.lock('portrait');
console.log('Orientation is ' + this.screenOrientation.type);
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
let serverAlert = this.alertCtrl.create({
title: 'Error',
subTitle: 'We are unable to reach our servers at this time. Please try again later',
buttons: ['Dismiss']
});
setTimeout(() => {
if(this.pingServer){
console.log('pinged server successfully');
this.statusBar.styleDefault();
this.splashScreen.hide();
}
else{
console.log('unable to ping server');
return serverAlert.present();
}
}, 3000);
On the server side:
router.get( '/ping', ( req, res, next ) => {
return res.json( { success: true } );
} )
This worked fine when testing on the browser. However, when using iOS it says it pings successfully every time, meanwhile, the server isn't receiving the request.
On the simulator it does not crash and Alerts the error, but in production it is crashes as soon as fetch request suppose to be made and it is impossible to reopen the app until network connection is back (I turn on/off airplane mode for the testing)
here are the snippets of my code
componentWillMount: function(){
NetInfo.isConnected.addEventListener('change',this.handleConnectivityChange)
NetInfo.isConnected.fetch().done((data) => {
this.setState({
isConnected: data
})
console.log('this.state.isConnected: ', this.state.isConnected);
})
},
handleConnectivityChange: function(){
var connected = this.state.isConnected ? false : true
this.setState({isConnected: connected})
console.log('this.state.isConnected11: ', this.state.isConnected);
},
....
goToList: function(replace, listview){
console.log('this.state.isConnected: ', this.props.isConnected);
if (!this.props.isConnected){
AlertIOS.alert('Error', 'Please check your network connectivity')
this.props.removeFetching()
return
}
....
fetch(url)
.then((response) => response.json())
.then((responseData) => {
....
.catch((error) => {
StatusBarIOS.setNetworkActivityIndicatorVisible(false)
AlertIOS.alert('Error', 'Please check your network connectivity')
this.props.removeFetching()
})
.done()
I spent a lot of time trying to find a way to catch exceptions when using fetch() but I was unable to get it working (e.g. using .catch() or a try/catch blog didn't work). What did work was to use XMLHttpRequest with a try/catch blog instead of fetch(). Here's an example I based off of: https://facebook.github.io/react-native/docs/network.html#using-other-networking-libraries
var request = new XMLHttpRequest();
request.onreadystatechange = (e) => {
if (request.readyState !== 4) {
return;
}
if (request.status === 200) {
console.log('success', request.responseText);
var responseJson = JSON.parse(request.responseText);
// *use responseJson here*
} else {
console.warn('error');
}
};
try {
request.open('GET', 'https://www.example.org/api/something');
request.send();
} catch (error) {
console.error(error);
}