How define config.xml file on react/capacitor project ?

[enes-get-local]

I m using capacitor 3.3.3 with react. Installed this plugin and it shows a white square on splashscreen. show and hide functions works. My problem is that i can't figure out where should put config.xml file ? Ios folder has config.xml file but it is reproducing on every build. It's content like that :

Do you have any idea ?

[timbru31]

It’s a shame on Ionic’s end that it’s not very good documented. You need to adjust your capacitor JSON config file like in this example: https://capacitorjs.com/docs/cordova/migrating-from-cordova-to-capacitor#cordova-plugin-preferences

[enes-get-local]

Thank you for quick response !

I m not sure that i understand correctly. But i added some properties to capacitor.config.json file. Please see config file:

{ "appId": "appId", "appName": "appName", "bundledWebRuntime": false, "npmClient": "npm", "webDir": "out", "plugins": { "LottieSplashScreen": { "LottieAnimationLocation": "SplashScreen.json" }, "PushNotifications": { "presentationOptions": ["badge", "sound", "alert"] }, "Keyboard": { "resize": "none", "resizeOnFullScreen": false } }, "cordova": { "preferences": { "DisableDeploy": "true", "LottieAnimationLocation": "SplashScreen.json", "LottieEnableHardwareAcceleration": "true", "LottieFullScreen": "true" } } }

After npx cap sync command, config.xml file produced like that:

Do you think where i m doing wrong ?

[timbru31]

This looks correct, at least your preferences were correctly picked up by Capacitor.

[enes-get-local]

I tried to using remote url and it works. So i guess my local file is can not be found.

As you can see SplashScreen.json file is at the sample place with config.xml file. But it doesn't work

[enes-get-local]

UPDATE:

i've put it correct root. it was my fault

[enes-get-local]

@timbru31 It works but something is weird. animation is placed at righ bottom side very small while opening the app. Afer it is open a white square is showing up here until hide() function worked.

This is white square:

Here you can see my animation shows at right bottom

[enes-get-local]

@timbru31 Do you have any idea for that ?

config xml

[timbru31]

Can you by any chance share your project? That would help me to debug the issue.

[enes-get-local]

@timbru31 I will see if can add you as contributor to repository but first let me explain as simple

Basically we have a next.js project and have ios/android folders which produced via capacitor init command. Everyting is simple steps on documentations.

I have installed "cordova-plugin-lottie-splashscreen": "^0.9.6". via yarn.
Configured capacitor.config.json file accordingly documentation and synced ios/android project via npx cap sync command.
Here. you can see config.xml file which is produced at ios project :

Those are all step which i did. So the problem is that animation not centered and not full screen while opening the app. Weird thing is that if i run window.lottie.splashscreen.show() command on console after app runned, it works very well. Problem is on initial start of application.

Also i tested anroid on emulator and it crashes the app.

Please let me know if that is enough or need more information

[antonioberetini]

@timbru31 you been added to our repository