iOS 18 Highlights with NativeScript

Requires Xcode 16 Beta with iOS 18 simulator.

ns-ios18-symbols.mp4

ns-ios18-metal.mp4

Metal + SwiftUI

Example from WWDC24 10151: https://developer.apple.com/videos/play/wwdc2024/10151/

Try with HMR (Hot Module Replacement):

Adjust app-routing.module from:

{ path: '', redirectTo: '/items', pathMatch: 'full' },

to:

{ path: '', redirectTo: '/metal', pathMatch: 'full' },

Run with: ns debug ios

Try changing imageSrc to different included assets in App_Resources/iOS/Assets.xcassets such as: Lily Pads, Fish, Succulent, palm_tree.

<SwiftUI
    swiftId="rippleView"
    [data]="{ imageSrc: 'Lily Pads' }"

Try without HMR:

ns debug ios --no-hmr

SF Symbols 6

https://developer.apple.com/sf-symbols/

Try with HMR (Hot Module Replacement):

Adjust app-routing.module from:

{ path: '', redirectTo: '/items', pathMatch: 'full' },

to:

{ path: '', redirectTo: '/sf-symbols', pathMatch: 'full' },

Now run with: ns debug ios

Try without HMR:

ns debug ios --no-hmr

Font weight animation

https://x.com/MengTo/status/1802651973344456822

Try with HMR (Hot Module Replacement):

Adjust app-routing.module from:

{ path: '', redirectTo: '/items', pathMatch: 'full' },

to:

{ path: '', redirectTo: '/animated-text', pathMatch: 'full' },

Now run with: ns debug ios

Try without HMR:

ns debug ios --no-hmr

Siri Animation

https://x.com/MengTo/status/1802895763334422643

Try with HMR (Hot Module Replacement):

Adjust app-routing.module from:

{ path: '', redirectTo: '/items', pathMatch: 'full' },

to:

{ path: '', redirectTo: '/siri', pathMatch: 'full' },

Now run with: ns debug ios

Try without HMR:

ns debug ios --no-hmr

Scroll Transitions (Parallax Effect)

https://developer.apple.com/videos/play/wwdc2024/10151/

Try with HMR (Hot Module Replacement):

Adjust app-routing.module from:

{ path: '', redirectTo: '/items', pathMatch: 'full' },

to:

{ path: '', redirectTo: '/parallax', pathMatch: 'full' },

Now run with: ns debug ios

Try without HMR:

ns debug ios --no-hmr