Skip to content

Commit a9aeaee

Browse files
NathanWalkerNathanWalker
committed
feat: integrations
1 parent 24ab59b commit a9aeaee

File tree

2 files changed

+128
-5
lines changed

2 files changed

+128
-5
lines changed

‎.vitepress/nav.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,11 +46,12 @@ export default [
4646
// activeMatch: '^/best-practices',
4747
// icon: 'CheckIcon',
4848
// },
49-
// {
50-
// text: 'Integrations',
51-
// link: '/soon',
52-
// icon: 'CpuChipIcon',
53-
// },
49+
{
50+
text: 'Integrations',
51+
link: '/integrations/',
52+
activeMatch: '^/integrations',
53+
icon: 'CpuChipIcon',
54+
},
5455
{
5556
text: 'UI Components',
5657
link: '/ui/',

‎content/integrations/index.md

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
---
2+
title: Integrations
3+
description: NativeScript is a celebration of native platforms resulting in a liberating development experience which includes the ability to integrate with anything that runs on each target platform. Explore a few highlights of such integrations enabling you to develop the way you want using any solution that meets the demands of the case in front of you.
4+
contributors: false
5+
prev: false
6+
next: false
7+
---
8+
9+
## Integrations
10+
11+
<script lang="ts" setup>
12+
const integrations = [
13+
{
14+
id: 1,
15+
title: "React Native",
16+
href: "https://stackblitz.com/edit/nativescript-spaceman-transition-example?file=app%2Fspace-view.xml",
17+
description: "Use React Native Modules with NativeScript",
18+
categories: [
19+
{
20+
title: "Shared Elements",
21+
href: "https://docs.nativescript.org/guide/shared-element-transitions",
22+
},
23+
{
24+
title: "TypeScript",
25+
href: "https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-plain-typescript",
26+
},
27+
],
28+
videoUrl: "https://youtube.com/embed/hHqlEbU8o2o?si=7SgSCaNuqtRB9-ej",
29+
videoTitle: "Spaceman using just TypeScript",
30+
},
31+
{
32+
id: 2,
33+
title: "Flutter",
34+
href: "https://stackblitz.com/edit/nativescript-vue3-spaceman-transition-example?file=app%2Fcomponents%2FSpaceView.vue",
35+
description: "Use Flutter views in your NativeScript app or use NativeScript in your Flutter app.",
36+
categories: [
37+
{
38+
title: "Shared Elements",
39+
href: "https://docs.nativescript.org/guide/shared-element-transitions",
40+
},
41+
{ title: "Vue", href: "https://nativescript-vue.org" },
42+
],
43+
videoUrl: "https://youtube.com/embed/hHqlEbU8o2o?si=7SgSCaNuqtRB9-ej",
44+
videoTitle: "Spaceman using just Vue 3",
45+
},
46+
{
47+
id: 3,
48+
title: "SwiftUI",
49+
href: "https://stackblitz.com/edit/nativescript-music-player-transition-example?file=app%2Fmain-view.xml",
50+
description: "Use SwiftUI with a NativeScript app.",
51+
categories: [
52+
{
53+
title: "Shared Elements",
54+
href: "https://docs.nativescript.org/guide/shared-element-transitions",
55+
},
56+
{
57+
title: "TypeScript",
58+
href: "https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-plain-typescript",
59+
},
60+
],
61+
videoUrl: "https://youtube.com/embed/KatL9m7E2XI?feature=share",
62+
videoTitle: "Music Player UI",
63+
},
64+
{
65+
id: 4,
66+
title: "Jetpack Compose",
67+
href: "https://stackblitz.com/edit/nativescript-reflective-ui?file=src%2Fapp%2Fitem%2Fitems.component.ts",
68+
description: "Use Jetpack Compose with a NativeScript app.",
69+
categories: [{ title: "iOS AVCaptureSession", href: "https://developer.apple.com/documentation/avfoundation/avcapturesession?language=objc" }],
70+
videoUrl: "https://youtube.com/embed/rbF6mYfwnck",
71+
videoTitle: "NativeScript Reflective UI",
72+
},
73+
{
74+
id: 5,
75+
title: "Capacitor",
76+
href: "https://stackblitz.com/edit/ns-tetris?file=src%2Fcomponents%2FHome.vue",
77+
description: "Use Capacitor with NativeScript or use NativeScript with a Capacitor app.",
78+
categories: [{ title: "Vue", href: "https://nativescript-vue.org" }],
79+
videoUrl: "https://youtube.com/embed/To_bycK6BGY",
80+
videoTitle: "A Tetris Game built with Vue 3",
81+
},
82+
{
83+
id: 6,
84+
title: "Rive",
85+
href: "https://stackblitz.com/edit/nativescript-text-from-image?file=src%2Fapp%2Fhome%2Fhome.component.ts",
86+
description: "Use Rive with a NativeScript app.",
87+
categories: [
88+
{
89+
title: "Angular",
90+
href: "https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-angular",
91+
},
92+
{
93+
title: "iOS Vision Framework",
94+
href: "https://developer.apple.com/documentation/vision?language=objc",
95+
},
96+
],
97+
videoUrl: "https://youtube.com/embed/cCqqXezvfWs",
98+
videoTitle: "iOS Recognize Text from an Image",
99+
},
100+
{
101+
id: 7,
102+
title: "Lottie",
103+
href: "https://stackblitz.com/edit/nativescript-pdfview-via-ios-pdfkit?file=src%2Fapp%2Fnative-pdfview%2Fnative-pdfview.ts",
104+
description: "Use Lottie with a NativeScript app.",
105+
categories: [
106+
{
107+
title: "Angular",
108+
href: "https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-angular",
109+
},
110+
{
111+
title: "iOS PDFKit",
112+
href: "https://developer.apple.com/documentation/pdfkit?language=objc",
113+
},
114+
],
115+
videoUrl: "https://youtube.com/embed/ucmAXFaFbY0",
116+
videoTitle: "iOS PDFKit",
117+
},
118+
];
119+
120+
</script>
121+
122+
<SnackList :snacks="integrations" />

0 commit comments

Comments
 (0)