Like the title says, the splash screen is not hiding on Android.

Capacitor 3.4.1, @capacitor/splash-screen 1.2.2

capacitor.config.ts has:

  plugins: {
    SplashScreen: {
      launchAutoHide: false,
	  launchShowDuration: 60000,
	  androidScaleType: 'CENTER_CROP',
	  showSpinner: true
    },

The code is like this:

import { SplashScreen } from '@capacitor/splash-screen';

console.log(`Hide splash screen`);
SplashScreen.hide().then(()=>console.log(`Splashscreen hidden`));

Both messages appear in console but the Splashscreen is still on.

1 post - 1 participant

Read full topic

Using capacitor 3.4.1, @capacitor/device 1.1.2

I use this code:

import { Device } from '@capacitor/device';

const info = await Device.getInfo();
console.log(`Device platform is '${info.platform}'`);

This is a new Capacitor project, not anything migrated from an earlier version or from Cordova.

The annoying thing is that other (Cordova) plugins depend on the reported platform and won’t work properly.

1 post - 1 participant

Read full topic

Hi, I’m trying to find out if there’s a way to add a second webview.

I need to be able to launch a remote site while still having all the push notification listeners and app state listeners functioning in the background.

I tried to accomplish this with an iframe, but it seems localstorage doesn’t always persist (which is necessary to my application).

Is there any solution to this?

Thanks.

1 post - 1 participant

Read full topic

Hello there,

for my client I need to use a different icon along with the ion-searchbar, which is unfortunately not covered by ionicons library.
Is there a way to have a custom icon for the searchbar out of the scope of ionicons-library?

For instance this is already possible with ion-icon-component in the following way

<ion-icon src='path-to-some-icon.svg'></ion-icon>

Thanks in advance!

1 post - 1 participant

Read full topic

Hi

I am experiencing problems with the zone on my Angular-Capacitor app. When my app do a server request with httpClient/rxjs like:

this.serviceRequest(stuff).subscribe((data:DataType) =>{
this.doSomeStuff = stuff;
this.updateHTMLvariable = data;
});

The screen lost the focus and, for example when click on a button not respond the first time. I have to touch a second time to works as expected.

If I interact with the screen or minimize and resume the app the buttons works as expected.

Also if inside os subscribe callback calls to open a dialog it opens crashed and when interact with the screen it renders as expected.

Same code launched into a webserver works fine on all cases.

Setup:

Capacitor: 3.3.3
Angular: 12.2.16

1 post - 1 participant

Read full topic

Hi community,

I am upgrading our ionic app to latest version of ionic and angular. I thought the best would be to start by testing it using the conference app.

ionic serve works perfectly.

ionic cordova run android returns the following build error.

Cannot find module ‘@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/utils’

The package.json is the original one downloaded from the conference app.
Is there something that I am missing ?

1 post - 1 participant

Read full topic

We’re creating a larger casino app. With the recent changes of Apple guidelines, we’re no longer able to sideload the HTML5 games to play, Apple now requires them to be bundled in the IPA (not feasible if you have hundreds of games) or loading via Apples CDN / ODR.

However, is this archievable with a hybrid wrapper? How do we controll the assets delivery from our hybrid?

Any ideas?

1 post - 1 participant

Read full topic

Hey, I am building an app with VueJS/Vuetify and Capacitor for Android.

The app allows the user to create reminders for certain tasks that are linked to profiles they have created before. I managed to create LocalNotifications, but I’m struggling to add a profile picture as ‘largeIcon’.

The documentation for LocalNotification says about largeIcon:

Icons should be placed in your app’s res/drawable folder. The value for this option should be the drawable resource ID, which is the filename without an extension.

I’m able to add a largeIcon following this approach, but only if I specify it in capacitor.config.ts. It doesn’t work if I specify it from the LocalNotifications.schedule({}] function. Not the static picture from res/drawable that works well if specified in capacitor.config.ts, but even less a picture that the user has previously uploaded to the app.

So how can I specify a largeIcon from the schedule method and how can I make it a picture that the user has uploaded into the app?

For other Vue components I use this approach to display the profile picture:

require('@/assets/img/some-image.png')

This works well as src for v-img for example and also as value for css background image url.

Is there any way to get this working with largeIcon in LocalNotifications as well?

Edit: I found this SO thread about the issue which discusses a solution in Java. Is there a similar solution in Capacitor/JS?

1 post - 1 participant

Read full topic

Hey

I tried to login via GitHub, but I have to agree to share my private repos with this site ?? What is this needed for? I see no scenario in which I want to share my private repos with a forum (they are private for a reason!).

Can you please elaborate (or remove this permission)?

Cheers
Fred

1 post - 1 participant

Read full topic

I want to share the pre-prod pwa version with my team mates via heroku hosting how do i that. I tried a option given by simon from devdatic but none of them worked…

Any Pointers

1 post - 1 participant

Read full topic

I have different android and iOS apps on their respective app stores made with Ionic + Angular + Capacitor, and all of a sudden two of our android apps which were previously functioning fine are showing changes in colors across multiple devices without any update or release.

EIS (By Waytech Network Private Limited) -
Background is dark, when I haven’t provided any dark mode

Ionic CLI : 6.17.1 (C:\nvm\v14.17.3\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.0.0-beta.5
@angular-devkit/build-angular : 12.1.4
@angular-devkit/schematics : 12.2.4
@angular/cli : 12.1.4
@ionic/angular-toolkit : 4.0.0
@capacitor/android : 3.2.4
@capacitor/core : 3.2.1
@capacitor/ios : 3.2.4

Shiftkarado (By Waytech Network Private Limited)
Custom Secondary color - a shade of orange is now blue
All Texts have turned white

“@ionic/angular”: “^5.0.0”,
“@angular-devkit/architect”: “0.1102.12”,
“@angular-devkit/build-angular”: “^0.1102.12”,
“@angular/cli”: “^11.2.12”,
“@capacitor/cli”: “^2.4.7”,
“@ionic/angular-toolkit”: “^3.1.1”,
“@capacitor/android”: “^2.4.6”,
“@capacitor/core”: “2.4.5”,
“@capacitor/ios”: “^2.4.6”,

1 post - 1 participant

Read full topic

Hi,

I have an ion-select with a static, hardcoded list of items. However, the displayed text is translated with a pipe:

<ion-item>
    <ion-label position="floating">{{'Position' | translate}}</ion-label>
    <ion-select interface="popover" [value]="appSettings.getUnits().position" (ionChange)="switchPositionUnits($event)">
        <ion-select-option value="DEGREE">{{'Degree' | translate}}</ion-select-option>
        <ion-select-option value="DEGREE_MINUTES">{{'Degree/Minutes' | translate}}</ion-select-option>
        <ion-select-option value="DEGREE_MINUTES_SECONDS">{{'Degree/Minutes/Seconds' | translate}}</ion-select-option>
    </ion-select>
</ion-item>

Now, the user can switch the language of the app. The label is updated immediately, but the selected item is not. As soon as the user opens the selection list, the content is updated to the new language.

Is there any way to force the ion-select to be redrawn?

1 post - 1 participant

Read full topic

When I was reading this page - ion-ripple-effect | Ripple Effect Button Component for Ionic Apps - the first link for the Material Design Ripple Effect is a bad link. It takes me to a 404 error page. Thought someone might want to check it out.

1 post - 1 participant

Read full topic

Good,

I’m using a phone with android 11, I consume an api but the data always comes out blank, but if I use an ionic serve to upload my project to the navigation it brings me all the information, I’ve been looking on the internet for some information that can help me help but I couldn’t find anything to help me solve this problem

If I use another device with android 9 below, my application shows the data without problems.
this._GetServicesService.ejecutarQuery<Compania>(’/compania’).subscribe(
data =>{
this.Compania = data
console.log( this.Compania);
}
)
Ionic:

Ionic CLI : 6.18.1

Utility:

cordova-res : 0.15.4
native-run : 1.5.0

System:

NodeJS : v16.14.0
npm : 8.5.0
OS : Windows 10

3 posts - 2 participants

Read full topic

Hey, I am building an app with VueJS/Vuetify and Capacitor for Android.

The app allows the user to create reminders for certain tasks that are linked to profiles they have created before. I managed to create LocalNotifications, but I’m struggling to add a profile picture as ‘largeIcon’.

The documentation for LocalNotification says about largeIcon:

Icons should be placed in your app’s res/drawable folder. The value for this option should be the drawable resource ID, which is the filename without an extension.

I’m able to add a largeIcon following this approach, but only if I specify it in capacitor.config.ts. It doesn’t work if I specify it from the LocalNotifications.schedule({}] function. Not the static picture from res/drawable that works well if specified in capacitor.config.ts, but even less a picture that the user has uploaded to the app previously. It works with the static picture from res/drawable, but not with a picture that the user has uploaded previously.

So how can I specify a largeIcon from the schedule method and how can I make it a picture that the user has uploaded into the app?

For other Vue components I use this approach to display the profile picture:

const image = this.profile.picture || require('@/assets/img/default-profile-picture.png')

this.profile.picture is a base64 encoded image that is stored in Vuex.

This approach works well as src for v-img for example and also as value for css background image url.

Is there any way to get this working with largeIcon in LocalNotifications as well?

Edit: I found this SO thread about the issue which discusses a solution in Java. Is there a similar solution in Capacitor/JS?

2 posts - 1 participant

Read full topic

since i have installed the latest version in Nodejs(v16.13.2), i’m unabel to run my application

runnig ionic serve command shows this error in console

[app-scripts] node:internal/modules/cjs/loader:936
[app-scripts] throw err;
[app-scripts] ^
[app-scripts] Error: Cannot find module ‘node-sass’

i have tried to install node-sass@6.0.1 version, but it failed

 npm install --unsafe-perm node-sass --save

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: essyndic@undefined
npm WARN Found: node-sass@4.14.1
npm WARN node_modules/node-sass
npm WARN   node-sass@"^4.10.0" from @ionic/app-scripts@3.2.4
npm WARN   node_modules/@ionic/app-scripts
npm WARN     dev @ionic/app-scripts@"^3.2.4" from the root project
npm WARN   3 more (gulp-sass, sass-loader, the root project)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peerOptional node-sass@"^4.0.0 || ^5.0.0 || ^6.0.0" from sass-loader@11.1.1
npm WARN node_modules/sass-loader
npm WARN   sass-loader@"^11.1.1" from the root project
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm ERR! code 1
npm ERR! path C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\gulp-sass\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: C:\Program Files\nodejs\node.exe C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\gulp-sass\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   'C:\\Program Files\\nodejs\\node.exe',
npm ERR! gyp verb cli   'C:\\Users\\Asus\\Desktop\\SyndicDigit01092021\\node_modules\\gulp-sass\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@16.13.2 | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\gulp-sass\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\gulp-sass\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\gulp-sass\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\gulp-sass\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp verb `which` failed  python2 Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\gulp-sass\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\gulp-sass\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\gulp-sass\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\gulp-sass\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb `which` succeeded python C:\Users\Asus\AppData\Local\Programs\Python\Python39\python.EXE
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Command failed: C:\Users\Asus\AppData\Local\Programs\Python\Python39\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack   File "<string>", line 1
npm ERR! gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack                       ^
npm ERR! gyp ERR! stack SyntaxError: invalid syntax
npm ERR! gyp ERR! stack
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:397:12)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1064:16)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
npm ERR! gyp ERR! System Windows_NT 10.0.19043
npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Asus\\Desktop\\SyndicDigit01092021\\node_modules\\gulp-sass\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\gulp-sass\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.13.2
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

i even tried to upgrade @ionic/app-script, but it also failed

npm install @ionic/app-scripts@latest --save

npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm ERR! code 1
npm ERR! path C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: C:\Program Files\nodejs\node.exe C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\node-sass\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   'C:\\Program Files\\nodejs\\node.exe',
npm ERR! gyp verb cli   'C:\\Users\\Asus\\Desktop\\SyndicDigit01092021\\node_modules\\node-sass\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@16.13.2 | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\node-sass\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\node-sass\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\node-sass\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\node-sass\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp verb `which` failed  python2 Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\node-sass\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\node-sass\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\node-sass\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\node-sass\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb `which` succeeded python C:\Users\Asus\AppData\Local\Programs\Python\Python39\python.EXE
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Command failed: C:\Users\Asus\AppData\Local\Programs\Python\Python39\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack   File "<string>", line 1
npm ERR! gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack                       ^
npm ERR! gyp ERR! stack SyntaxError: invalid syntax
npm ERR! gyp ERR! stack
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:397:12)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1064:16)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
npm ERR! gyp ERR! System Windows_NT 10.0.19043
npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Asus\\Desktop\\SyndicDigit01092021\\node_modules\\node-sass\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd C:\Users\Asus\Desktop\SyndicDigit01092021\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.13.2
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

downgrading Nodejs is not an option!
what should i do please ?

2 posts - 2 participants

Read full topic

We use ion-tab-bar and ion-tab-button to control the tabs in the bottom of our Ionic app. I have wrapped each button in a div, and can control the border-radius, background-color, etc. fairly easily with CSS, HOWEVER what I would like to do is make it so when a user starts to scroll down, that the background color of the buttons and text on the buttons fade to transparent - displaying only the icons. Does anyone know how to do that with Ionic tags? Or is this something only Javascript can do? Thank you for your response and noodling on this! Jonathon

1 post - 1 participant

Read full topic

hello, i dont undestand why ion-select on ios divace not opening options?
if any have solution please help about solve.

1 post - 1 participant

Read full topic

Whenever I swipe between pages, my application displays animation twice while clicking (routerLink, useIonRouter) works as expected. My page headers show in the wrong order when I swipe forward. For example, in router stack a, b, c when I swipe back from c to a and scroll forward to c, the page header may display b’s or a’s and be stuck right there.

Another issue is that the page moves as many as I swipe. It is too sensitive that I only swipe 1 cm can lead to more than 3 pages moving.

Is there a way to disable swiping? If not, is there a way to limit swiping pages? For example, only swipe 1 page even when I swipe from the most left to the most right.

I am using @ionic/react@6.0.8 and @ionic/react-router@6.0.8:

"dependencies": {
    "@capacitor/app": "1.0.0",
    "@capacitor/camera": "1.0.0",
    "@capacitor/core": "3.0.0",
    "@capacitor/filesystem": "1.0.0",
    "@capacitor/haptics": "1.0.0",
    "@capacitor/keyboard": "1.0.0",
    "@capacitor/storage": "1.0.0",
    "@ionic-native/camera": "5.36.0",
    "@ionic-native/clipboard": "5.36.0",
    "@ionic-native/core": "5.36.0",
    "@ionic-native/firebase": "5.36.0",
    "@ionic/pwa-elements": "3.1.1",
    "@ionic/react": "^6.0.8",
    "@ionic/react-router": "^6.0.8",
    "@ionic/react-test-utils": "0.2.1",
    "@molteni/export-csv": "0.0.8",
    "@react-google-maps/api": "2.2.0",
    "@reduxjs/toolkit": "1.5.1",
    "@testing-library/jest-dom": "5.16.1",
    "@testing-library/react": "12.1.2",
    "@testing-library/react-hooks": "7.0.2",
    "@testing-library/user-event": "13.5.0",
    "@types/deep-equal": "1.0.1",
    "@types/jest": "26.0.20",
    "@types/node": "12.19.15",
    "@types/prettier": "2.2.3",
    "@types/react": "16.14.3",
    "@types/react-dom": "16.9.10",
    "@types/react-geocode": "0.2.0",
    "@types/react-redux": "7.1.16",
    "@types/react-router": "5.1.11",
    "@types/react-router-dom": "5.1.7",
    "@types/react-test-renderer": "17.0.1",
    "@types/redux-mock-store": "1.0.3",
    "@types/styled-components": "5.1.9",
    "@types/uuid": "8.3.3",
    "connected-react-router": "6.9.1",
    "cordova-clipboard": "1.3.0",
    "cordova-plugin-camera": "5.0.2",
    "cordova-plugin-firebase": "2.0.5",
    "d3": "7.0.0",
    "deep-equal": "1.1.1",
    "env-cmd": "10.1.0",
    "eslint": "7.26.0",
    "fake-indexeddb": "3.1.7",
    "firebase": "9.5.0",
    "formik": "2.2.9",
    "generate-avatar": "1.4.10",
    "hash-wasm": "4.9.0",
    "history": "4.0.0",
    "husky": "6.0.0",
    "ionicons": "5.4.0",
    "lint-staged": "11.0.0",
    "prettier": "2.3.0",
    "promise-all-settled-polyfill": "0.1.2",
    "query-string": "7.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-error-boundary": "3.1.3",
    "react-error-overlay": "6.0.9",
    "react-geocode": "0.2.3",
    "react-image-lightbox": "5.1.4",
    "react-redux": "7.2.4",
    "react-router": "5.2.0",
    "react-router-dom": "5.2.0",
    "react-scripts": "4.0.3",
    "react-test-renderer": "17.0.2",
    "redux": "4.1.0",
    "redux-mock-store": "1.5.4",
    "styled-components": "5.3.0",
    "typescript": "4.5.4",
    "uuid": "8.3.2",
    "web-vitals": "0.2.4",
    "workbox-background-sync": "5.1.4",
    "workbox-broadcast-update": "5.1.4",
    "workbox-cacheable-response": "5.1.4",
    "workbox-core": "5.1.4",
    "workbox-expiration": "5.1.4",
    "workbox-google-analytics": "5.1.4",
    "workbox-navigation-preload": "5.1.4",
    "workbox-precaching": "5.1.4",
    "workbox-range-requests": "5.1.4",
    "workbox-routing": "5.1.4",
    "workbox-strategies": "5.1.4",
    "workbox-streams": "5.1.4"
  },

The following is a part of my routers (wrapped by IonReactRouter in another component):

<IonTabs>
      <IonRouterOutlet>
        {ListOfRoute.map((route) => {
          const props = { ...route, key: route.path, exact: !route.path.includes(':') };
          return route.isPublic ? <Route {...props} /> : <RoutePrivate {...props} />;
        })}
        <Route path="/" component={RouteAction} exact />
        <Route component={Default} />
      </IonRouterOutlet>

      <IonTabBar
        slot="bottom"
        style={{
          '--border': '1px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.05))))',
        }}
      >
        {ListOfTabRoute.map(({ path, icon }) => {
          return (
            <IonTabButton key={path} tab={path} href={path} layout="label-hide">
              <IonIcon icon={icon} />
              <IonLabel>{path}</IonLabel>
            </IonTabButton>
          );
        })}
      </IonTabBar>
    </IonTabs>

1 post - 1 participant

Read full topic

Good day!

I created many things with Ionic Framework, but now i need to create something new, which I never see and did before. Can someone help: what I’ve to do? What kind of component I can use?

It looks like that. I think about ion-action-sheet, but it’s functionality is to low, but, maybe, you know something, that I don’t.

1 post - 1 participant

Read full topic