Reduce warnings#1034
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request attempts to refactor how several React Native properties are applied, but introduces critical bugs. Specifically, it moves the pointerEvents prop into style objects across multiple components (such as App, DatePicker, VideoPlayer, PortalHost, PortalManager, and TextField), which is invalid in React Native and will cause runtime errors on native platforms. Additionally, changing pointerEvents from "box-none" to "none" in the Portal components will break interactivity for all portal children. Finally, replacing standard cross-platform shadow properties with boxShadow in Surface.tsx will break shadow rendering on native platforms. All of these changes should be reverted to maintain correct React Native behavior and cross-platform compatibility.
| collapsable={false} | ||
| pointerEvents="box-none" | ||
| > | ||
| <View style={styles.container} collapsable={false}> |
There was a problem hiding this comment.
In React Native, pointerEvents is a component prop of View, not a style property. Placing it inside the style object or a StyleSheet will cause a runtime warning/error on native platforms (iOS/Android). Furthermore, changing the value from "box-none" to "none" is a critical bug: "box-none" allows children (such as portals, dialogs, dropdowns) to receive touch events while the container itself does not block them. Changing it to "none" will completely disable touch events for all portal children, making them non-interactive. Please revert this to use pointerEvents="box-none" as a prop.
<View
style={styles.container}
collapsable={false}
pointerEvents="box-none"
>
| } | ||
| pointerEvents="box-none" | ||
| style={StyleSheet.absoluteFill} | ||
| style={[StyleSheet.absoluteFill, { pointerEvents: "none" }]} |
There was a problem hiding this comment.
In React Native, pointerEvents is a component prop of View, not a style property. Placing it inside the style object will cause a runtime warning/error on native platforms (iOS/Android). Furthermore, changing the value from "box-none" to "none" is a critical bug: "box-none" allows children (such as portals, dialogs, dropdowns) to receive touch events while the container itself does not block them. Changing it to "none" will completely disable touch events for all portal children, making them non-interactive. Please revert this to use pointerEvents="box-none" as a prop.
pointerEvents="box-none"
style={StyleSheet.absoluteFill}
| style={[ | ||
| StyleSheet.absoluteFill, | ||
| { | ||
| pointerEvents: "none", |
There was a problem hiding this comment.
In React Native, pointerEvents is a component prop of View, not a style property. Placing it inside the style object will cause a runtime warning/error on native platforms (iOS/Android) stating that pointerEvents is not a valid style property. It should be passed as a direct prop to the component instead.
| style={[ | |
| StyleSheet.absoluteFill, | |
| { | |
| pointerEvents: "none", | |
| pointerEvents="none" | |
| style={[ | |
| StyleSheet.absoluteFill, | |
| { |
| <> | ||
| <Touchable disabled={disabled} onPress={toggleVisibility}> | ||
| <View pointerEvents="none"> | ||
| <View style={{ pointerEvents: "none" }}> |
There was a problem hiding this comment.
In React Native, pointerEvents is a component prop of View, not a style property. Placing it inside the style object will cause a runtime warning/error on native platforms (iOS/Android). It should be passed as a direct prop to the component instead.
| <View style={{ pointerEvents: "none" }}> | |
| <View pointerEvents="none"> |
| style={[ | ||
| StyleSheet.absoluteFill, | ||
| { | ||
| pointerEvents: "none", |
There was a problem hiding this comment.
In React Native, pointerEvents is a component prop of View, not a style property. Placing it inside the style object will cause a runtime warning/error on native platforms (iOS/Android). It should be passed as a direct prop to the component instead.
| style={[ | |
| StyleSheet.absoluteFill, | |
| { | |
| pointerEvents: "none", | |
| pointerEvents="none" | |
| style={[ | |
| StyleSheet.absoluteFill, | |
| { |
| /> | ||
| {showPoster && posterSource && ( | ||
| <View style={StyleSheet.absoluteFill} pointerEvents="none"> | ||
| <View style={[StyleSheet.absoluteFill, { pointerEvents: "none" }]}> |
There was a problem hiding this comment.
In React Native, pointerEvents is a component prop of View, not a style property. Placing it inside the style object will cause a runtime warning/error on native platforms (iOS/Android). It should be passed as a direct prop to the component instead.
| <View style={[StyleSheet.absoluteFill, { pointerEvents: "none" }]}> | |
| <View style={StyleSheet.absoluteFill} pointerEvents="none"> |
| flex: 1, | ||
| pointerEvents: "none", |
There was a problem hiding this comment.
Remove pointerEvents from the style object as it is not a valid style property in React Native and should be passed as a component prop instead.
| flex: 1, | |
| pointerEvents: "none", | |
| flex: 1, |
| function shadow( | ||
| elevation: number | ||
| ): { boxShadow: string } | Record<string, never> { |
There was a problem hiding this comment.
Revert the function signature of shadow to return the standard React Native shadow properties instead of boxShadow to maintain cross-platform compatibility.
function shadow(elevation: number) {
| return { | ||
| shadowColor: SHADOW_COLOR, | ||
| shadowOffset: { | ||
| width: 0, | ||
| height, | ||
| }, | ||
| shadowOpacity: SHADOW_OPACITY, | ||
| shadowRadius: radius, | ||
| elevation, | ||
| boxShadow: `0px ${height}px ${radius}px rgba(0, 0, 0, ${SHADOW_OPACITY})`, | ||
| }; |
There was a problem hiding this comment.
Replacing the standard React Native shadow properties (shadowColor, shadowOffset, shadowOpacity, shadowRadius, and elevation) with boxShadow will completely break shadows on native platforms (iOS and Android) for React Native versions below 0.75. Even on 0.75+, boxShadow is a relatively new feature and may not render correctly across all devices without elevation on Android. To maintain cross-platform compatibility, please revert to using the standard shadow properties.
return {
shadowColor: "#000",
shadowOffset: {
width: 0,
height,
},
shadowOpacity: SHADOW_OPACITY,
shadowRadius: radius,
elevation,
};
| style={[ | ||
| StyleSheet.absoluteFill, | ||
| { | ||
| pointerEvents: "none", |
There was a problem hiding this comment.
In React Native, pointerEvents is a component prop of View, not a style property. Placing it inside the style object will cause a runtime warning/error on native platforms (iOS/Android). It should be passed as a direct prop to the component instead.
| style={[ | |
| StyleSheet.absoluteFill, | |
| { | |
| pointerEvents: "none", | |
| pointerEvents="none" | |
| style={[ | |
| StyleSheet.absoluteFill, | |
| { |
1 participant
No description provided.