@redeemedrobert wrote:

I’m trying to drill app state down through component props in app.tsx, but get a typescript error:

Type '{ dailyObd: RouteComponentProps<any, StaticContext, {}>; }' is not assignable to type 'IntrinsicAttributes & obds & { children?: ReactNode; }'.
  Property 'dailyObd' does not exist on type 'IntrinsicAttributes & obds & { children?: ReactNode; }'.ts(2322)

Here’s a breakdown of what I’ve got:
app.tsx:

const App: React.FC = () => {
  const [dailyObds, setDailyObds] = useState<dailyObds>([{
    title: 'First',
    completed: false
  }])

  return (
    <IonApp>
      <IonReactRouter>
        <IonSplitPane contentId="main">
          <Menu />
          <IonRouterOutlet id="main">
            <Route path="/page/today" render={(dailyObds)=>(<Today dailyObd={dailyObds} /> )} />
            <Redirect from="/" to="/page/Inbox" exact />
          </IonRouterOutlet>
        </IonSplitPane>
      </IonReactRouter>
    </IonApp>
  )
}

interface dailyObd{
    title: string
    completed: boolean
}
interface dailyObds extends Array<dailyObd>{}

export default App;

Here’s Today.tsx:

const Today: React.FC = ({ dailyObd })=>{
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start"><IonMenuButton /></IonButtons>
          <IonTitle>Today</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonText>Some stuff will go here... eventually.</IonText>>
      </IonContent>
    </IonPage>
  )
}

I set strict to false in tsconfig.json, but I still can’t compile because of the listed error. What am I missing here? Why is it seemingly so difficult to add a prop to a component with TypeScript? Thanks for any help, I am new to Ionic/React/TypeScript.

Posts: 1

Participants: 1

Read full topic

@askiba wrote:

the question is in the subject.
i want to use snapchat’s snapkit.
the only component that is not for web is snapchat’s creative kit and thats what i need for my project.

should i develop fully native or is there a away around that?

Posts: 1

Participants: 1

Read full topic

@Fmrga3 wrote:

The application works perfectly in the browser “ionic serve”, even in ios “npx cap open ios” works perfectly, but when I pass it to Android Studio “npx cap open android” it opens the IDE and when trying to run it I get the following error:

Unsupported Modules Detected: Compilation is not supported for following modules: capacitor-cordova-android-plugins. Unfortunately you can’t have non-Gradle Java modules and Android-Gradle modules in one project.

And the app stops…

I’m just trying to create a map where the location is obtained (geolocation)

Posts: 1

Participants: 1

Read full topic

@GhanshyamB1992 wrote:

I have created one component i want to use on all page but when i am register on 2nd page it’s gives error

Error: Type DatePickerControlComponent is part of the declarations of 2 modules: DashboardPageModule and TrackingPageModule! Please consider moving DatePickerControlComponent to a higher module that imports DashboardPageModule and TrackingPageModule. You can also create a new NgModule that exports and includes DatePickerControlComponent then import that NgModule in DashboardPageModule and TrackingPageModule.

how i can register commonly for all page, i had register in app.module but that not working

Posts: 1

Participants: 1

Read full topic

@pdj wrote:

스크린샷 2020-05-16 오후 4.59.22520×896 189 KB

as above image , is it possible fo my app to be listed on share pop up on iOS / android?

and how can I do it.

Posts: 1

Participants: 1

Read full topic

@kkabra wrote:

I have a use case where I use toggle button to update the attendance of students. I have implemented (ionChange) event to record the User’s response. Also, I have a button to mark all the students as present/ absent. While I try to do so the (ionChange) event is triggered twice leading to an error. Can anybody suggest a solution to bypass an event when tow events are called subsequently?

Below code snippet shows my UpdateAttendance.html:

Button to mark all the students as present :

<ion-button shape=“round” size=“small” color=“success” (click)=“buttonToggled(’’,$event)”>
All Present

List of students:

{{getInitial(record.name)}}

{{record.name}} Room No - {{record.roomNo}}

buttonToggle() method is as below:

this.attendanceRecord.forEach(record => {
record.isPresent = true;
console.log(record); });

Thank you in advance,!

Posts: 1

Participants: 1

Read full topic

@tkoivisto wrote:

Hey! Is it possible to do swipeable views with tabs using react and Ionic5? Ionic + Angular is using super-tabs, but I haven’t found anything similar for Ionic + React. Here is example what I want to do: https://react-swipeable-views.com/demos/demos/ (second demo “Tabs”). I can use that, but rather I use native Ionic components. This is also similar with angular https://www.youtube.com/watch?v=8qUywCzR-vo

Posts: 1

Participants: 1

Read full topic

@WeiLi512 wrote:

I can’t find the React IonPage component api documentation.

Posts: 1

Participants: 1

Read full topic

@softwarekoch wrote:

Hi,

after some questions in this forum i decided to use Angular instead of ReactJs for my first IONIC App.
After reading a nice book about ionic, i decided to stay with a PWA.
In that book was written, that Cordova somehow is replaced with Capacitor now.

Is there a sample somewhere, how to create a splash screen for building a PWA by using CAPCITOR and IONIC version 5 ?

Best regards
Dietmar

Posts: 1

Participants: 1

Read full topic

@Pratikjaiswa15 wrote:

I am building a simple add to cart with ionic. I have 5 tabs. The 5th tab displays added products to the cart.

On the other 4 tabs, the user can add to the cart. (post request is made to API)

On ion-tab-button on tab-bar, I am displaying count that comes from API’s like below

tabbar.html

<ion-tab-bar>
// other 4 tabs
  <ion-tab-button tab="tab5" (click)="tab5()">
      <ion-icon class="icon" name="cart-outline"></ion-icon>
      <ion-badge class="badge" color="danger">{{count | async}}</ion-badge>
      <ion-label>Cart</ion-label>

   </ion-tab-button>
  </ion-tab-bar>

tabbar.ts

getcartCount(id) { // called on ngOnInit

    this.count = this.cartService.getCartCount(id).pipe(
      map(data => data.count)
    )
  }

service.ts

getCartCount (id): Observable<any> {
    return this.http.get<any>(this.cart_url + 'users/' + id + '/carts/count')

  }

Now when the user adds or deletes a product to/from the cart I want to make an API request on the tab bar page to update count. But I am getting how to do it? Do I need to use ngRx state management or some other way around?

Thank you in advance.

Posts: 1

Participants: 1

Read full topic

@Dotorimook wrote:

Hi.
I’d like to make the color of the scroll bar in IonContent to be black (at least dark) in dark mode because contents are bright.
However, in dark mode, the scroll bar of the IonContent is always white.

I set the meta tag of the color-scheme to be light to make my app just as same as in the light mode although the user set the device in dark mode. But it didn’t work.

<meta name="color-scheme" content="light" />

What should I do?
Please give some help.
Thanks.

Posts: 1

Participants: 1

Read full topic

@Ab20 wrote:

Hi,

I’m using the ionic react tabs template for my project. I’ve created 5 routes and out of 5 in my two components, they call APIs on componentDidMount and componentWillRecieveProps.

Now the issue is IonRouterOutlet is not unmounting components on switching between tabs so it’s calling other components API calls. How can I prevent this? can we change the default behaviour of IonRouterOutler so it will unmount the previous component on the switch?

Posts: 1

Participants: 1

Read full topic

@xonted wrote:

i’ve just started a new ionic-react project.
it takes few seconds to start using ionic -serve command-.
but when i try to edit any simple thing and save it, then -[react-scripts] Compiling…- takes for ever to finish.
what i did is as follow:
create new ionic app using -ionic start- then choose react type and tabs template.
open the created project in visual studio code and run -ionic serve- it works normally.
then in src/pages/Tab3.tsx i just change Tab 3 to Tab 33.
trying to save it and it never end compiling.
here are used versions:
npm: ‘6.13.4’,
ionic 5.4.16,
Node.js 12.14.0.
any help please?

Posts: 1

Participants: 1

Read full topic

@pdemilly wrote:

I have used deploy appflow succesfully for some time but now I would like to implement a beta channel for my app (ionic v3).

My app is currently setup as auto on Production channel. I wwould like to add an option in the app to try the beta channel version. Since many of the doc seems outaded, I am trying my best to understand the steps but it is not working. The first thing I see in my console which is surprising is an info that says: cordova-plugin-ionic has been disabled. Searching on the web, it seems that it could be something to do with fetch not being present even though window.fetch in the console returns me a functton. I even try to import ‘whatwg-fetch’; as suggested by others.

Here are the steps I do. In my app.module.ts I include import { Deploy } from ‘cordova-plugin-ionic/dist/ngx’; and define Deploy in my providers: .

I then create a service which change the channel and try to download if a new version is available.

    let progress = this.loadingCtrl.create({ content: 'Checking for new update' });
    progress.present();

    try {

      await Deploy.configure({ channel: action.channel, debug: true });
      const update = await Deploy.checkForUpdate();
      console.log('check for update : ', update.available);

      if (update.available) {
        progress = this.loadingCtrl.create({ content: 'Downloading new update' });
        progress.present();
        const downloaded = await Deploy.downloadUpdate((p) => console.log(`downloading: ${p}%`));
        if (downloaded) {
          progress.dismiss();
          progress = this.loadingCtrl.create({ content: 'Extracting new update' });
          const extracted = await Deploy.extractUpdate((p) => console.log(`extracting: ${p}%`));
          if (extracted) {
            progress.dismiss();
            progress = this.loadingCtrl.create({ content: 'Restarting now ...' });
            return Deploy.reloadApp();
          } else {
            progress.dismiss();
            const alert = this.alertCtrl.create({ message: 'Extraction failed', buttons: ['RESTART'] });
            alert.present();
            return Deploy.reloadApp();
          }

        } else {
          progress.dismiss();
          const alert = this.alertCtrl.create({ message: 'Download failed', buttons: ['RESTART'] });
          alert.present();
          return Deploy.reloadApp();
        }
      }

      return progress.dismissAll();

    }
    catch (err) {
      console.error(`error updating app: ${err}`);
      progress.dismissAll();
    }
  }

Any help or working code appreciated

Pascal

Posts: 1

Participants: 1

Read full topic

@mafortis wrote:

I am using tabs style, then I placed my tabs URL under authentication and since then after user is logged in and open the app redirect doesn’t work properly.

Issues

1. Since I placed my tabs under auth guard my default URL tabs/groups becomes like tabs/tabs/groups
2. When user is logged in and re-open the app they will redirect to localhost/tabs instead of localhost/tabs/tabs/groups

Note: If my first issue be solve (extra tabs be removed) then current redirect would work as expected as tabs default path is tabs/groups

Code

AuthGuard

export class AuthGuardGuard implements CanActivate {
  constructor(
    private router: Router,
    public auth: AuthService
  ) { }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    const currentUser = this.auth.isLoggedIn;
    if (currentUser) {
      return true;
    }
    this.router.navigate(['/login']);
    return false;
  }
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { AuthGuardGuard } from '../app/Guards/auth-guard.guard';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'tabs',
    pathMatch: 'full'
  },
  {
    path: 'login',
    loadChildren: () => import('./Pages/Auth/login/login.module').then( m => m.LoginPageModule)
  },
  {
    path: 'register',
    loadChildren: () => import('./Pages/Auth/register/register.module').then( m => m.RegisterPageModule)
  },
  {
    path: 'intro',
    loadChildren: () => import('./Pages/intro/intro.module').then( m => m.IntroPageModule)
  },
  {
    path: 'tabs',
    canActivate: [AuthGuardGuard],
    loadChildren: () => import('./tabs/tabs.module').then( m => m.TabsPageModule)
  }
];

tabs-routing.module.ts

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'groups',
        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
      },
      {
        path: 'phones',
        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
      },
      {
        path: 'tab3',
        loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
      },
      {
        path: 'profile',
        loadChildren: () => import('../Pages/Auth/profile/profile.module').then( m => m.ProfilePageModule)
      },
      {
        path: '',
        redirectTo: 'groups',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: 'groups',
    pathMatch: 'full'
  }
];

Any idea where the problem comes from?

Posts: 1

Participants: 1

Read full topic

@Pratikjaiswa15 wrote:

I am trying to show an image preview using ion-slide inside the ion-modal. But zoom functionality is not working. I have added slideOptions. But not working. Subsequently, the zoom functionality is working with the normal page.

Second issue backdropDismiss : true not closing modal when the backdrop is clicked

here is the code

page.html

<ion-slides [options]="slideOpts">
    <ion-slide *ngFor="let p of products">
          <img [src] = 'p.image_url' tappable (click)="openPreview(p.image_url)">
    
     </ion-slide>
 </ion-slides>

page.ts

async openPreview(image_url){
    console.log(image_url)

    const modal = await this.modalController.create({
      component: ImageModalPage,
      showBackdrop:true,
      backdropDismiss: true,
      componentProps: {
        image_url : image_url,
      },
    });
    return await modal.present();

  }

modal.html

<ion-item class="close-fake" lines="none" text-center>
    <ion-button (click)="close()" fill="clear" color="light">
      <ion-icon name="close" slot="start"></ion-icon>
      back
    </ion-button>

    <ion-slides [options]="sliderOpts">
        <ion-slide>
          <div class="swiper-zoom-container">
            <img [src] ='image_url'>
          </div>
        </ion-slide>
      </ion-slides>

modal.ts

sliderOpts = {
        zoom: {
          maxRatio: 5,
        }
      }

close(){
    this.modalController.dismiss()
  }

Posts: 1

Participants: 1

Read full topic

@ilanitz1 wrote:

Hi, I’m trying to deploy to AppStore but the deploy destination only shows “Web Deploy Channel” and I can’t figure out if this feature is currently supported or only partially supported (for some other subscription plans).

I just migrated from PhoneGap to AppFlow Launch plan, I followed the guide to create a production certificate with App Store provisioning profile, preformed a successful build with security_profile ios_app_store, I see a “Deploy Binary” button next to the build - but can only set the destination to Web Deploy.

I get no message in the dashboard that deploy to app store is not supported nor can I find anything in the documentations about any such restrictions.

Thanks.

Posts: 1

Participants: 1

Read full topic

@Brun0o wrote:

I am starting an application (ionic + angular + cloud firestore) and I need to notify users when a date is approaching. * (This date is different for all users and is stored in the cloud firestore) *

Example: The user has an invoice to pay by 6/20/2020 and I want to notify 15 days before the deadline. There may be the possibility of having more than one date for another event.

I wonder if that is possible. If so, I wanted to know what the best option is (push notification or local notification).

Grateful for the attention

Posts: 1

Participants: 1

Read full topic

@TomasMoskala wrote:

Hi,
how do I set super-tabs-container swipeEnabled different on different tabs? I need a swipable content on one of the tabs, so from there only the tool button can be used (or content lock option on that page)

After I set swipeEnabled=false in super-tabs tabChange or super-tabs-toolbar buttonClick events, the tab freezes and does not react to tool button click although the indicator does move.
After the click swipeEnabled is true and I am able to swipe the previously frozen tab.
This messes up page indexes and I get a tab different from indicator.
What am I missing? Thanks.

Posts: 1

Participants: 1

Read full topic

@mosheCh wrote:

Hi,

I am trying to debug my app trough WiFi with adb. The regular build is working fine. But the live reload(ionic cordova run android -l) gives me following error:

[native-run] Error: Command failed: C:\Users###\AppData\Local\Android\Sdk\platform-tools\adb -s 192.###.###.###:5555 reverse tcp:8101 tcp:8101
[native-run] adb.exe: error: more than one device/emulator
[native-run]
[native-run] at ChildProcess.exithandler (child_process.js:294:12)
[native-run] at ChildProcess.emit (events.js:198:13)
[native-run] at maybeClose (internal/child_process.js:982:16)
[native-run] at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)

Whats wrong?

Posts: 1

Participants: 1

Read full topic