The onboarding UI contains a button. The button is square and has an outer ring to inform users of how far they are within the onboarding flow. This button will need to be created as a reusable view so that it can be used across all three onboarding views.
Please refer to the Figma file for additional details.
Proposed Solution
SwiftUI does not contain a built-in square. Nonetheless, a rounded rectangle could be used instead and the frame height and width could be modified.
Create shape using a ZStack
Create three rectangles - middle, and two outer
The Second rectangle should be gray
The third rectangle should be black
Create two variables of type CGFloat for the position from and to - these will be used to update the black outer ring
Add system image for the Chevron - which can be found in SFSymbols titled chevron.right
Requirement
The onboarding UI contains a button. The button is square and has an outer ring to inform users of how far they are within the onboarding flow. This button will need to be created as a reusable view so that it can be used across all three onboarding views.
Please refer to the Figma file for additional details.
Proposed Solution
SwiftUI does not contain a built-in square. Nonetheless, a rounded rectangle could be used instead and the frame height and width could be modified.