Skip to content
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

fix: handle undefined for aspect ratio #2561

Closed
wants to merge 1 commit into from
Closed

fix: handle undefined for aspect ratio #2561

wants to merge 1 commit into from

Conversation

itsramiel
Copy link
Contributor

Summary

AspectRatio can technically be passed as undefined in the stylesheet and that is handled on ios/android.

Passing undefined to aspectRatio on web leads to the following error:
TypeError: Cannot read properties of undefined (reading 'toString')

While it does not make sense as to why you might explicitly want to pass undefined to aspectRatio, my use case is that I had a custom component that was setting the aspectRatio as well as accepting styles prop that overrides the defined styles so I had to pass undefined for aspectRatio. This works fine or ios/android but crashed on web.

I also added a test case

@codesandbox-ci
Copy link

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 10eefe9:

Sandbox Source
react-native-web-examples Configuration

@@ -182,7 +182,7 @@ export const preprocess = <T: {| [key: string]: any |}>(
continue;
}

if (prop === 'aspectRatio') {
if (prop === 'aspectRatio' && value !== undefined) {
Copy link
Owner

Choose a reason for hiding this comment

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

This check should probably be != null

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The thing is aspectRatio's type is either string, number, or undefined. If null was used, then a type error should be shown I guess, but undefined is valid. That's why I put a check for undefined. If we dont check for undefined, then the app crashes.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

We can do (typeof aspectRatio === 'number' || typeof aspectRatio === 'string') if you want. This way we check it is what we want rather than checking the opposite

@necolas necolas closed this in 617b438 Jul 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants