top-welcome-screens: Ten Animated iOS Onboarding Screens in React Native Expo
How top iOS apps say hello | 10 animated welcome screens inspired by top-earning apps. Rebuilt in React Native + Expo.
At a glance
- What is it?
- top-welcome-screens is a GPL-3.0-licensed React Native Expo UI kit containing ten animated welcome screen implementations inspired by leading iOS apps, each as a self-contained TypeScript component built with React Native Reanimated. It is an educational reference for studying mobile onboarding motion design, not a drop-in production library.
- Who is it for?
- top-welcome-screens is a good reference for React Native developers studying how polished mobile onboarding works: the authored motion timelines, semantic IDs for testing, and copy-paste agent prompts lower the cost of integrating one screen into an existing app.
- Can I use it commercially?
- Yes, with conditions. GPL-3.0 is a copyleft licence: if you distribute software that includes it, you must release that software's source code under the same licence. Running it internally without distributing it does not trigger that obligation.
- Is it still maintained?
- Yes. The repository last received commits 54 days ago.
- What is it written in?
- Mainly TypeScript, according to GitHub's language statistics.
Answers come from the project's GitHub data, last synced on October 1, 2026, and from our analysis. They are not legal advice.
Editorial analysis
What the Repository Provides and How It Is Scoped
top-welcome-screens is described in the README as a React Native Expo UI kit built for developers studying how polished mobile onboarding works. It contains ten full-height TypeScript components, each an independent study of a welcome screen inspired by a specific leading iOS app. The components are powered by React Native Reanimated with authored animation timelines, responsive scaling, reduced-motion handling, accessible actions, and a deterministic final-state mode.
The repository is from Appllama, a product-flow research library. It is explicitly not a redistributable brand asset: the README includes a prominently placed educational reference notice stating that the screens must not be shipped unchanged, and that every third-party brand element must be replaced and the final layout made meaningfully unique before any public or commercial use.
The Ten Screens: Component Names, Screen IDs, and Entrance Timings
Each screen has a component name, a screen ID for semantic targeting, and a documented entrance animation duration. The README lists all ten:
- Duolingo-inspired (DuolingoWelcome, `duolingo`, 2.667 s) - Strava-inspired (StravaWelcome, `strava`, 6.600 s) - MyFitnessPal-inspired (MyFitnessPalWelcome, `myfitnesspal`, 8.867 s) - Perplexity-inspired (PerplexityWelcome, `perplexity`, final state only) - Yazio-inspired (YazioWelcome, `yazio`, 1.733 s) - onX Hunt-inspired (OnxHuntWelcome, `onx-hunt`, 1.467 s) - Speak & Learn-inspired (SpeakLearnWelcome, `speak-learn`, 4.940 s) - Hallow-inspired (HallowWelcome, `hallow`, 4.500 s) - SCRL-inspired (ScrlWelcome, `scrl`, 1.999 s) - Speak: Language Learning-inspired (SpeakLanguageWelcome, `speak-language`, 5.070 s)
The Perplexity-inspired screen has no entrance animation. The README explains that the research set contained only a final-state reference and that the implementation deliberately avoids inventing unsupported motion. This is a notable constraint: the screens are reconstructed from observation, not from access to original source code, so where reference material was limited, the implementation stopped rather than speculating.
Running the Gallery and Installing a Single Screen
All ten components live in a single Expo Router app that can be run locally as a gallery. The `package.json` sets the entry point as `expo-router/entry`, indicating a file-based routing setup. The repository requires Node.js 22.13.0 or higher, as specified in `engines` in `package.json`.
The README documents that you can run all ten examples from the one Expo Router app, copy a single named component into an existing app, or paste a screen-specific agent prompt into a coding agent like Claude Code, Cursor, or Codex and have the agent integrate one screen while preserving your app's architecture.
Every visible action can be triggered through typed semantic IDs, which makes the components testable without relying on coordinates. For the Duolingo-inspired screen, the semantic actions are `duolingo.get-started` and `duolingo.log-in`. The relevant packages for that screen are `expo-asset`, `expo-font`, `expo-image`, `expo-status-bar`, `@expo-google-fonts/nunito`, `@react-native-masked-view/masked-view`, `react-native-reanimated`, and `react-native-worklets`.
Copy-Paste Agent Prompts for Each Screen
A distinctive feature of the repository is the per-screen agent prompts. Each screen has a collapsible section in the README containing a complete prompt designed to be pasted into a coding agent while it is working inside an existing Expo app.
The prompts are written to be strict about two things: preserving your current app architecture and replacing third-party commercial identity before release. The Duolingo-inspired screen prompt, for example, instructs the agent to inspect your Expo SDK, React Native version, router, package manager, font loading, native splash configuration, authentication routes, and existing dependencies before making any changes. It specifies which repository files to reference (`src/welcome-screens/duolingo.tsx`, the Duolingo section of `docs/MOTION_SPEC.md`, shared helpers) and which to avoid (the demo router, Zustand gallery store, and unrelated screens).
This level of specificity in the prompt means an engineer can hand a coding agent the task of integrating one screen without writing the integration instructions from scratch.
Motion Spec, Asset Provenance, and the Docs Directory
The `docs/` directory contains `MOTION_SPEC.md` and `ASSET_PROVENANCE.md`, which are referenced in the agent prompts. `MOTION_SPEC.md` documents the motion timings and animation structure for each screen as recovered from observation. `ASSET_PROVENANCE.md` records where each asset came from and its usage status.
The asset provenance documentation is directly connected to the intellectual property notice. Because the screens are inspired by commercial products, tracking the origin and status of every image, font, and visual element is part of the project's legal hygiene. The README notes that showcase artwork uses simulator captures of the implementation and that original reference clips and stills are not redistributed.
A `NOTICE.md` at the top level supplements the GPL-3.0 license with specific notices about third-party content. Reading both `NOTICE.md` and `docs/ASSET_PROVENANCE.md` is essential before using any visual assets from the repository.
Limitations: GPL-3.0 Copyleft, Educational Scope, and iOS Focus
The GPL-3.0 license is a copyleft license. An application that distributes modified versions of GPL-3.0 code must make its source available under the same license. For many commercial mobile apps, this is incompatible with their business model. The `exports` field in `package.json` exposes the components as a package, but the copyleft obligation follows the code regardless of how it is imported.
The repository is explicitly educational in scope. The README states it is an independent, unofficial project not affiliated with or endorsed by any referenced company. The screens are studies, not licensed reproductions. Shipping any screen unchanged is prohibited by the README's own notice, independent of the license.
The repository focuses on iOS apps as inspiration sources. The components are built in React Native Expo, which means they run on Android too, but the motion design references are drawn from the iOS app ecosystem. Android-specific onboarding conventions are not addressed.
Comparing top-welcome-screens with NativeWind and Expo UI Kits
NativeWind is a utility-class styling library for React Native that adapts Tailwind CSS conventions to mobile. It provides a styling layer, not pre-built animated components. An engineer using NativeWind still needs to author the animation logic and motion timelines that top-welcome-screens provides ready-made.
Expo's own example repositories and community UI kits typically provide functional patterns without the studied animation specificity of top-welcome-screens. The distinction here is the authored motion timings, reduced-motion handling, and the agent prompts designed for integration into an existing project. For a developer who wants to understand specifically how leading iOS apps handle onboarding animation pacing and UX, top-welcome-screens provides a more focused reference than a general-purpose UI kit.
Editorial conclusion
top-welcome-screens is a good reference for React Native developers studying how polished mobile onboarding works: the authored motion timelines, semantic IDs for testing, and copy-paste agent prompts lower the cost of integrating one screen into an existing app. It is the wrong choice if you want a production-ready, brand-neutral onboarding template: the README's intellectual property notice is explicit that every third-party name, logo, mascot, color system, and brand element must be replaced and the layout made meaningfully unique before any public or commercial use. The GPL-3.0 license also requires that any app distributing modified code under the same license make its source available. Verify your app's license compatibility before shipping.
Frequently asked questions
Can I use the top-welcome-screens components in a commercial app?
The GPL-3.0 license requires that any app distributing modified code make its source available under the same terms. The README also requires replacing all third-party brand elements and making the layout meaningfully unique before any public or commercial use. Both conditions must be satisfied.
Does top-welcome-screens support Android as well as iOS?
The components are built with React Native Expo, which targets both iOS and Android. The README describes the project as an iOS UI study, and the screen inspirations come from iOS apps, but the Expo Reanimated components run on Android as well.
What React Native and Expo versions does top-welcome-screens require?
The package.json requires Node.js 22.13.0 or higher. The specific Expo SDK and React Native versions are listed in package.json as dependencies. The Duolingo-inspired screen's agent prompt instructs agents to inspect your current Expo SDK and React Native version for compatibility before installing.
How are the animation timings in top-welcome-screens determined?
The README states that the motion timings were recovered through observation of the reference apps rather than from access to original source code. Where research material was limited, as with the Perplexity-inspired screen, the implementation uses a final-state only and avoids inventing unsupported motion.
Official sources
Add this badge to your README
If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.
[](https://hysenlabs.com/projects/appllama-top-welcome-screens)