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

DRAFT Add web support #2

Closed
wants to merge 3 commits into from
Closed

Conversation

nandorojo
Copy link

@nandorojo nandorojo commented Jun 19, 2023

Simple addition for web support. Here's a snack playground. It's possible filter: 'saturation()' or hue-rotate or opacity() could be used to implement the color props.

Copy link
Member

@gtokman gtokman left a comment

Choose a reason for hiding this comment

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

lgtm, happy to include the snack in the README when this lands and let people try it on web!

The last thing is to clean up the linter errors and comments, happy to test/approve then.

Comment on lines +12 to +14
// TODO can blurTintColor get implemented on Web?
// TODO can colorTintOpacity get implemented on Web?
// TODO can scale get implemented on Web? How would it work?
Copy link
Member

Choose a reason for hiding this comment

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

The blurTintColor is a view beneath the blur that we can add as a child here and default its opacity to 0 and its background color to transparent, which will just use a light blur. Same with the colorTintOpacity, it works on the view when the tint color is set.

I included it to allow using more than light and dark which are the only two options on iOS. It allows you to pick any color and achieve a similar effects to this:

CleanShot.2023-06-20.at.08.34.28.mp4

Comment on lines +15 to +16
// Lastly: if we want reanimated support for the blurRadius, I wonder if it'd work out of the box, or if we need a reanimated implementation in here.
return <View style={[style, blurEnabled && { filter: `blur(${blurRadius}px)` }]} {...props} />
Copy link
Member

Choose a reason for hiding this comment

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

I haven't used reanimated on web, if it's 1:1 with mobile, wrapping this in an Animated.create... should work. I included an example of that for iOS in the readme.

@gtokman gtokman closed this May 18, 2024
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.

None yet

2 participants