{"_id":"@attarchi/react-native-lottie-splash-screen","_rev":"4-a2f8bdf01def81d54d3faf54379ac01a","name":"@attarchi/react-native-lottie-splash-screen","dist-tags":{"latest":"3.0.0"},"versions":{"2.0.2":{"name":"@attarchi/react-native-lottie-splash-screen","version":"2.0.2","keywords":["react-native","react-native-component","react-native-splash-screen","react-native-lottie-splash-screen","lottie","animation","splash-screen","splashscreen","splash","launch-screen","launchscreen","android","ios"],"license":"MIT","_id":"@attarchi/react-native-lottie-splash-screen@2.0.2","maintainers":[{"name":"attarchi","email":"attarchi@me.com"}],"contributors":[{"name":"TaehyunHwang","email":"taehyun_hwang@tmax.co.kr"},{"name":"JoongseopWon","email":"joongseop_won@tmax.co.kr"}],"homepage":"https://github.com/HwangTaehyun/react-native-lottie-splash-screen#readme","bugs":{"url":"https://github.com/HwangTaehyun/react-native-lottie-splash-screen/issues"},"dist":{"shasum":"22ae537baf8ecdbcede1f0c830f3679a06c6326d","tarball":"https://registry.npmjs.org/@attarchi/react-native-lottie-splash-screen/-/react-native-lottie-splash-screen-2.0.2.tgz","fileCount":24,"integrity":"sha512-Ho6JtK77tqC6U1l42vScbzMbZaNsdKLbzLMboqcCyUms6faAmc+NUQ9bJk+KnG9sH+aHGMcnnnlw5N3tGKkYFg==","signatures":[{"sig":"MEUCIQCWwElRKPQ7UZNSXLQkfm9k4hbG0TGimZ6i890bU9JEOAIgIB2xd8BoeFrvkV3JjZmKkqghcVaxvUo/Hm4Q1c632g0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2202029},"main":"index.js","type":"module","types":"index.d.ts","gitHead":"68bb77955bf65cb2094af9630a62fd77565732d3","scripts":{"test":"echo \"Error: no test specified\" && exit 1","69:start":"yarn workspace example69 start","7x:start":"yarn workspace example7x start","69:install":"yarn workspace example69 install","7x:install":"yarn pack && yarn workspace example7x install"},"_npmUser":{"name":"attarchi","email":"attarchi@me.com"},"repository":{"url":"git+https://github.com/HwangTaehyun/react-native-lottie-splash-screen.git","type":"git"},"workspaces":["./examples/*"],"_npmVersion":"10.7.0","description":"A lottie splash screen for react-native, hide when application loaded ,it works on iOS and Android.","directories":{},"_nodeVersion":"18.20.4","dependencies":{"lottie-ios":"4.4.3","lottie-react-native":"6.7.2"},"_hasShrinkwrap":false,"packageManager":"yarn@3.6.4","peerDependencies":{"react-native":">=0.70.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-lottie-splash-screen_2.0.2_1730190462071_0.06029960490508701","host":"s3://npm-registry-packages"}},"2.0.3":{"name":"@attarchi/react-native-lottie-splash-screen","version":"2.0.3","keywords":["react-native","react-native-component","react-native-splash-screen","react-native-lottie-splash-screen","lottie","animation","splash-screen","splashscreen","splash","launch-screen","launchscreen","android","ios"],"license":"MIT","_id":"@attarchi/react-native-lottie-splash-screen@2.0.3","maintainers":[{"name":"attarchi","email":"attarchi@me.com"}],"contributors":[{"name":"TaehyunHwang","email":"taehyun_hwang@tmax.co.kr"},{"name":"JoongseopWon","email":"joongseop_won@tmax.co.kr"}],"homepage":"https://github.com/HwangTaehyun/react-native-lottie-splash-screen#readme","bugs":{"url":"https://github.com/HwangTaehyun/react-native-lottie-splash-screen/issues"},"dist":{"shasum":"aa07700d857d85f4638eab3d7e2b21f98fdf330d","tarball":"https://registry.npmjs.org/@attarchi/react-native-lottie-splash-screen/-/react-native-lottie-splash-screen-2.0.3.tgz","fileCount":22,"integrity":"sha512-4EL94UlslIKUkhczRvPtS7fgwol30tH1e6cVw4x0Msel68ACvqjPvHMWiZAVv9Eki3hY46Q97ZjxEyJxFanpbQ==","signatures":[{"sig":"MEQCICeOOwJjTisMUO+CQKEFdlZipnlyZycovvsletoAm3Y4AiBJ7aRj2dvbi4IPTZuCLvkmQspFwSF4w9dBgznKtRNuHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":45161},"main":"index.js","type":"module","types":"index.d.ts","gitHead":"7f71572904c8e94d266007419fa364aad3a0465f","scripts":{"test":"echo \"Error: no test specified\" && exit 1","69:start":"yarn workspace example69 start","7x:start":"yarn workspace example7x start","69:install":"yarn workspace example69 install","7x:install":"yarn pack && yarn workspace example7x install"},"_npmUser":{"name":"attarchi","email":"attarchi@me.com"},"repository":{"url":"git+https://github.com/HwangTaehyun/react-native-lottie-splash-screen.git","type":"git"},"workspaces":["./examples/*"],"_npmVersion":"10.7.0","description":"A lottie splash screen for react-native, hide when application loaded ,it works on iOS and Android.","directories":{},"_nodeVersion":"18.20.4","dependencies":{"lottie-ios":"4.4.3","lottie-react-native":"6.7.2"},"_hasShrinkwrap":false,"packageManager":"yarn@3.6.4","peerDependencies":{"react-native":">=0.70.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-lottie-splash-screen_2.0.3_1730192333311_0.01809831538269191","host":"s3://npm-registry-packages"}},"2.0.4":{"name":"@attarchi/react-native-lottie-splash-screen","version":"2.0.4","keywords":["react-native","react-native-component","react-native-splash-screen","react-native-lottie-splash-screen","lottie","animation","splash-screen","splashscreen","splash","launch-screen","launchscreen","android","ios"],"license":"MIT","_id":"@attarchi/react-native-lottie-splash-screen@2.0.4","maintainers":[{"name":"attarchi","email":"attarchi@me.com"}],"contributors":[{"name":"TaehyunHwang","email":"taehyun_hwang@tmax.co.kr"},{"name":"JoongseopWon","email":"joongseop_won@tmax.co.kr"}],"homepage":"https://github.com/HwangTaehyun/react-native-lottie-splash-screen#readme","bugs":{"url":"https://github.com/HwangTaehyun/react-native-lottie-splash-screen/issues"},"dist":{"shasum":"ec55fe96b50abc1049266d68caa7324d91b647d0","tarball":"https://registry.npmjs.org/@attarchi/react-native-lottie-splash-screen/-/react-native-lottie-splash-screen-2.0.4.tgz","fileCount":22,"integrity":"sha512-Sx36iBLzgod/+BMVZ0ypika9zUJ9iT9qJyfk5MYUch606D/ia7MGBbD3rY8PJPP0uKbMUabEe1olXD3Gg1BZFA==","signatures":[{"sig":"MEUCIHU7tvLjVs4BYyKBBr1e4N4jMWFfwh2LV0Km1dIAAkUPAiEA/nbAYsJuDfjPYWV/c3ZOxHVWj4LqjaOhGa5cvXavvFY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":45171},"main":"index.js","type":"module","types":"index.d.ts","gitHead":"68f5962723014d981e6b013c501d10780c8a73c1","scripts":{"test":"echo \"Error: no test specified\" && exit 1","69:start":"yarn workspace example69 start","7x:start":"yarn workspace example7x start","69:install":"yarn workspace example69 install","7x:install":"yarn pack && yarn workspace example7x install"},"_npmUser":{"name":"attarchi","email":"attarchi@me.com"},"repository":{"url":"git+https://github.com/HwangTaehyun/react-native-lottie-splash-screen.git","type":"git"},"workspaces":["./examples/*"],"_npmVersion":"10.7.0","description":"A lottie splash screen for react-native, hide when application loaded ,it works on iOS and Android.","directories":{},"_nodeVersion":"18.20.4","dependencies":{"lottie-ios":"4.4.3","lottie-react-native":"6.7.2"},"_hasShrinkwrap":false,"packageManager":"yarn@3.6.4","peerDependencies":{"react-native":">=0.70.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-lottie-splash-screen_2.0.4_1730192984455_0.9226681211644692","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@attarchi/react-native-lottie-splash-screen","version":"3.0.0","description":"A lottie splash screen for react-native with Swift implementation, hide when application loaded ,it works on iOS and Android.","type":"module","main":"index.js","types":"index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","bare:install":"yarn pack && yarn workspace example7x install && (cd examples/RN.0.7x-cli/ios && bundle install && bundle exec pod install)","bare:ios":"yarn workspace example7x ios","bare:android":"yarn workspace example7x android","expo:install":"yarn pack && yarn workspace expo7x install","expo:ios":"yarn workspace expo7x ios","expo:android":"yarn workspace expo7x android"},"repository":{"type":"git","url":"git+https://github.com/attarchi/react-native-lottie-splash-screen.git"},"keywords":["react-native","react-native-component","react-native-splash-screen","react-native-lottie-splash-screen","lottie","animation","splash-screen","splashscreen","splash","launch-screen","launchscreen","android","ios","swift"],"contributors":[{"name":"TaehyunHwang","email":"taehyun_hwang@tmax.co.kr"},{"name":"JoongseopWon","email":"joongseop_won@tmax.co.kr"},{"name":"Attarchi","email":"attarchi@me.com"}],"license":"MIT","bugs":{"url":"https://github.com/attarchi/react-native-lottie-splash-screen/issues"},"peerDependencies":{"react-native":">=0.70.0"},"homepage":"https://github.com/attarchi/react-native-lottie-splash-screen#readme","dependencies":{"lottie-ios":"4.5.0","lottie-react-native":"7.3.1"},"workspaces":["./examples/*"],"packageManager":"yarn@3.6.4","_id":"@attarchi/react-native-lottie-splash-screen@3.0.0","gitHead":"f2010f908d87ad02db5197423119313900ee178e","_nodeVersion":"18.20.4","_npmVersion":"10.7.0","dist":{"integrity":"sha512-YkU+9d85Rnv/og1Q2NU5qF7ae91rhe6MBA5fXUZ001pXhfh3YfXfYybzvj11RlKvpJFWVlUTln/RRBJnD7boQg==","shasum":"aeae1952e7ca0b260c107057f165c27d377231fd","tarball":"https://registry.npmjs.org/@attarchi/react-native-lottie-splash-screen/-/react-native-lottie-splash-screen-3.0.0.tgz","fileCount":22,"unpackedSize":37556,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCID8C7f10PjiCR0kmhG3JkMyh4yvErAlaFsXrRTW8cViFAiEAlu1nApthuCz7NE+JMQaEFTE9NAduZHNTMk25L/djnd0="}]},"_npmUser":{"name":"attarchi","email":"attarchi@me.com"},"directories":{},"maintainers":[{"name":"attarchi","email":"attarchi@me.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-lottie-splash-screen_3.0.0_1755133014677_0.31601499535024313"},"_hasShrinkwrap":false}},"time":{"created":"2024-10-29T08:27:41.969Z","modified":"2025-08-14T00:56:55.047Z","2.0.2":"2024-10-29T08:27:42.335Z","2.0.3":"2024-10-29T08:58:53.511Z","2.0.4":"2024-10-29T09:09:44.632Z","3.0.0":"2025-08-14T00:56:54.865Z"},"bugs":{"url":"https://github.com/attarchi/react-native-lottie-splash-screen/issues"},"license":"MIT","homepage":"https://github.com/attarchi/react-native-lottie-splash-screen#readme","keywords":["react-native","react-native-component","react-native-splash-screen","react-native-lottie-splash-screen","lottie","animation","splash-screen","splashscreen","splash","launch-screen","launchscreen","android","ios","swift"],"repository":{"type":"git","url":"git+https://github.com/attarchi/react-native-lottie-splash-screen.git"},"description":"A lottie splash screen for react-native with Swift implementation, hide when application loaded ,it works on iOS and Android.","contributors":[{"name":"TaehyunHwang","email":"taehyun_hwang@tmax.co.kr"},{"name":"JoongseopWon","email":"joongseop_won@tmax.co.kr"},{"name":"Attarchi","email":"attarchi@me.com"}],"maintainers":[{"name":"attarchi","email":"attarchi@me.com"}],"readme":"# @attarchi/react-native-lottie-splash-screen\n\n[![npm](https://img.shields.io/badge/npm-@attarchi/react--native--lottie--splash--screen-blue)](https://www.npmjs.com/package/@attarchi/react-native-lottie-splash-screen)\n[![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreen.svg)](https://github.com/attarchi/react-native-lottie-splash-screen/pulls)\n[![License MIT](https://img.shields.io/badge/license-MIT-orange.svg)](https://raw.githubusercontent.com/crazycodeboy/react-native-check-box/master/LICENSE)\n\nFork of [react-native-splash-screen](https://github.com/crazycodeboy/react-native-splash-screen) with animated splash screen using Airbnb Lottie. Works on iOS and Android.\n\n### Acknowledgement\n\nHuge thanks to the original authors and contributors of `react-native-lottie-splash-screen`. The original package became outdated and PRs/issues went unanswered. To keep it maintained and compatible with new React Native versions, this updated package is published under my namespace as `@attarchi/react-native-lottie-splash-screen`.\n\n## Contents\n- [Version Compatibilities](#versions-compatibilities)\n- [Examples](#examples)\n- [Installation - React Native Bare ≥ 0.77)](#installation-react-native--077)\n- [Installation - Expo (Bare Workflow)](#expo-bare-workflow)\n- [Usage](#usage)\n- [API](#api)\n- [Upgrade v2 → v3](#upgrade-v2--v3)\n- [Contribution](#contribution)\n\n\n## Versions Compatibilities\n| React Native | react-native-lottie-splash-screen |\n|---|---|\n| >= 0.77 | 3.x |\n| >= 0.70 & < 0.77 | [2.x](https://github.com/attarchi/react-native-lottie-splash-screen/tree/v2) |\n| < 0.70 | [1.x](https://github.com/attarchi/react-native-lottie-splash-screen/tree/v2?tab=readme-ov-file#first-stepdownload) |\n#### Warning: Version 3.x has no backward compatibility. You need to follow the [upgrade instructions](#upgrade-v2--v3).\n\n\n## Examples\n\n![react-native-lottie-splash-screen-Android](screenshot/Lottie-Splash-Screen-Android.gif)\n![react-native-lottie-splash-screen-iOS](screenshot/Lottie-Splash-Screen-IOS.gif)\n\n\nYou can clone this project and run the examples with these commands:\n\n```bash\nyarn install\n\n# Run react-native bare 79 example\nyarn bare:install\nyarn bare:ios\nyarn bare:android\n\n# Run the EXPO example\nyarn expo:install\nyarn expo:ios\nyarn expo:android\n\n```\n\n## Installation (React Native ≥ 0.77)\n\nFollow these steps in order.\n\n### 1) Install packages\n\n```bash\nyarn add @attarchi/react-native-lottie-splash-screen lottie-react-native@7.3.1\n\ncd ios && bundle install && bundle exec pod install\n```\n\n### 2) iOS setup\n\n1. Add your Lottie JSON (e.g. `loading.json`) to the Xcode project and include it in the app target.\n<details>\n <summary>How to add Lottie JSON to Xcode project</summary>\nDrag your lottie files to Xcode Project. Click Finish. That's all.\n\n![](screenshot/2022-07-09-16-40-46.png)\n![](screenshot/2022-07-09-16-41-45.png)\n</details>\n\n2. Open `AppDelegate.swift` in the `ios` folder and add the setup call:\n\n```swift\nimport UIKit\n...\nimport SplashScreen // <- Add this line\n\n@main\nclass AppDelegate: UIResponder, UIApplicationDelegate {\n  func application(...) -> Bool {\n    ...\n\n    // Before return, add this:\n    // Setup Lottie splash screen using the SplashScreen module\n    SplashScreen.setupLottieSplash(in: window, lottieName: \"loading\", backgroundColor: UIColor.white, forceToCloseByHideMethod: false)\n\n    return true\n  }\n}\n\n```\n\n3. Remove the default iOS launch screen.\n\n   By default, iOS displays the launch storyboard before your app is ready. To ensure a seamless transition to your Lottie splash, you should make the launch screen blank or match the first frame of your Lottie animation.\n\n   To make it blank, open the `LaunchScreen.storyboard` file in the `ios` folder and remove the `<subviews>` section from the main `<view>`. This will prevent any default labels or images from appearing.\n\n4. Build iOS once to verify.\n\n### 3) Android setup\n\n1. Create `android/app/src/main/res/layout/launch_screen.xml`:\n\n```xml\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<LinearLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n    android:orientation=\"vertical\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:background=\"@color/windowSplashScreenBackground\">\n  <com.airbnb.lottie.LottieAnimationView\n      android:id=\"@+id/lottie\"\n      android:layout_width=\"match_parent\"\n      android:layout_height=\"match_parent\"\n      app:lottie_rawRes=\"@raw/loading\"\n      app:lottie_autoPlay=\"false\"\n      app:lottie_loop=\"false\" />\n</LinearLayout>\n```\n\n2. Place your Lottie JSON at `android/app/src/main/res/raw/loading.json`.\n3. Ensure styles exist at `android/app/src/main/res/values/styles.xml`:\n\n```xml\n<resources>\n  <style name=\"AppTheme\" parent=\"Theme.AppCompat.DayNight.NoActionBar\">\n    <item name=\"android:editTextBackground\">@drawable/rn_edit_text_material</item>\n    <item name=\"android:statusBarColor\">#ffffff</item>\n    <!-- Add the below line: -->\n    <item name=\"android:windowDisablePreview\">true</item>\n  </style>\n\n  <!-- Also, copy these lines to you project. -->\n  <style name=\"SplashScreen_SplashAnimation\">\n    <item name=\"android:windowExitAnimation\">@android:anim/fade_out</item>\n  </style>\n\n  <style name=\"SplashScreen_SplashTheme\" parent=\"Theme.AppCompat.NoActionBar\">\n    <item name=\"android:windowAnimationStyle\">@style/SplashScreen_SplashAnimation</item>\n    <item name=\"windowActionBarOverlay\">false</item>\n    <item name=\"android:windowTranslucentStatus\">true</item>\n  </style>\n  <!-- End of copy -->\n</resources>\n```\n\n4. Ensure color exists at `android/app/src/main/res/values/colors.xml`:\n\n```xml\n<resources>\n  <color name=\"windowSplashScreenBackground\">#ffffff</color>\n</resources>\n```\n\n5. Update `MainActivity.kt`:\n\n```kotlin\n...\nimport com.facebook.react.defaults.DefaultReactActivityDelegate\nimport org.devio.rn.splashscreen.SplashScreen // <- Add this line\nimport android.os.Bundle\n\nclass MainActivity : ReactActivity() {\n\n  override fun onCreate(savedInstanceState: Bundle?) {\n    super.onCreate(savedInstanceState)\n    // Add the below line at the bottom of the onCreate function: \n    SplashScreen.show(this, R.style.SplashScreen_SplashTheme, R.id.lottie, false)\n  }\n\n...\n```\n\n6. Build Android to verify.\n\n## \n\n## Expo Bare Workflow\n\nThis package supports Expo Bare projects. It does not work in the `Expo Go` App.\n\nFollow these steps.\n\n### 1) Prebuild native projects\nIf you have a Expo project and you want a real lottie splash screen you have to eject your project to bare workflow with these commands:\n\n```bash\nnpx expo prebuild -p android\nnpx expo prebuild -p ios\n```\n\n### 2) Install and configure\n\n- Run the Installation steps above (packages, iOS and Android setup).\n- Android manifest: set your `MainActivity` theme to `@style/AppTheme` (not Expo’s splash theme).\n- In `MainActivity.kt`, ensure:\n\n```kotlin\nsetTheme(R.style.AppTheme)\nsuper.onCreate(null)\nSplashScreen.show(this, R.style.SplashScreen_SplashTheme, R.id.lottie, false) // This line\n```\n\n- iOS: Add your Lottie JSON and call `SplashScreen.setupLottieSplash(...)` in `AppDelegate.swift` as shown above.\n\n### 3) Run on devices/simulators\n\n```bash\nyarn android\nyarn ios\n```\n\nUse these instead of `yarn start` to see the native splash overlay. See [this commit](https://github.com/attarchi/react-native-lottie-splash-screen/commit/b4b6e452f13011e0f42a4a5208ae426522f51717) for a working Expo example configuration.\n\n## Usage\n\n1. Import in your app entry and hide once the app is ready:\n\n```js\nimport { useEffect } from \"react\";\nimport LottieSplashScreen from \"@attarchi/react-native-lottie-splash-screen\";\n\nexport default function App() {\n  useEffect(() => {\n    // Hide the splash screen when your app is ready.\n    // The optional chaining (?.) is important for Expo projects.\n    LottieSplashScreen?.hide();\n  }, []);\n  return null;\n}\n```\n\n## API\n\n| Method | Type     | Optional | Description |\n| ------ | -------- | -------- | ----------- |\n| hide() | function | false    | Closes the Lottie splash overlay |\n\n## Upgrade v2 → v3 (React Native ≥ 0.77)\n\nYou can see all needed changes together in these commits:\n- [iOS](https://github.com/attarchi/react-native-lottie-splash-screen/commit/da5308ac1b7c8311978584ac10ca326e2f137d3e)\n- [Android](https://github.com/attarchi/react-native-lottie-splash-screen/commit/0f94960366e64aecc4b2d41e5b20ce4bc297bae7)\n\n<details>\n <summary>Or follow this upgrade instruction:</summary>\n\n1. Update packages:\n\n```bash\nyarn add @attarchi/react-native-lottie-splash-screen@^3 lottie-react-native@^7\ncd ios && bundle exec pod install\n```\n\n2. iOS changes:\n   - Remove any previous `Dynamic.swift` and bridging-header usage.\n   - Add your Lottie JSON to the app target if not present.\n   - Add following codes in `AppDelegate.swift`:\n\n```swift\nimport SplashScreen\nSplashScreen.setupLottieSplash(in: window, lottieName: \"loading\", backgroundColor: UIColor.white, forceToCloseByHideMethod: false)\n```\n\n3. Android changes:\n   - Replace any `SplashScreen.show(this, R.style.SplashScreen_SplashTheme, R.id.lottie)` with:\n\n```kotlin\nSplashScreen.show(this, R.style.SplashScreen_SplashTheme, R.id.lottie, false)\n```\n\n   - Remove `SplashScreen.setAnimationFinished(true)` from `onCreate`.\n   - Ensure `launch_screen.xml` uses `app:lottie_autoPlay=\"false\"` and the layout/background/styles/colors from the Installation section.\n\n4. JS:\n   - Keep `LottieSplashScreen?.hide()` when your app is ready.\n</details>\n\n## Contribution\n\nIssues and PRs are welcome. The fastest way to receive help is to include a minimal repro (you can base it on the examples in this repo).\n\n---\n\n**[MIT Licensed](https://github.com/attarchi/react-native-lottie-splash-screen/blob/main/LICENSE)**\n","readmeFilename":"README.md"}