@@ -61,12 +61,12 @@ Each Snack reveals NativeScript's power, from UI tricks to platform SDK usages t
6161
6262## Explore Snacks [](https://docs.nativescript.org/snacks/\#explore-snacks)
6363
64+ ### Spaceman using just TypeScript
65+
6466[Spaceman using just TypeScript](https://www.youtube.com/watch?v=hHqlEbU8o2o)
6567
6668[Shared Elements](https://docs.nativescript.org/guide/shared-element-transitions) [TypeScript](https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-plain-typescript)
6769
68- ### Spaceman using just TypeScript
69-
7070Shared Element Transitions using TypeScript.
7171
7272[View on StackBlitz](https://stackblitz.com/edit/nativescript-spaceman-transition-example?file=app%2Fspace-view.xml)
@@ -81,42 +81,46 @@ Shared Element Transitions using Vue 3.
8181
8282[View on StackBlitz](https://stackblitz.com/edit/nativescript-vue3-spaceman-transition-example?file=app%2Fcomponents%2FSpaceView.vue)
8383
84+
85+ ### Music Player UI
86+
8487[Music Player UI](https://www.youtube.com/watch?v=KatL9m7E2XI)
8588
8689[Shared Elements](https://docs.nativescript.org/guide/shared-element-transitions) [TypeScript](https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-plain-typescript)
8790
88- ### Music Player UI
89-
9091Music Player UI with Shared Element Transitions.
9192
9293[View on StackBlitz](https://stackblitz.com/edit/nativescript-music-player-transition-example?file=app%2Fmain-view.xml)
9394
95+
96+ ### Reflective UI
97+
9498[NativeScript Reflective UI](https://www.youtube.com/watch?v=rbF6mYfwnck)
9599
96100[iOS AVCaptureSession](https://developer.apple.com/documentation/avfoundation/avcapturesession?language=objc)
97101
98- ### Reflective UI
99-
100102Using iOS AVCaptureSession to create live reflective UI mask. Try with your phone in Dark Mode, it's neat!
101103
102104[View on StackBlitz](https://stackblitz.com/edit/nativescript-reflective-ui?file=src%2Fapp%2Fitem%2Fitems.component.ts)
103105
106+
107+ ### Day Night Switch
108+
104109[Custom NativeScript Day/Night Switch](https://www.youtube.com/watch?v=8kb7ObVOJIg)
105110
106111[Angular](https://angular.dev/) [React](https://react.dev/) [Solid](https://www.solidjs.com/) [Svelte](https://svelte.dev/) [Vue](https://vuejs.org/)
107112
108- ### Day Night Switch
109-
110113Custom NativeScript Day/Night Switch.
111114
112115[Angular on StackBlitz](https://stackblitz.com/edit/nativescript-daynightswitch-angular?file=src%2Fapp%2Fexample.component.html) [React on StackBlitz](https://stackblitz.com/edit/nativescript-daynightswitch-react?file=src%2Fcomponents%2FHome.tsx) [Solid on StackBlitz](https://stackblitz.com/edit/nativescript-daynightswitch-solid?file=src%2Fcomponents%2Fhome.tsx) [Svelte on StackBlitz](https://stackblitz.com/edit/nativescript-daynightswitch-svelte?file=src%2Fcomponents%2FHome.svelte) [Vue on StackBlitz](https://stackblitz.com/edit/nativescript-daynightswitch-vue?file=src%2Fcomponents%2FHome.vue)
113116
117+
118+ ### Tetris Game with Vue 3
119+
114120[Tetris Game with Vue 3](https://www.youtube.com/watch?v=To_bycK6BGY)
115121
116122[Vue](https://nativescript-vue.org/)
117123
118- ### Tetris Game with Vue 3
119-
120124Tetris Game with Vue 3.
121125
122126[View on StackBlitz](https://stackblitz.com/edit/ns-tetris?file=src%2Fcomponents%2FHome.vue)
@@ -131,20 +135,21 @@ Recognizing text from an Image on iOS.
131135
132136[View on StackBlitz](https://stackblitz.com/edit/nativescript-text-from-image?file=src%2Fapp%2Fhome%2Fhome.component.ts)
133137
138+ ### iOS PDFKit
139+
134140[iOS PDFKit](https://www.youtube.com/watch?v=ucmAXFaFbY0)
135141
136142[Angular](https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-angular) [iOS PDFKit](https://developer.apple.com/documentation/pdfkit?language=objc)
137143
138- ### iOS PDFKit
139-
140144Generating and previewing PDFs using iOS PDFKit.
141145
142146[View on StackBlitz](https://stackblitz.com/edit/nativescript-pdfview-via-ios-pdfkit?file=src%2Fapp%2Fnative-pdfview%2Fnative-pdfview.ts)
143147
144- [Angular](https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-angular) [iOS WKWebView](https://developer.apple.com/documentation/webkit/wkwebview) [Gradle AndroidPdfViewer](https://github.com/barteksc/AndroidPdfViewer)
145148
146149### PDF w/ WKWebView & AndroidPdfViewer
147150
151+ [Angular](https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-angular) [iOS WKWebView](https://developer.apple.com/documentation/webkit/wkwebview) [Gradle AndroidPdfViewer](https://github.com/barteksc/AndroidPdfViewer)
152+
148153Rendering PDF with WKWebView on iOS.
149154
150155[View on StackBlitz](https://stackblitz.com/edit/nativescript-pdfviewer?file=src%2Fapp%2Fnative-pdfview%2Findex.ios.ts)
@@ -157,142 +162,144 @@ Autogrowing Textfield as you type.
157162
158163[View on StackBlitz](https://stackblitz.com/edit/nativescript-ng-textview-autogrow-vs-textfield?file=src%2Fapp%2Fitem%2Fitems.component.html)
159164
160- [Android TextToSpeech](https://developer.android.com/reference/android/speech/tts/TextToSpeech) [iOS AVSpeechUtterance](https://developer.apple.com/documentation/avfaudio/avspeechutterance?language=objc)
161165
162166### Text to Speech
163167
168+ [Android TextToSpeech](https://developer.android.com/reference/android/speech/tts/TextToSpeech) [iOS AVSpeechUtterance](https://developer.apple.com/documentation/avfaudio/avspeechutterance?language=objc)
169+
164170Simple Text to Speech.
165171
166172[View on StackBlitz](https://stackblitz.com/edit/nativescript-text-to-speech?file=src%2Fapp%2Fspeech%2Findex.ios.ts)
167173
168- [Android Battery Monitoring](https://developer.android.com/training/monitoring-device-state/battery-monitoring) [iOS UIDevice](https://developer.apple.com/documentation/uikit/uidevice?language=objc)
169-
170174### Battery Level Check
171175
176+ [Android Battery Monitoring](https://developer.android.com/training/monitoring-device-state/battery-monitoring) [iOS UIDevice](https://developer.apple.com/documentation/uikit/uidevice?language=objc)
177+
172178Getting the current battery level.
173179
174180[View on StackBlitz](https://stackblitz.com/edit/nativescript-battery-level-check?file=app%2Fbattery%2Findex.ios.ts)
175181
176- [Android CameraManager](https://developer.android.com/reference/android/hardware/camera2/CameraManager) [iOS AVCaptureDevice](https://developer.apple.com/documentation/avfoundation/avcapturedevice?language=objc)
177-
178182### Toggle Device Light
179183
184+ [Android CameraManager](https://developer.android.com/reference/android/hardware/camera2/CameraManager) [iOS AVCaptureDevice](https://developer.apple.com/documentation/avfoundation/avcapturedevice?language=objc)
185+
180186Toggling the Device Light on and off.
181187
182188[View on StackBlitz](https://stackblitz.com/edit/nativescript-torch?file=src%2Fapp%2Ftorch%2Findex.ios.ts)
183189
184- [Image](https://docs.nativescript.org/ui/image)
185190
186191### Using local image assets
187192
193+ [Image](https://docs.nativescript.org/ui/image)
194+
188195Using local image assets.
189196
190197[View on StackBlitz](https://stackblitz.com/edit/nativescript-local-image-asset?file=package.json,src%2Fapp%2Fitem%2Fitems.component.html)
191198
192- [CheckBox](https://github.com/nstudio/nativescript-plugins/blob/main/packages/nativescript-checkbox/README.md)
193-
194199### Checkbox
195200
201+ [CheckBox](https://github.com/nstudio/nativescript-plugins/blob/main/packages/nativescript-checkbox/README.md)
202+
196203Using checkbox components.
197204
198205[View on StackBlitz](https://stackblitz.com/edit/nativescript-checkbox-example?file=src%2Fapp%2Fitem%2Fitems.component.html)
199206
207+ ### Dropdown Menus
208+
200209[NativeScript Dropdown Menus](https://www.youtube.com/watch?v=0zE5OjiJTk8)
201210
202211[iOS UIMenu](https://developer.apple.com/documentation/uikit/uimenu) [Android PopupMenu](https://developer.android.com/reference/android/widget/PopupMenu)
203212
204- ### Dropdown Menus
205-
206213Using dropdown menus.
207214
208215[View on StackBlitz](https://stackblitz.com/edit/nativescript-dropdown-menus?file=src%2Fapp%2Fmenu-button%2Findex.ios.ts)
209216
217+ ### Large Title Display on iOS
218+
210219[Enable large title displays for iOS Navigation from NativeScript's Frame.](https://www.youtube.com/watch?v=bwgVIZSpZ00)
211220
212221[iOS prefersLargeTitles](https://developer.apple.com/documentation/uikit/uinavigationbar/2908999-preferslargetitles?language=objc)
213222
214- ### Large Title Display on iOS
215-
216223How to enable large title displays for iOS navigation with NativeScript using prefersLargeTitles property of UINavigationBar, accessible from every Frame.
217224
218225[View on StackBlitz](https://stackblitz.com/edit/nativescript-ios-large-titles-angular?file=src%2Fapp%2Fitem%2Fitems.component.ts)
219226
227+ ### Hardware device volume
228+
220229[Adjusting hardware device volume with NativeScript](https://www.youtube.com/watch?v=1DR_9AZrMe4)
221230
222231[iOS outputVolume](https://developer.apple.com/documentation/avfaudio/avaudiosession/1616533-outputvolume?language=objc) [Android getStreamVolume](https://developer.android.com/reference/android/media/AudioManager#getStreamVolume(int)) [Vue](https://nativescript-vue.org/)
223232
224- ### Hardware device volume
225-
226233How to get the current device volume using NativeScript on iOS and Android.
227234
228235[View on StackBlitz](https://stackblitz.com/edit/nativescript-device-volume?file=src%2Futils%2Fvolume.ts)
229236
237+ ### Top Bar Height
238+
230239[Top Bar Height with NativeScript](https://www.youtube.com/watch?v=bXSyBTGJIlc)
231240
232241[iOS statusBarManager](https://developer.apple.com/documentation/uikit/uiwindowscene/3213943-statusbarmanager?language=objc) [iOS UINavigationBar](https://developer.apple.com/documentation/uikit/uinavigationbar?language=objc) [Android Resources](https://developer.android.com/guide/topics/resources/providing-resources) [Android bar height id](https://android.googlesource.com/platform/frameworks/base/+/master/core/res/res/values/dimens_material.xml#39)
233242
234- ### Top Bar Height
235-
236243How to check the top bar height with NativeScript on iOS and Android.
237244
238245[View on StackBlitz](https://stackblitz.com/edit/nativescript-topbar-height?file=src%2Fapp%2Futils%2Fdevice.ts)
239246
247+ ### iOS Spotlight Search
248+
240249[Use iOS Spotlight Search with NativeScript](https://www.youtube.com/watch?v=uzzMskFL5g8)
241250
242251[iOS Core Spotlight](https://developer.apple.com/documentation/corespotlight)
243252
244- ### iOS Spotlight Search
245-
246253How to allow app content to be searchable using iOS Core Spotlight.
247254
248255[View on StackBlitz](https://stackblitz.com/edit/nativescript-ios-spotlight-search?file=src%2Fapp%2Fitem%2Fitem.service.ts)
249256
257+ ### Improve UX with NativeScript TouchManager
258+
250259[Instantly improve UX with NativeScript's TouchManager](https://www.youtube.com/watch?v=vAyGyuNFCbk)
251260
252261[TouchManager](https://docs.nativescript.org/guide/animations#touchmanager-8-2)
253262
254- ### Improve UX with NativeScript TouchManager
255-
256263Instantly improve UX with NativeScript's TouchManager.
257264
258265[View on StackBlitz](https://stackblitz.com/edit/nativescript-touchmanager?file=src%2Fapp%2Futils.ts)
259266
267+ ### Tab Navigation with iOS and Android
268+
260269[NativeScript Tab Navigation with Juicy Choices](https://www.youtube.com/watch?v=-FPEdFE1XeM)
261270
262271[Angular](https://angular.dev/)
263272
264- ### Tab Navigation with iOS and Android
265-
266273Example of how to configure tab navigation with lots of options.
267274
268275[View on StackBlitz](https://stackblitz.com/edit/nativescript-tab-nav-ng?file=src%2Fapp%2Ffeatures%2Fhome%2Fcomponents%2Fhome.component.html)
269276
277+ ### Screen Snapshot
278+
270279[Screen Snapshot](https://www.youtube.com/watch?v=ORp4y2tbJUA)
271280
272281[iOS CALayer render](https://developer.apple.com/documentation/quartzcore/calayer/render(in:)) [Android createBitmap](https://developer.android.com/reference/android/graphics/Bitmap#createBitmap(android.graphics.Bitmap,%20int,%20int,%20int,%20int))
273282
274- ### Screen Snapshot
275-
276283Example of how to take a snapshot of any view on screen.
277284
278285[View on StackBlitz](https://stackblitz.com/edit/nativescript-screen-snapshot?file=src%2Fhome.component.html)
279286
287+ ### Solid NativeScript Vibes
288+
280289[Solid NativeScript Vibes](https://www.youtube.com/watch?v=FLxZ_T5yN_A)
281290
282291[iOS AVAudioPlayer](https://developer.apple.com/documentation/avfaudio/avaudioplayer/averagepower(forchannel:)?language=objc) [Android Visualizer](https://developer.android.com/reference/android/media/audiofx/Visualizer) [Solid](https://www.solidjs.com/)
283292
284- ### Solid NativeScript Vibes
285-
286293Example of using audio player with metering.
287294
288295[View on StackBlitz](https://stackblitz.com/edit/nativescript-solid-vibes?file=src%2Fcomponents%2Fhome.tsx)
289296
297+ ### CollectionView Layout Playground
298+
290299[CollectionView Layout Playground](https://www.youtube.com/watch?v=SfYRtBiTXiM)
291300
292301[@nativescript-community/ui-collectionview](https://github.com/nativescript-community/ui-collectionview)
293302
294- ### CollectionView Layout Playground
295-
296303Example of using CollectionView with different layout options.
297304
298305[View on StackBlitz](https://stackblitz.com/edit/nativescript-collectionview-layout-playground?file=src%2Fapp%2Fitem%2Fitem-columns.component.html)
0 commit comments