Skip to content

Reduce warnings #1034

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.

Sign up for GitHub

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
YoussefHenna merged 1 commit into from
May 27, 2026
Merged

Reduce warnings #1034

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion example/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,10 +314,10 @@ const AnimatedSplashScreen: React.FC<
{isAppReady && children}
{!isSplashAnimationComplete && (
<Animated.View
pointerEvents="none"
style={[
StyleSheet.absoluteFill,
{
pointerEvents: "none",
Comment on lines 317 to +320
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

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.

Suggested change
style={[
StyleSheet.absoluteFill,
{
pointerEvents: "none",
pointerEvents="none"
style={[
StyleSheet.absoluteFill,
{

backgroundColor:
Constants?.expoConfig?.splash?.backgroundColor ||
"rgba(90, 69, 255, 1)",
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/components/DatePicker/DatePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -444,7 +444,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
return (
<>
<Touchable disabled={disabled} onPress={toggleVisibility}>
<View pointerEvents="none">
<View style={{ pointerEvents: "none" }}>
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

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.

Suggested change
<View style={{ pointerEvents: "none" }}>
<View pointerEvents="none">

<View
style={StyleSheet.flatten([
styles.container,
Expand Down Expand Up @@ -491,10 +491,10 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
// Position colored placeholder and gray placeholder on top of each other and crossfade them
// This gives the effect of animating the color, but allows us to use native driver
<View
pointerEvents="none"
style={[
StyleSheet.absoluteFill,
{
pointerEvents: "none",
Comment on lines 494 to +497
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

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.

Suggested change
style={[
StyleSheet.absoluteFill,
{
pointerEvents: "none",
pointerEvents="none"
style={[
StyleSheet.absoluteFill,
{

opacity:
// Hide the label in minimized state until we measure its width
date || focused ? (labelLayout.measured ? 1 : 0) : 1,
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/MediaPlayer/VideoPlayer/VideoPlayer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,7 +268,7 @@ const VideoPlayer = React.forwardRef<VideoPlayerRef, VideoPlayerProps>(
{...videoPlayerProps}
/>
{showPoster && posterSource && (
<View style={StyleSheet.absoluteFill} pointerEvents="none">
<View style={[StyleSheet.absoluteFill, { pointerEvents: "none" }]}>
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

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.

Suggested change
<View style={[StyleSheet.absoluteFill, { pointerEvents: "none" }]}>
<View style={StyleSheet.absoluteFill} pointerEvents="none">

<Image
source={posterSource}
resizeMode={posterResizeMode}
Expand Down
7 changes: 2 additions & 5 deletions packages/core/src/components/Portal/PortalHost.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,11 +124,7 @@ export default class PortalHost extends React.Component<Props> {
}}
>
{/* Need collapsable=false here to clip the elevations, otherwise they appear above Portal components */}
<View
style={styles.container}
collapsable={false}
pointerEvents="box-none"
>
<View style={styles.container} collapsable={false}>
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

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"
        >

{this.props.children}
</View>
<PortalManager ref={this.setManager} />
Expand All @@ -140,5 +136,6 @@ export default class PortalHost extends React.Component<Props> {
const styles = StyleSheet.create({
container: {
flex: 1,
pointerEvents: "none",
Comment on lines 138 to +139
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

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.

Suggested change
flex: 1,
pointerEvents: "none",
flex: 1,

},
});
3 changes: 1 addition & 2 deletions packages/core/src/components/Portal/PortalManager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,7 @@ export default class PortalManager extends React.PureComponent<object, State> {
collapsable={
false /* Need collapsable=false here to clip the elevations, otherwise they appear above sibling components */
}
pointerEvents="box-none"
style={StyleSheet.absoluteFill}
style={[StyleSheet.absoluteFill, { pointerEvents: "none" }]}
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

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}

>
{children}
</View>
Expand Down
14 changes: 4 additions & 10 deletions packages/core/src/components/Surface.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,11 @@ const Surface: React.FC<React.PropsWithChildren<Props>> = ({
);
};

const SHADOW_COLOR = "#000";
const SHADOW_OPACITY = 0.24;

function shadow(elevation: number) {
function shadow(
elevation: number
): { boxShadow: string } | Record<string, never> {
Comment on lines +61 to +63
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

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) {

if (elevation === 0) {
return {};
}
Expand All @@ -80,14 +81,7 @@ 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})`,
};
Comment on lines 83 to 85
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

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,
  };

}

Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/TextField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -472,10 +472,10 @@ class TextField extends React.Component<Props, State> {
// Position colored placeholder and gray placeholder on top of each other and crossfade them
// This gives the effect of animating the color, but allows us to use native driver
<View
pointerEvents="none"
style={[
StyleSheet.absoluteFill,
{
pointerEvents: "none",
Comment on lines 475 to +478
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

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.

Suggested change
style={[
StyleSheet.absoluteFill,
{
pointerEvents: "none",
pointerEvents="none"
style={[
StyleSheet.absoluteFill,
{

opacity:
// Hide the label in minimized state until we measure its width
this.state.value || this.state.focused
Expand Down
6 changes: 1 addition & 5 deletions packages/core/src/deprecated-components/AvoidKeyboardView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,7 @@ try {
const avoidSoftInputPackage = require("react-native-avoid-softinput");
AvoidSoftInput = avoidSoftInputPackage.AvoidSoftInput;
AvoidSoftInputView = avoidSoftInputPackage.AvoidSoftInputView;
} catch (_) {
console.warn(
"AvoidKeyboardView: `react-native-avoid-softinput` is not installed, falling back to `View`. No keyboard avoiding capabilties will be used."
);
}
} catch (_) {}

/**
* Requires additional setup: https://mateusz1913.github.io/react-native-avoid-softinput/docs/guides
Expand Down