Skip to content

feat(ios): View background UI rework - #10374

Merged
NathanWalker merged 30 commits into
NativeScript:mainfrom
CatchABus:ios-box-shadow-radius-fix
Sep 6, 2023
Merged

NathanWalker merged 30 commits into
NativeScript:mainfrom
CatchABus:ios-box-shadow-radius-fix

Conversation

@CatchABus

@CatchABus CatchABus commented Sep 5, 2023 •

Copy link
Copy Markdown
Contributor

PR Checklist

What is the current behavior?

Right now, we have certain limitations regarding iOS border colors and radius, shadows, and animating views that own any of those.

What is the new behavior?

This is a series of improvements regarding iOS background shadows and borders.

sample

Animation

  • Fixed background to-value always being undefined
  • Fixed width animation using height as original value
  • Gradient background will animate during view width/height animation
  • Clip path size will animate during view width/height animation
  • Border layers will animate during view width/height animation
  • Shadow will animate during view width/height animation
  • Avoid setting CALayer frame property directly as it breaks animations.
  • There were cases animations were permanently disabled for CALayers. This has been fixed.

Reusable native view layers

  • Depending on the state of the view, CALayer instances won't have to be recreated when background gets redrawn
  • Border layer mask will not be applied if borders are not rounded

Borders

  • New formula for colorful borders to support border-radius effect

Shadows

  • From now on, a separate layer will be used to render shadow. This layer will be nested in super layer as it helps support shadow and non-uniform border radius at the same time
  • Box shadow will now support rounded corners, uniform or not
  • Views will now maintain transparent background with box shadow
  • Shadow properties like spread radius will have proper conversion to dip
  • Views with gradient and shadow will have border-radius applied properly
  • Shadow layer will no longer need hackish clipToBounds solutions as it's nested in super layer
  • Added colorful border mode in toolbox sample

UIScrollView

  • Views that extend UIScrollView will maintain position of nested CALayers (e.g. gradient, shadow, border)
  • Updated UI app samples with more examples

Button

  • Removed backgroundColorProperty native getter/setter as it broke existing behaviour

ListPicker

  • Removed backgroundColorProperty native getter/setter as it broke existing behaviour

View disposal

  • Old layout values will reset once native view is disposed. This helps redrawing background when view is re-added to view tree

Utils

  • Added new function extendPointsToTargetY

Closes #10250 #9869 #6919 .
Partially fixes #6919 (needs fix for android)
Additions for #4762
Removed #9524 changes as they broke background handling

BREAKING CHANGES: CSSShadow was renamed into ShadowCSSValues.

It can be revisited on a separate PR for both platforms
@cla-bot cla-bot Bot added the cla: yes label Sep 5, 2023
@CatchABus
CatchABus marked this pull request as draft September 5, 2023 22:59
@CatchABus
CatchABus marked this pull request as ready for review September 5, 2023 23:32
@NathanWalker
NathanWalker merged commit 39eed52 into NativeScript:main Sep 6, 2023
@vallemar

vallemar commented Sep 6, 2023

Copy link
Copy Markdown
Contributor

@CatchABus Great job, I think the shadows look even better. On the other hand is it possible that the shadow grows with the animation but is not respecting the origin of the view? I think I'm seeing this behavior. This comes in relation to #10250 I have originY="0" in the view but the shadow seems to grow from 0.5

Grabacion.de.pantalla.2023-09-07.a.las.0.55.32.mov

@CatchABus

Copy link
Copy Markdown
Contributor Author

@CatchABus Great job, I think the shadows look even better. On the other hand is it possible that the shadow grows with the animation but is not respecting the origin of the view? I think I'm seeing this behavior. This comes in relation to #10250 I have originY="0" in the view but the shadow seems to grow from 0.5

Grabacion.de.pantalla.2023-09-07.a.las.0.55.32.mov

Tbh, I forgot to try animations with different origin. I'll check it and let you know!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Box shadow does not respect the height in animations Border-radius not applied with multiple border colors

3 participants