-
Notifications
You must be signed in to change notification settings - Fork 66
Add the Quick Start example to the React Native example app #374
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR adds a comprehensive Quick Start example to the React Native example app, demonstrating key Rive functionality including data binding, view model properties, and triggers.
- Adds a new QuickStart.tsx component showcasing Rive React Native integration patterns
- Integrates the Quick Start example into the app navigation and home screen
- Includes the required quick_start.riv asset file in the iOS project configuration
Reviewed Changes
Copilot reviewed 4 out of 7 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| example/ios/example.xcodeproj/project.pbxproj | Adds quick_start.riv asset to iOS project resources and simplifies OTHER_LDFLAGS configuration |
| example/app/index.tsx | Adds Quick Start navigation link to the home screen |
| example/app/_layout.tsx | Registers the Quick Start screen in the navigation stack |
| example/app/(examples)/QuickStart.tsx | Implements the comprehensive Quick Start example component |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| const handleTakeDamage = () => { | ||
| if (health && setHealth) { | ||
| setHealth(health - 7); | ||
| // If all state machines have settled, you might need to wake the state machine back up. | ||
| // This can happen when all animations have finished playing. | ||
| riveRef?.play(); | ||
| } | ||
| }; |
Copilot
AI
Sep 23, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The magic number 7 for damage amount should be extracted to a named constant to improve code readability and maintainability.
| const handleMaxHealth = () => { | ||
| if (setHealth) { | ||
| setHealth(100); | ||
| riveRef?.play(); | ||
| } | ||
| }; |
Copilot
AI
Sep 23, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The magic number 100 for maximum health should be extracted to a named constant to improve code readability and maintainability.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
This is the one we'd like to have for all runtimes.
CleanShot.2025-09-23.at.16.42.04.mp4