I want to display a modal when the network connection is offline.
i have this working function that says to me when the network is online or offline:
verifyNetworkConnection() {
this.networkService.isNetworkConnected
.pipe(distinctUntilChanged())
.subscribe(connected => {
if (connected) {
console.log('Online!');
} else {
console.log('Offline!');
this.screenService.createModal(LostConnectionComponent);
}
});
}
when the conncetion is offline, i want to display a modal, but i got this error in my console:
GET http://localhost:8100/0.js net::ERR_INTERNET_DISCONNECTED
GET http://localhost:8100/164.js net::ERR_INTERNET_DISCONNECTED
why i cant open a modal when its offline?
this is my create modal function:
public async createModal(component, componentProps?) {
const modal = await this.modalCtrl.create({
component,
componentProps
});
return await modal.present();
}
Related
I am using react native to make an app. I made an app that downloads manga books and views them when I start downloading it shows a progress bar which works fine but if I move to another page and come back to the downloading page I don't see the progress bar but the downloading is still going on in the background. I got a suggestion to use redux. I used redux and I modify the store whenever the downloading percentage changes but it causes my app to not respond. I am stuck here. what I do now.
Note: I am using the pure component.
here is the reducer code
const initailstate = {};
const reducerfunc = (state = initailstate, action) => {
switch (action.type) {
case "setpercentage":
state = { ...state };
state[action.manganame] == undefined
? (state[action.manganame] = {})
: null;
state[action.manganame][action.indexid] = {
chaptername: action.chaptername,
percentage: action.percentage,
manganame: action.manganame,
};
return state;
default:
console.log(state);
return state;
}
};
export default reducerfunc;
Here is the progress bar callback where I am dispatching it
callback = async (downloadProgress) => {
try {
if (Math.sign(downloadProgress.totalBytesExpectedToWrite) == 1) {
const progress = parseInt(
(downloadProgress.totalBytesWritten /
downloadProgress.totalBytesExpectedToWrite) *
100
);
this.props.dispatchsetpercentage({
type: "setpercentage",
percentage: progress,
indexid: this.indexofchapter,
chaptername: this.chaptername,
manganame: this.details.name,
});
} else {
}
} catch (e) {
console.log("error of callback " + e.message);
}
};
I think my UI stopped responding because it updates a lot of time and the app re-renders a lot of time
IS there any way to store the progress percentage globally and show it whenever the user comes back to the downloading page?
I want just like youtube or any other app which downloads things
they show the progress whenever we come back to the download page.
please help me :(
I am struggling a little with getting in app purchases working due to lack of examples that show how all the functionality links together
In my app, I have one in app purchase which basically allows the user to unlock some restricted functionality for life.
So at the start I want to check if the user have purchased the item before. (via get history)
If they have I unlock the functionality.
On my signed APK file (android) made in android studio, I have the following issues:
-the purchase never acknowledges (although it does when run via react-native run-android)
-if you press the purchase button twice the error "already connected to app store appears"
-I don't think its getting the purchase history when running from the signed file (although I can print out the result in the console in debug mode)
I am not entirely sure when to call await InAppPurchases.connectAsync(); so this could be one potential source of issues
So this is my code in my "Inner App" . My App component is just the InnerApp wrapped in the provider component from redux. The inner app contains all the navigation stacks so the purchase listener should be global.
e.g.
export default function App (){
...more code
return(
< Provider store={store} >
< InnerApp />
</ Provider >
}
Inner app code
import * as InAppPurchases from 'expo-in-app-purchases';
export default function InnerApp (){
.....some more code
//gets purchase history
const getHistory = async ()=>{
await InAppPurchases.connectAsync();
let found=false
const { responseCode, results } = await InAppPurchases.getPurchaseHistoryAsync();
if (responseCode === InAppPurchases.IAPResponseCode.OK) {
results.forEach(result => {
if (result.acknowledged) {
found =true
// this is just saving to local storage (in case they are using the app offline)
savePurchaseHistory(true)
}else{
savePurchaseHistory(false)
}
});
}
if( found){
//updates a state in the redux store
dispatch(purchaseIAP() )
}else if(responseCode === IAPResponseCode.USER_CANCELED ){
dispatch(removeIAP() )
savePurchaseHistory(false)
}
await InAppPurchases.disconnectAsync();
}
//listens for purchases
const setUpIAP = async() => {
// Set purchase listener
await InAppPurchases.connectAsync();
await InAppPurchases.setPurchaseListener(({ responseCode, results, errorCode }) => {
// Purchase was successful
if (responseCode === InAppPurchases.IAPResponseCode.OK) {
results.forEach(purchase => {
if (!purchase.acknowledged) {
// Process transaction here and unlock content...
dispatch(purchaseIAP() )
// Then when you're done
InAppPurchases.finishTransactionAsync(purchase, false);
}
});
}
// Else find out what went wrong
if (responseCode === InAppPurchases.IAPResponseCode.USER_CANCELED) {
} else if (responseCode === InAppPurchases.IAPResponseCode.DEFERRED) {
console.log('User does not have permissions to buy but requested parental approval (iOS only)');
} else {
console.warn(`Something went wrong with the purchase. Received errorCode ${errorCode}`);
}
});
}
//The in app stuff is called when the component is mounted
useEffect(() => {
setUpIAP()
getHistory()
}, [ ] })
Further in my app I have a button that calls the following function when pressed
const unlockModes = async () => {
try {
const items = Platform.select({
ios: [
'dev.products.all_modes'
],
android: ['all_modes'],
});
await connectAsync();
const products = await InAppPurchases.getProductsAsync(items);
if (products.results.length > 0) {
await InAppPurchases.purchaseItemAsync("all_modes");
}
} catch (err) {
alert("error occured while trying to purchase: " + err);
}
};
In the end I used the React Native IAP library and I couldn't get the expo one to work.
I think the Expo Version currently might just be bust.
Setting useGooglePlayCache will resolve your problem
## import ##
import {Share, Button } from 'react-native'
Function to share. This function need to have link to a page of this app which will be sent to another user, who can see the same page if the app is installed, and if it's not, then it must be redirected to play store.
const onShare = async () => {
try {
const result = await Share.share({
message:
'React Native | A framework for building native apps using React https://play.google.com/store/apps/details?id=com.test',
});
if (result.action === Share.sharedAction) {
if (result.activityType) {
// shared with activity type of result.activityType
} else {
// shared
}
} else if (result.action === Share.dismissedAction) {
// dismissed
}
} catch (error) {
alert(error.message);
}
};
button:
<Button onPress={onShare} title="Share" />
To add a feature to open the app from the link then we should have to implement the firebase dynamic-link library and use it in our app navigation to check whether we have received the link in our app then we have to set the initial route to open a specific screen otherwise fallback to play store link if app not installed the fallback will auto handled by the dynamic-link library.
checkout the doc.
https://rnfirebase.io/dynamic-links/usage
Q) How to I show a login page over the top of my standard slide menu app in Ionic 2?
My slide menu app is up and running, I just need that initial login page setup correctly.
Things I know:
How to show a modal page with nav.present().
How to dismiss a modal page.
Things I DON'T know:
Where to instantiate + show this page
How to have it accessible from any current page (i.e. if the user is logged out)
Note: this is for Ionic 2, not 1. I know there are many examples of this in Ionic 1, but they're not applicable thanks.
Any ideas? Thanks.
Solved: Using event listeners as follows:
1.) I have added a LoginPage to my app.ts:
import {Events} from 'ionic-framework/ionic';
import {LoginPage} from './pages/login/login';
Then, I made it the rootPage:
class MyApp {
rootPage: Type = LoginPage;
2.) Then, I register some listeners:
ngOnInit() {
this.subscribeToEvents();
}
ngOnDestroy() {
this.unsubscribeToEvents();
}
subscribeToEvents() {
this._events.subscribe('login:success', () => {
this.getNav().setRoot(TodosPage);
});
this._events.subscribe('logout:success', () => {
this.getNav().setRoot(LoginPage);
});
}
unsubscribeToEvents() {
this._events.unsubscribe('login:success', null);
this._events.unsubscribe('logout:success', null);
}
getNav() {
return this.app.getComponent('nav');
}
3.) Then, in my LoginPage:
<button full (click)="login()">Login</button>
login() {
// Do some auth here first...
this._events.publish("login:success", null);
}
I am building a Windows 10 Web App by Project Westminster. I want to create a button to invoke the native share capability, sharing some text I have. I have the below codes. Clicking on my button would call the share() function.
function share() {
Windows.ApplicationModel.DataTransfer.DataTransferManager.showShareUI();
}
function shareTextHandler(e) {
var request = e.request;
request.data.properties.title = "Share Text Example";
request.data.properties.description = "Demonstrates how to share.";
request.data.setText("Hello World!");
}
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// This app is newly launched. Register the app as share source.
var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
dataTransferManager.addEventListener("datarequested", shareTextHandler);
} else {
// TODO: This app was reactivated from suspension.
// Restore the app state here.
}
args.setPromise(WinJS.UI.processAll());
}
};
But now when I click on the button, it will share the screen captured on my app, not the text I intended to share. How can I correct the behaviour? Thanks!