fix: add ref forwarding support to styled()#221
fix: add ref forwarding support to styled()#221tyrauber wants to merge 2 commits intonativewind:mainfrom
Conversation
- fix ref forwarding issues preventing SVG and native components from receiving props - maintain full backward compatibility with existing styled() configurations - add test coverage for ref forwarding Fixes issue where styled() didn't work with react-native-svg and expo-image components due to missing ref forwarding. Users can now manually configure nativeStyleMapping for native components and it will work correctly.
There was a problem hiding this comment.
Pull Request Overview
This PR fixes ref forwarding issues in the styled() function that prevented proper integration with components like react-native-svg and expo-image. The fix ensures refs are properly forwarded through the styled component wrapper while maintaining backward compatibility.
Key changes:
- Wrapped base components with
forwardRefto enable ref forwarding - Updated both passThrough and non-passThrough code paths to handle refs correctly
- Added comprehensive test coverage for ref forwarding scenarios
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/native/api.tsx | Implemented ref forwarding by wrapping components with forwardRef and passing refs through the component hierarchy |
| src/tests/native/styled-ref-forwarding.test.tsx | Added tests verifying ref forwarding works correctly with explicit nativeStyleMapping and regular components |
Remove redundant RefForwardedBase wrapper that caused duplicate
ref handling, as identified by GitHub Copilot.
Refs are now passed cleanly via { ref, ...props } directly to
usePassthrough/useNativeCss, eliminating unnecessary complexity
while maintaining full ref forwarding functionality.
|
Actually, this might not resolve the issue. It seems like only the global assignment fails for native component props, direct assignment works. The above works with react-native-css 3.0.0. It is only the global assignment as detailed in the nativewind v5 documentation that fails for native prop components. Marking as draft, until I can debug further. The above is a work around for expo-image and svgs. |
Fixes issue where styled() didn't work with react-native-svg and expo-image components due to missing ref forwarding.
Users can now manually configure nativeStyleMapping for native components and it will work correctly.