Open attarchi opened 4 months ago
google-cla[bot]
commented
4 months ago Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).
View this failed invocation of the CLA check for more information.
For the most up to date status, view the checks section at the bottom of the pull request.
ashwini-ksingh
commented
1 month ago @attarchi @erie-e9 When are we planning to release this?
attarchi
commented
1 month ago I have no idea when the repo owner wants to do it but meanwhile, you can add this to your package.json.
"react-native-lottie-splash-screen": "https://github.com/attarchi/react-native-lottie-splash-screen",@attarchi I did try using your fork, but getting this error with RN 0.75.4
attarchi
commented
1 month ago @attarchi I did try using your fork, but getting this error with RN 0.75.4
I have tested 0.75.4, and there is no error. Please remove the previous one and set it up from begin with this instruction.
ashwini-ksingh
commented
1 month ago @attarchi It was some issue with the build schemes configured in my project. Recreated the scheme and build was successful.
However, on ios, the lottie splash is immediately removed after load, and does not complete the animation. (tried with setAnimationFinished true/false, but its removed immediately). This is only happening in release build, works fine on debug.
attarchi
commented
1 month ago @HwangTaehyun Cloud you please check this PR?
QaysTrad
commented
1 month ago I have no idea when the repo owner wants to do it but meanwhile, you can add this to your package.json.
"react-native-lottie-splash-screen": "https://github.com/attarchi/react-native-lottie-splash-screen",
Thanks for updating the package,
I have installed the package from your repo, but when I use RNRestart.restart() the lottie splash it's run again on the iOS, until I close the app and reopen it and when I use LottieSplashScreen.show() the app froze with no response
"react-native": "0.74.0", "react": "18.2.0", "react-native-lottie-splash-screen": "https://github.com/attarchi/react-native-lottie-splash-screen",
attarchi
commented
1 month ago Hi @QaysTrad,
Thank you for your feedback and for testing the package!
I'll look into the issue with RNRestart.restart() causing the Lottie splash screen to reappear on iOS. There might be a conflict there that I'll need to resolve.
Regarding LottieSplashScreen.show(), I have actually removed that method as it didn't align with the package's purpose. This package is designed to handle the native splash screen while React Native is initializing. Once the app is fully loaded and you have access to React components, it's better to control Lottie animations directly using the lottie-react-native package. This package's focus is on the startup process, so handling splash screens beyond that isn't necessary.
Let me know if you need any further clarification!
attarchi
commented
1 month ago Hi @ashwini-ksingh,
I've added an example project to the source code for running this app with RN 0.7x, and updated the package. Please check out the latest version.
Regarding your issue, keep in mind that when setAnimationFinished is set to true, the application won’t wait for the Lottie animation to finish before removing the splash screen. To ensure the splash screen waits for the animation to complete, set this value to false and clear the build folder inside your iOS project directory.
Here’s how you can set it in your code:
// AppDelegate.mm file
// Make the splash screen wait for the Lottie animation to finish
[RNSplashScreen setAnimationFinished:false];After making these changes, rebuild the project, and the splash screen should behave as expected in the release build. Let me know if this resolves the issue!
erie-e9
commented
4 weeks ago Hi again, I just followed instructions and all seem to be right, app is running without problems using this package v2, but I'm not sure if it 'cuz I'm using latest versions of all, I mean I'm testing new project with latest version of Xcode, metro, react@18.3.1, react-native@0.76.0, iOS simulator with iOS 18 and I notice it runs very quick, I can see my splash-screen only for 0.5 seconds and it only shows it when I close and reopen the app, nothing is displayed if I reload it in terminal.
Note: I know Lottie file is in the splash-screen because that little black square with white words in right side is part of it, it's like a watermark. Note 2: I tested it with RNSplashScreen setAnimationFinished = false and true.
I just read the latest version of metro and react-native help to improve build time but I'd like to be sure that's the reason.
ashwini-ksingh
commented
3 weeks ago @erie-e9 I am also facing the same behavior (though I am on RN 0.75.4) Not sure why, its the same using the example in the repo as well (example/RN.0.7x-cli) @attarchi
singhayush1403
commented
3 weeks ago @erie-e9 Have the same issue. The lottie doesn't finish but the screen is removed
attarchi
commented
3 weeks ago @singhayush1403 @ashwini-ksingh @erie-e9
Thank you very much for your collaboration. I noticed the issue but couldn’t fix it, as I don’t have extensive experience with Objective-C and iOS app initialization. I’ll publish this version in my repo as is. Could you please open a separate issue to address the iOS problem in a future update? If anyone can help with this, feel free to jump in with a PR. Thanks!
attarchi
commented
3 weeks ago I've published the latest changes to npm! You can check out the package here: @attarchi/react-native-lottie-splash-screen on NPM.
Feel free to install it and continue bug fixing.
$ yarn add @attarchi/react-native-lottie-splash-screen
coderabbitai[bot]
commented
3 weeks ago The changes in this pull request include modifications to several configuration files and the introduction of new files for a React Native project. Key updates involve enhancements to the .gitignore and .npmignore files to exclude Yarn-related files, the addition of a .yarnrc.yml configuration, and significant updates to the README.md for improved clarity. New Android and iOS project files have been created, including MainActivity.kt, MainApplication.kt, and various resource files for managing the splash screen feature. The package.json has been updated to reflect new dependencies and project structure.
| File/Path | Change Summary |
|---|---|
.gitignore |
Added entries for Yarn-related files and directories, including .yarn/* while allowing certain subdirectories. |
.npmignore |
Added entry to ignore the .yarn directory. |
.yarnrc.yml |
Introduced configuration settings for Yarn, including cacheFolder, nodeLinker, and yarnPath. |
README.md |
Added "Versions compatibilities" section, reorganized installation instructions, and clarified setup for Android and iOS. |
android/build.gradle |
Applied kotlin-android plugin, updated Lottie library version, and centralized support library version management. |
android/src/main/java/org/devio/rn/splashscreen/SplashScreen.java |
Deleted file managing splash screen functionality in Java. |
android/src/main/java/org/devio/rn/splashscreen/SplashScreen.kt |
Introduced new Kotlin object for managing splash screen dialog with methods to show, hide, and set animation state. |
android/src/main/java/org/devio/rn/splashscreen/SplashScreenModule.java |
Deleted Java class for splash screen module. |
android/src/main/java/org/devio/rn/splashscreen/SplashScreenModule.kt |
Added new Kotlin class extending ReactContextBaseJavaModule for splash screen functionality. |
android/src/main/java/org/devio/rn/splashscreen/SplashScreenReactPackage.java |
Deleted Java class for integrating splash screen functionality. |
android/src/main/java/org/devio/rn/splashscreen/SplashScreenReactPackage.kt |
Added new Kotlin class implementing ReactPackage for splash screen integration. |
examples/RN.0.69/package.json |
Updated project name and dependency path. |
examples/RN.0.7x-cli/.bundle/config |
Added configuration variables for Bundler. |
examples/RN.0.7x-cli/.eslintrc.js |
Introduced ESLint configuration file. |
examples/RN.0.7x-cli/.gitignore |
Created comprehensive .gitignore for various platforms and tools. |
examples/RN.0.7x-cli/.prettierrc.js |
Added Prettier configuration file. |
examples/RN.0.7x-cli/.watchmanconfig |
Created empty Watchman configuration file. |
examples/RN.0.7x-cli/.yarnrc.yml |
Added Yarn configuration settings. |
examples/RN.0.7x-cli/App.tsx |
Introduced sample React Native application with splash screen management. |
examples/RN.0.7x-cli/Gemfile |
Created Gemfile specifying Ruby version and gem dependencies. |
examples/RN.0.7x-cli/README.md |
Added comprehensive guide for getting started with the project. |
examples/RN.0.7x-cli/__tests__/App.test.tsx |
Introduced test file for rendering the App component. |
examples/RN.0.7x-cli/android/app/build.gradle |
New build.gradle file for Android application configuration. |
examples/RN.0.7x-cli/android/app/proguard-rules.pro |
Added comments for ProGuard rules guidance. |
examples/RN.0.7x-cli/android/app/src/debug/AndroidManifest.xml |
Created new AndroidManifest.xml for debug configuration. |
examples/RN.0.7x-cli/android/app/src/main/AndroidManifest.xml |
New manifest file declaring permissions and application components. |
examples/RN.0.7x-cli/android/app/src/main/java/com/example/MainActivity.kt |
New Kotlin file defining the main activity with splash screen integration. |
examples/RN.0.7x-cli/android/app/src/main/java/com/example/MainApplication.kt |
New file for application class extending Application and implementing ReactApplication. |
examples/RN.0.7x-cli/android/app/src/main/res/drawable/rn_edit_text_material.xml |
New drawable resource for inset layout. |
examples/RN.0.7x-cli/android/app/src/main/res/layout/launch_screen.xml |
New layout file defining the launch screen with a Lottie animation. |
examples/RN.0.7x-cli/android/app/src/main/res/raw/loading.json |
New JSON file defining a loading animation. |
examples/RN.0.7x-cli/android/app/src/main/res/values/colors.xml |
New color resource for splash screen background. |
examples/RN.0.7x-cli/android/app/src/main/res/values/strings.xml |
New string resource for application name. |
examples/RN.0.7x-cli/android/app/src/main/res/values/styles.xml |
New styles for application theme and splash screen animation. |
examples/RN.0.7x-cli/android/build.gradle |
New build.gradle configuration for the Android project. |
examples/RN.0.7x-cli/android/gradle.properties |
New properties file for Gradle configuration. |
examples/RN.0.7x-cli/android/settings.gradle |
New Gradle configuration for plugin management and project structure. |
examples/RN.0.7x-cli/app.json |
New JSON file for application metadata. |
examples/RN.0.7x-cli/babel.config.js |
New Babel configuration file for React Native. |
examples/RN.0.7x-cli/index.js |
New entry point for the React Native application. |
examples/RN.0.7x-cli/ios/.xcode.env |
New file for sourcing environment variables in Xcode. |
examples/RN.0.7x-cli/ios/Dynamic.swift |
New Swift class for managing Lottie animations. |
examples/RN.0.7x-cli/ios/Podfile |
New Podfile for integrating React Native with iOS. |
examples/RN.0.7x-cli/ios/example-Bridging-Header.h |
New bridging header for Objective-C interoperability. |
examples/RN.0.7x-cli/ios/example.xcodeproj/project.pbxproj |
New Xcode project file defining project structure and configuration. |
examples/RN.0.7x-cli/ios/example.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist |
New workspace checks plist file. |
examples/RN.0.7x-cli/ios/example.xcodeproj/xcshareddata/xcschemes/example.xcscheme |
New scheme file for managing build and execution actions in Xcode. |
examples/RN.0.7x-cli/ios/example.xcworkspace/contents.xcworkspacedata |
New workspace configuration file. |
examples/RN.0.7x-cli/ios/example.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist |
New plist file for workspace checks. |
examples/RN.0.7x-cli/ios/example/AppDelegate.h |
New header file for custom application delegate. |
examples/RN.0.7x-cli/ios/example/AppDelegate.mm |
New implementation file for application delegate with splash screen setup. |
examples/RN.0.7x-cli/ios/example/Images.xcassets/AppIcon.appiconset/Contents.json |
New JSON file for AppIcon asset catalog. |
examples/RN.0.7x-cli/ios/example/Images.xcassets/Contents.json |
New JSON structure for asset catalog metadata. |
examples/RN.0.7x-cli/ios/example/Info.plist |
New plist file for application configuration. |
examples/RN.0.7x-cli/ios/example/LaunchScreen.storyboard |
New storyboard file for launch screen layout. |
examples/RN.0.7x-cli/ios/example/PrivacyInfo.xcprivacy |
New plist file for privacy-related configurations. |
examples/RN.0.7x-cli/ios/example/main.m |
New entry point for the iOS application. |
examples/RN.0.7x-cli/ios/exampleTests/Info.plist |
New plist file for test target configuration. |
examples/RN.0.7x-cli/ios/exampleTests/exampleTests.m |
New unit test suite for the application. |
examples/RN.0.7x-cli/jest.config.js |
New Jest configuration file for testing. |
examples/RN.0.7x-cli/metro.config.js |
New Metro configuration file for bundling. |
examples/RN.0.7x-cli/package.json |
New package.json file with project metadata, dependencies, and scripts. |
examples/RN.0.7x-cli/tsconfig.json |
New TypeScript configuration file extending base settings. |
index.d.ts |
Removed static method show() from SplashScreen class in module. |
ios/Dynamic.swift |
Updated method signatures in Dynamic class to reflect new Lottie framework. |
package.json |
Updated version, peer dependencies, and added new scripts for the project. |
In the garden of code, we hop and play,
With new paths and scripts, we brighten the day.
Splash screens dancing, colors so bright,
With Yarn and Lottie, our app takes flight!
So gather 'round, friends, let’s cheer and rejoice,
For changes are blooming, let’s lift up our voice! 🐇✨
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?
ashwini-ksingh
commented
3 weeks ago @attarchi
This seems to be an issue with the default zIndex given to App component, compared to the LottieAnimationView view added for splash.
I added animationView.reactZIndex = 1; in createAnimationView function, and it started working for me on 0.75.4 with new architecture and bridgeless enabled.
attarchi
commented
3 weeks ago @ashwini-ksingh
Thanks! Your solution worked perfectly.
Since the old architecture doesn’t support reactZIndex, I set animationUIView.layer.zPosition = 1 in AppDelegate.mm, and it resolved the issue.
@erie-e9
The example project has been updated and should work as expected. Also, you can also add animationUIView.layer.zPosition = 1 directly to your AppDelegate.mm file.
erie-e9
commented
3 weeks ago Somebody else facing these errors on Android?
Solution enable next ones in gradle.properties: android.useAndroidX=true android.enableJetifier=true
Steps:
Unresolved reference Lottie in MainActivity.kt
I already tested Clear project and run rm -rf android/app/build android/app/.cxx android/build but error still happens.
attarchi
commented
3 days ago @erie-e9
I tested this with React Native 0.76.2 and encountered the same error. It seems this issue isn’t directly related to this package; version 0.76.x might still have some unresolved bugs. Here's how I resolved it:
Yarn vs. npm
I'm using yarn instead of npm, which might help avoid dependency issues.
Gradle settings
Make sure your gradle.properties file includes the following settings:
android.useAndroidX=true
android.enableJetifier=true
newArchEnabled=falseFix for MainActivity.kt
You might have missed adding this import to the header of your MainActivity.kt file:
import android.os.Bundlelottie-react-native version
Verify that the lottie-react-native package is installed with the exact version 6.7.2:yarn add lottie-react-native@6.7.2yarn start --reset-cacheLet me know if these steps work for you!
erie-e9
commented
3 days ago Thank you for your detailed answer. I edited my comment with fix for me, as we mentioned solution is enable those flags. Anyway, I'm using new arch, so for me is working fine without newArchEnabled=false
Summary by CodeRabbit
New Features
Documentation
Bug Fixes
Configuration
Tests