-
-
Notifications
You must be signed in to change notification settings - Fork 4.7k
fix(AirbnbRating): Custom images not rendering, memory leak, and animation bugs #3992
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
Merged
theianmay
merged 13 commits into
react-native-elements:next
from
theianmay:bugfix/ratings-lint-custimg-fixes
Oct 31, 2025
Merged
fix(AirbnbRating): Custom images not rendering, memory leak, and animation bugs #3992
theianmay
merged 13 commits into
react-native-elements:next
from
theianmay:bugfix/ratings-lint-custimg-fixes
Oct 31, 2025
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…able shadowing in TapRating component - Renamed position parameter to selectedPosition in starSelectedInPosition function for better clarity - Updated function references to use the new parameter name consistently - No behavioral changes, purely internal code improvement to resolve ESLint warning
- Alphabetically sorted dev dependencies in root package.json for better readability - Removed unused @rn-vui/ratings package from base/package.json dependencies
- Code now imports from local files after the integration
- Removed hardcoded custom type fallback from TYPES object to prevent conflicts with user-provided images - Updated renderRatings to use provided ratingImage prop when type is 'custom' - Added ratingImage dependency to useMemo to ensure proper re-rendering when custom image changes - Fixed potential undefined source issue when using custom rating type
- Re-enabled previously commented out test case for SwipeRating custom image functionality - Test verifies that SwipeRating component correctly renders with custom bell.png image - Ensures custom image source is properly passed to all rating elements
- Added support for custom rating colors when type is 'custom', using ratingColor and ratingBackgroundColor props - Fixed text color logic to use ratingTextColor prop or fallback to type-based color - Removed direct tintColor application on rating images for temporary testing - Consolidated color logic to use consistent textColor variable throughout component
- Added clarifying comment about 'custom' rating type handling in SwipeRating component - Documented that custom type uses props directly (ratingImage, ratingColor, ratingBackgroundColor) instead of TYPES entry - Explained conditional logic approach for custom rating type implementation
- Added tintColor prop to SwipeRating component to allow customization of rating image color - Updated image style to apply the tintColor prop value - Added tintColor to useCallback dependency array to ensure proper re-rendering when color changes
- Added ratingBackgroundColor prop to customize the inactive icon color in ratings view - Set default background color to light gray (#c8c7c8) to improve visual contrast - Maintains existing water-themed rating image and blue active color scheme
- Added useEffect hook to properly manage position listener lifecycle - Added cleanup function to remove position listener on component unmount - Wrapped position.addListener in useEffect to ensure proper dependency tracking - Fixed potential memory leak from dangling animation listener
- Updated test IDs from RNVUI to RNEUI prefix for consistency across components - Changed test IDs in SwipeRating component and its tests - Changed test IDs in TapRating component and its tests - Updated test ID in Star component - Updated corresponding snapshot tests to reflect new test ID naming
- Wrapped Animated.Value in useRef hook to maintain single animation instance across re-renders - Changed direct value assignment to use ref.current to ensure proper cleanup - Prevents creation of new Animated.Value on each render which could cause performance issues and memory leaks
- Updated test ID format from "RNEUI_Star" to "RNEUI__Star" for consistency with design system conventions - Updated test ID format from "RNEUI_Star-image" to "RNEUI__Star-image" to match new pattern - Renamed prop from ratingColor to tintColor in SwipeRating test to align with component API
github-actions bot
pushed a commit
to theianmay/react-native-elements
that referenced
this pull request
Oct 31, 2025
…atings-lint-custimg-fixes fix(AirbnbRating): Custom images not rendering, memory leak, and animation bugs
github-actions bot
pushed a commit
to theianmay/react-native-elements
that referenced
this pull request
Oct 31, 2025
…atings-lint-custimg-fixes fix(AirbnbRating): Custom images not rendering, memory leak, and animation bugs
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Motivation
This PR addresses issue #3989 where custom rating images were not rendering correctly in the SwipeRating component. While investigating and fixing this issue, several additional bugs were discovered and resolved.
Primary Issue (from #3989):
type="custom"withratingImageprop) were not displaying - component would show stars insteadAdditional Issues Discovered During Investigation:
Context:
While testing the custom images fix in the example app, I compared the implementation with the original
react-native-ratingslibrary and discovered the missing listener cleanup. User interaction testing revealed the animation persistence bug in TapRating.Fixes #3989
Type of change
How Has This Been Tested?
exampleapp - Verified custom water droplet images render correctly, smooth animations on Android emulator, no memory warningsChecklist
Additional context
Technical Details:
renderRatingsto useratingImagewhentype="custom"React.useRefto persist Animated.Value across renders (prevents animation interruption)useEffectreturn function (prevents memory leaks)ratingColorto affecttintColor(should usetintColorprop)