@@ -61,12 +61,12 @@ Each Snack reveals NativeScript's power, from UI tricks to platform SDK usages t
61
61
62
62
## Explore Snacks [](https://docs.nativescript.org/snacks/\#explore-snacks)
63
63
64
+ ### Spaceman using just TypeScript
65
+
64
66
[Spaceman using just TypeScript](https://www.youtube.com/watch?v=hHqlEbU8o2o)
65
67
66
68
[Shared Elements](https://docs.nativescript.org/guide/shared-element-transitions) [TypeScript](https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-plain-typescript)
67
69
68
- ### Spaceman using just TypeScript
69
-
70
70
Shared Element Transitions using TypeScript.
71
71
72
72
[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.
81
81
82
82
[View on StackBlitz](https://stackblitz.com/edit/nativescript-vue3-spaceman-transition-example?file=app%2Fcomponents%2FSpaceView.vue)
83
83
84
+
85
+ ### Music Player UI
86
+
84
87
[Music Player UI](https://www.youtube.com/watch?v=KatL9m7E2XI)
85
88
86
89
[Shared Elements](https://docs.nativescript.org/guide/shared-element-transitions) [TypeScript](https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-plain-typescript)
87
90
88
- ### Music Player UI
89
-
90
91
Music Player UI with Shared Element Transitions.
91
92
92
93
[View on StackBlitz](https://stackblitz.com/edit/nativescript-music-player-transition-example?file=app%2Fmain-view.xml)
93
94
95
+
96
+ ### Reflective UI
97
+
94
98
[NativeScript Reflective UI](https://www.youtube.com/watch?v=rbF6mYfwnck)
95
99
96
100
[iOS AVCaptureSession](https://developer.apple.com/documentation/avfoundation/avcapturesession?language=objc)
97
101
98
- ### Reflective UI
99
-
100
102
Using iOS AVCaptureSession to create live reflective UI mask. Try with your phone in Dark Mode, it's neat!
101
103
102
104
[View on StackBlitz](https://stackblitz.com/edit/nativescript-reflective-ui?file=src%2Fapp%2Fitem%2Fitems.component.ts)
103
105
106
+
107
+ ### Day Night Switch
108
+
104
109
[Custom NativeScript Day/Night Switch](https://www.youtube.com/watch?v=8kb7ObVOJIg)
105
110
106
111
[Angular](https://angular.dev/) [React](https://react.dev/) [Solid](https://www.solidjs.com/) [Svelte](https://svelte.dev/) [Vue](https://vuejs.org/)
107
112
108
- ### Day Night Switch
109
-
110
113
Custom NativeScript Day/Night Switch.
111
114
112
115
[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)
113
116
117
+
118
+ ### Tetris Game with Vue 3
119
+
114
120
[Tetris Game with Vue 3](https://www.youtube.com/watch?v=To_bycK6BGY)
115
121
116
122
[Vue](https://nativescript-vue.org/)
117
123
118
- ### Tetris Game with Vue 3
119
-
120
124
Tetris Game with Vue 3.
121
125
122
126
[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.
131
135
132
136
[View on StackBlitz](https://stackblitz.com/edit/nativescript-text-from-image?file=src%2Fapp%2Fhome%2Fhome.component.ts)
133
137
138
+ ### iOS PDFKit
139
+
134
140
[iOS PDFKit](https://www.youtube.com/watch?v=ucmAXFaFbY0)
135
141
136
142
[Angular](https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-angular) [iOS PDFKit](https://developer.apple.com/documentation/pdfkit?language=objc)
137
143
138
- ### iOS PDFKit
139
-
140
144
Generating and previewing PDFs using iOS PDFKit.
141
145
142
146
[View on StackBlitz](https://stackblitz.com/edit/nativescript-pdfview-via-ios-pdfkit?file=src%2Fapp%2Fnative-pdfview%2Fnative-pdfview.ts)
143
147
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)
145
148
146
149
### PDF w/ WKWebView & AndroidPdfViewer
147
150
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
+
148
153
Rendering PDF with WKWebView on iOS.
149
154
150
155
[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.
157
162
158
163
[View on StackBlitz](https://stackblitz.com/edit/nativescript-ng-textview-autogrow-vs-textfield?file=src%2Fapp%2Fitem%2Fitems.component.html)
159
164
160
- [Android TextToSpeech](https://developer.android.com/reference/android/speech/tts/TextToSpeech) [iOS AVSpeechUtterance](https://developer.apple.com/documentation/avfaudio/avspeechutterance?language=objc)
161
165
162
166
### Text to Speech
163
167
168
+ [Android TextToSpeech](https://developer.android.com/reference/android/speech/tts/TextToSpeech) [iOS AVSpeechUtterance](https://developer.apple.com/documentation/avfaudio/avspeechutterance?language=objc)
169
+
164
170
Simple Text to Speech.
165
171
166
172
[View on StackBlitz](https://stackblitz.com/edit/nativescript-text-to-speech?file=src%2Fapp%2Fspeech%2Findex.ios.ts)
167
173
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
-
170
174
### Battery Level Check
171
175
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
+
172
178
Getting the current battery level.
173
179
174
180
[View on StackBlitz](https://stackblitz.com/edit/nativescript-battery-level-check?file=app%2Fbattery%2Findex.ios.ts)
175
181
176
- [Android CameraManager](https://developer.android.com/reference/android/hardware/camera2/CameraManager) [iOS AVCaptureDevice](https://developer.apple.com/documentation/avfoundation/avcapturedevice?language=objc)
177
-
178
182
### Toggle Device Light
179
183
184
+ [Android CameraManager](https://developer.android.com/reference/android/hardware/camera2/CameraManager) [iOS AVCaptureDevice](https://developer.apple.com/documentation/avfoundation/avcapturedevice?language=objc)
185
+
180
186
Toggling the Device Light on and off.
181
187
182
188
[View on StackBlitz](https://stackblitz.com/edit/nativescript-torch?file=src%2Fapp%2Ftorch%2Findex.ios.ts)
183
189
184
- [Image](https://docs.nativescript.org/ui/image)
185
190
186
191
### Using local image assets
187
192
193
+ [Image](https://docs.nativescript.org/ui/image)
194
+
188
195
Using local image assets.
189
196
190
197
[View on StackBlitz](https://stackblitz.com/edit/nativescript-local-image-asset?file=package.json,src%2Fapp%2Fitem%2Fitems.component.html)
191
198
192
- [CheckBox](https://github.com/nstudio/nativescript-plugins/blob/main/packages/nativescript-checkbox/README.md)
193
-
194
199
### Checkbox
195
200
201
+ [CheckBox](https://github.com/nstudio/nativescript-plugins/blob/main/packages/nativescript-checkbox/README.md)
202
+
196
203
Using checkbox components.
197
204
198
205
[View on StackBlitz](https://stackblitz.com/edit/nativescript-checkbox-example?file=src%2Fapp%2Fitem%2Fitems.component.html)
199
206
207
+ ### Dropdown Menus
208
+
200
209
[NativeScript Dropdown Menus](https://www.youtube.com/watch?v=0zE5OjiJTk8)
201
210
202
211
[iOS UIMenu](https://developer.apple.com/documentation/uikit/uimenu) [Android PopupMenu](https://developer.android.com/reference/android/widget/PopupMenu)
203
212
204
- ### Dropdown Menus
205
-
206
213
Using dropdown menus.
207
214
208
215
[View on StackBlitz](https://stackblitz.com/edit/nativescript-dropdown-menus?file=src%2Fapp%2Fmenu-button%2Findex.ios.ts)
209
216
217
+ ### Large Title Display on iOS
218
+
210
219
[Enable large title displays for iOS Navigation from NativeScript's Frame.](https://www.youtube.com/watch?v=bwgVIZSpZ00)
211
220
212
221
[iOS prefersLargeTitles](https://developer.apple.com/documentation/uikit/uinavigationbar/2908999-preferslargetitles?language=objc)
213
222
214
- ### Large Title Display on iOS
215
-
216
223
How to enable large title displays for iOS navigation with NativeScript using prefersLargeTitles property of UINavigationBar, accessible from every Frame.
217
224
218
225
[View on StackBlitz](https://stackblitz.com/edit/nativescript-ios-large-titles-angular?file=src%2Fapp%2Fitem%2Fitems.component.ts)
219
226
227
+ ### Hardware device volume
228
+
220
229
[Adjusting hardware device volume with NativeScript](https://www.youtube.com/watch?v=1DR_9AZrMe4)
221
230
222
231
[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/)
223
232
224
- ### Hardware device volume
225
-
226
233
How to get the current device volume using NativeScript on iOS and Android.
227
234
228
235
[View on StackBlitz](https://stackblitz.com/edit/nativescript-device-volume?file=src%2Futils%2Fvolume.ts)
229
236
237
+ ### Top Bar Height
238
+
230
239
[Top Bar Height with NativeScript](https://www.youtube.com/watch?v=bXSyBTGJIlc)
231
240
232
241
[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)
233
242
234
- ### Top Bar Height
235
-
236
243
How to check the top bar height with NativeScript on iOS and Android.
237
244
238
245
[View on StackBlitz](https://stackblitz.com/edit/nativescript-topbar-height?file=src%2Fapp%2Futils%2Fdevice.ts)
239
246
247
+ ### iOS Spotlight Search
248
+
240
249
[Use iOS Spotlight Search with NativeScript](https://www.youtube.com/watch?v=uzzMskFL5g8)
241
250
242
251
[iOS Core Spotlight](https://developer.apple.com/documentation/corespotlight)
243
252
244
- ### iOS Spotlight Search
245
-
246
253
How to allow app content to be searchable using iOS Core Spotlight.
247
254
248
255
[View on StackBlitz](https://stackblitz.com/edit/nativescript-ios-spotlight-search?file=src%2Fapp%2Fitem%2Fitem.service.ts)
249
256
257
+ ### Improve UX with NativeScript TouchManager
258
+
250
259
[Instantly improve UX with NativeScript's TouchManager](https://www.youtube.com/watch?v=vAyGyuNFCbk)
251
260
252
261
[TouchManager](https://docs.nativescript.org/guide/animations#touchmanager-8-2)
253
262
254
- ### Improve UX with NativeScript TouchManager
255
-
256
263
Instantly improve UX with NativeScript's TouchManager.
257
264
258
265
[View on StackBlitz](https://stackblitz.com/edit/nativescript-touchmanager?file=src%2Fapp%2Futils.ts)
259
266
267
+ ### Tab Navigation with iOS and Android
268
+
260
269
[NativeScript Tab Navigation with Juicy Choices](https://www.youtube.com/watch?v=-FPEdFE1XeM)
261
270
262
271
[Angular](https://angular.dev/)
263
272
264
- ### Tab Navigation with iOS and Android
265
-
266
273
Example of how to configure tab navigation with lots of options.
267
274
268
275
[View on StackBlitz](https://stackblitz.com/edit/nativescript-tab-nav-ng?file=src%2Fapp%2Ffeatures%2Fhome%2Fcomponents%2Fhome.component.html)
269
276
277
+ ### Screen Snapshot
278
+
270
279
[Screen Snapshot](https://www.youtube.com/watch?v=ORp4y2tbJUA)
271
280
272
281
[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))
273
282
274
- ### Screen Snapshot
275
-
276
283
Example of how to take a snapshot of any view on screen.
277
284
278
285
[View on StackBlitz](https://stackblitz.com/edit/nativescript-screen-snapshot?file=src%2Fhome.component.html)
279
286
287
+ ### Solid NativeScript Vibes
288
+
280
289
[Solid NativeScript Vibes](https://www.youtube.com/watch?v=FLxZ_T5yN_A)
281
290
282
291
[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/)
283
292
284
- ### Solid NativeScript Vibes
285
-
286
293
Example of using audio player with metering.
287
294
288
295
[View on StackBlitz](https://stackblitz.com/edit/nativescript-solid-vibes?file=src%2Fcomponents%2Fhome.tsx)
289
296
297
+ ### CollectionView Layout Playground
298
+
290
299
[CollectionView Layout Playground](https://www.youtube.com/watch?v=SfYRtBiTXiM)
291
300
292
301
[@nativescript-community/ui-collectionview](https://github.com/nativescript-community/ui-collectionview)
293
302
294
- ### CollectionView Layout Playground
295
-
296
303
Example of using CollectionView with different layout options.
297
304
298
305
[View on StackBlitz](https://stackblitz.com/edit/nativescript-collectionview-layout-playground?file=src%2Fapp%2Fitem%2Fitem-columns.component.html)
0 commit comments