Skip to content

Commit 932164f

Browse files
NathanWalkerNathanWalker
committed
chore: update plugin docs
1 parent 913892e commit 932164f

File tree

6 files changed

+799
-5
lines changed

6 files changed

+799
-5
lines changed

‎plugins/firebase-remote-config.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -377,9 +377,9 @@ Asynchronously fetches and then activates the fetched configs. For more informat
377377
#### getAll()
378378
379379
```ts
380-
import { firebase } from '@nativescript/firebase-core'
380+
import { firebase } from '@nativescript/firebase-core';
381381

382-
parameters: Record<string, ConfigValue> = firebase().remoteConfig().getAll()
382+
parameters: Record<string, ConfigValue> = firebase().remoteConfig().getAll();
383383
```
384384
385385
Returns an object with all the parameters in the Remote Config.

‎plugins/flutter.md

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
---
2+
title: 'Flutter'
3+
link: https://raw.githubusercontent.com/NativeScript/ui-kit/main/packages/flutter/README.md
4+
---
5+
6+
<div style="width: 100%; padding: 1.2em 0em">
7+
<img alt="github logo" src="../assets/images/github/GitHub-Mark-32px.png" style="display: inline; margin: 1em 0.5em 1em 0em">
8+
<a href="https://github.com/NativeScript/ui-kit/tree/main/packages/flutter" target="_blank" noopener>Flutter</a>
9+
</div>
10+
11+
# @nativescript/flutter
12+
13+
Use Flutter with NativeScript projects by creating a [Flutter module](https://docs.flutter.dev/add-to-app) in the root of your project.
14+
15+
## Usage
16+
17+
**Prerequisites:**
18+
19+
- [NativeScript installed](https://beta.docs.nativescript.org/setup/)
20+
- [Flutter installed](https://docs.flutter.dev/get-started/install)
21+
22+
### 1. Add Flutter to a NativeScript app
23+
24+
You can use Flutter in any existing NativeScript app or by creating a new one with `ns create`.
25+
26+
We can then create a Flutter module at the root of the project directory:
27+
28+
```bash
29+
flutter create --template module flutter_views
30+
```
31+
32+
_Note_: You can run `flutter run --debug` or `flutter build ios` from inside this `flutter_views` folder as any normal Flutter project to develop it.
33+
34+
Learn more from the [Flutter documentation here](https://docs.flutter.dev/add-to-app).
35+
36+
### 2. Configure your Dart code to have named entry points
37+
38+
Named entry points allow us to use different Flutter views in our NativeScript app by matching the entry point with the view id, for example: `<Flutter id="myFlutterView" />`
39+
40+
- `main.dart`
41+
42+
```ts
43+
@pragma('vm:entry-point')
44+
void myFlutterView() => runApp(const MyFlutterView());
45+
```
46+
47+
### 3. Configure platforms for usage
48+
49+
#### iOS
50+
51+
`App_Resources/iOS/Podfile` should contain the following to reference our Flutter module.
52+
53+
```ruby
54+
platform :ios, '14.0'
55+
56+
flutter_application_path = '../../flutter_views'
57+
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
58+
install_all_flutter_pods(flutter_application_path)
59+
60+
post_install do |installer|
61+
flutter_post_install(installer) if defined?(flutter_post_install)
62+
end
63+
```
64+
65+
Add Flutter debug permissions to `App_Resources/iOS/Info.plist`:
66+
67+
```xml
68+
<key>NSLocalNetworkUsageDescription</key>
69+
<string>Allow Flutter tools to debug your views.</string>
70+
<key>NSBonjourServices</key>
71+
<array>
72+
<string>_dartobservatory._tcp</string>
73+
</array>
74+
```
75+
76+
#### Android
77+
78+
`App_Resources/Android/app.gradle` should contain the following:
79+
80+
```ts
81+
android {
82+
// ...
83+
84+
defaultConfig {
85+
// ...
86+
87+
// Add this section:
88+
ndk {
89+
// Filter for architectures supported by Flutter.
90+
abiFilters 'armeabi-v7a', 'arm64-v8a', 'x86_64'
91+
}
92+
}
93+
```
94+
95+
`App_Resources/Android/settings.gradle` (create file if needed) should contain the following:
96+
97+
```ts
98+
def flutterProjectRoot = rootProject.projectDir.parentFile.toPath()
99+
100+
def plugins = new Properties()
101+
def pluginsFile = new File(flutterProjectRoot.toFile(), '.flutter-plugins')
102+
if (pluginsFile.exists()) {
103+
pluginsFile.withReader('UTF-8') { reader -> plugins.load(reader) }
104+
}
105+
106+
plugins.each { name, path ->
107+
def pluginDirectory = flutterProjectRoot.resolve(path).resolve('android').toFile()
108+
include ":$name"
109+
project(":$name").projectDir = pluginDirectory
110+
}
111+
112+
setBinding(new Binding([gradle: this]))
113+
evaluate(new File(
114+
settingsDir.parentFile,
115+
// use the flutter module folder name you created here.
116+
// for example, a flutter module called 'flutter_views' exist at root of project
117+
'../flutter_views/.android/include_flutter.groovy'
118+
))
119+
```
120+
121+
Build the module anytime you want to see your Dart changes reflected in NativeScript:
122+
123+
```bash
124+
cd flutter_views/.android
125+
126+
# This will build debug mode
127+
./gradlew Flutter:assemble
128+
129+
# This will build release mode
130+
./gradlew Flutter:assembleRelease
131+
```
132+
133+
### 4. Install @nativescript/flutter
134+
135+
```bash
136+
npm install @nativescript/flutter
137+
```
138+
139+
### 5. Use `Flutter` wherever desired
140+
141+
Be sure to initialize the Flutter engine before bootstrapping your app, typically in `app.ts` or `main.ts`:
142+
143+
```ts
144+
import { init } from '@nativescript/flutter'
145+
init()
146+
147+
// bootstrap app...
148+
```
149+
150+
When using flavors, you can just register the element for usage in your markup:
151+
152+
```ts
153+
import { Flutter } from '@nativescript/flutter'
154+
155+
// Angular
156+
import { registerElement } from '@nativescript/angular'
157+
registerElement('Flutter', () => Flutter)
158+
159+
// Solid
160+
import { registerElement } from 'dominative'
161+
registerElement('flutter', Flutter)
162+
163+
// Svelte
164+
import { registerNativeViewElement } from 'svelte-native/dom'
165+
registerNativeViewElement('flutter', () => Flutter)
166+
167+
// React
168+
import { registerElement } from 'react-nativescript'
169+
registerElement('flutter', () => Flutter)
170+
171+
// Vue
172+
import Vue from 'nativescript-vue'
173+
Vue.registerElement('Flutter', () => Flutter)
174+
```
175+
176+
Use `Flutter` anywhere.
177+
178+
```xml
179+
<Flutter id="myFlutterView" />
180+
```
181+
182+
## Troubleshooting
183+
184+
Common troubleshooting tips:
185+
186+
### Android
187+
188+
Before running Android, you will want to build the flutter module first. Otherwise you may see this error:
189+
190+
```cli
191+
Transform's input file does not exist: flutter_views/.android/Flutter/build/intermediates/flutter/debug/libs.jar
192+
```
193+
194+
You can fix by running the following:
195+
196+
```bash
197+
cd flutter_views/.android
198+
199+
# This will build debug mode
200+
./gradlew Flutter:assemble
201+
202+
# This will build release mode
203+
./gradlew Flutter:assembleRelease
204+
```
205+
206+
## License
207+
208+
Apache License Version 2.0

‎plugins/jetpack-compose.md

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
---
2+
title: 'Jetpack Compose'
3+
link: https://raw.githubusercontent.com/NativeScript/ui-kit/main/packages/jetpack-compose/README.md
4+
---
5+
6+
<div style="width: 100%; padding: 1.2em 0em">
7+
<img alt="github logo" src="../assets/images/github/GitHub-Mark-32px.png" style="display: inline; margin: 1em 0.5em 1em 0em">
8+
<a href="https://github.com/NativeScript/ui-kit/tree/main/packages/jetpack-compose" target="_blank" noopener>Jetpack Compose</a>
9+
</div>
10+
11+
# @nativescript/jetpack-compose
12+
13+
A plugin that allows you to use Jetpack Compose in NativeScript.
14+
15+
## Contents
16+
17+
- [Installation](#installation)
18+
- [Use @nativescript/jetpack-compose](#use-nativescriptjetpack-compose)
19+
- [Add Jetpack Compose version and dependencies](#add-jetpack-compose-version-and-dependencies)
20+
- [Create a Compose view](#create-a-compose-view)
21+
- [Register your Compose view](#register-your-compose-view)
22+
- [Use Compose view with any NativeScript layout](#use-compose-view-with-any-nativescript-layout)
23+
- [Use Jetpack Compose with Angular](#use-jetpack-compose-with-angular)
24+
- [Credits](#credits)
25+
26+
## Installation
27+
28+
```cli
29+
npm install @nativescript/jetpack-compose
30+
```
31+
32+
## Use @nativescript/jetpack-compose
33+
34+
### Add Jetpack Compose version and dependencies
35+
36+
Adjust `App_Resources/Android/app.gradle` to include your desired Jetpack Compose version and dependencies:
37+
38+
```ts
39+
dependencies {
40+
def compose_version = "1.2.1"
41+
implementation "androidx.compose.ui:ui:$compose_version"
42+
// Tooling support (Previews, etc.)
43+
implementation "androidx.compose.ui:ui-tooling:$compose_version"
44+
45+
// Add any other dependencies your Jetpack Compose UI needs
46+
}
47+
48+
android {
49+
// other settings like targetSdk, etc.
50+
51+
buildFeatures {
52+
compose true
53+
}
54+
compileOptions {
55+
sourceCompatibility JavaVersion.VERSION_1_8
56+
targetCompatibility JavaVersion.VERSION_1_8
57+
}
58+
kotlinOptions {
59+
jvmTarget = "1.8"
60+
}
61+
composeOptions {
62+
kotlinCompilerExtensionVersion '1.3.2'
63+
}
64+
}
65+
```
66+
67+
### Create a Compose view
68+
69+
Any Kotlin file can be created in your App_Resources, for example:
70+
71+
- `App_Resources/Android/src/main/java/BasicView.kt`
72+
73+
```java
74+
class BasicView {
75+
data class ExampleUIState(
76+
val text: String = ""
77+
) {}
78+
79+
class ExampleViewModel(
80+
) : ViewModel() {
81+
var uiState by mutableStateOf(ExampleUIState())
82+
}
83+
84+
var mViewModel = ExampleViewModel()
85+
86+
fun generateComposeView(view: ComposeView): ComposeView {
87+
return view.apply {
88+
setContent {
89+
MaterialTheme {
90+
val uiState = mViewModel.uiState;
91+
Text(uiState.text)
92+
}
93+
}
94+
}
95+
}
96+
97+
fun updateData(value: Map<Any, Any>) {
98+
val v = value["data"] as String;
99+
onEvent?.invoke(v)
100+
mViewModel.uiState = ExampleUIState(v);
101+
}
102+
103+
var onEvent: ((String) -> Unit)? = null
104+
}
105+
```
106+
107+
### Register your Compose view
108+
109+
This can be done in the bootstrap file (often `app.ts` or `main.ts`) or even the view component that needs it.
110+
111+
- `app.ts`
112+
113+
```typescript
114+
import { registerJetpackCompose, ComposeDataDriver } from '@nativescript/jetpack-compose'
115+
116+
// A. You can generate types for your own Compose Provider with 'ns typings android --aar {path/to/{name}.aar}'
117+
// B. Otherwise you can ignore by declaring the package resolution path you know you provided
118+
declare var com
119+
registerJetpackCompose(
120+
'flyingHearts',
121+
view => new ComposeDataDriver(new com.example.FlyingHearts(), view)
122+
)
123+
```
124+
125+
### Use Compose view with any NativeScript layout
126+
127+
This illustrates what is often called a "vanilla" flavored NativeScript app. However, you can use this plugin with any flavor (Angular, React, Svelte, Vue, etc.)
128+
129+
```xml
130+
<Page
131+
xmlns="http://schemas.nativescript.org/tns.xsd"
132+
navigatingTo="navigatingTo"
133+
class="page"
134+
xmlns:jc="@nativescript/jetpack-compose"
135+
>
136+
<StackLayout>
137+
<jc:JetpackCompose
138+
composeId="flyingHearts"
139+
composeEvent="{{ onEvent }}"
140+
data="{{ text }}"
141+
/>
142+
</StackLayout>
143+
</Page>
144+
```
145+
146+
### Use Jetpack Compose with Angular
147+
148+
```ts
149+
import { registerElement } from '@nativescript/angular'
150+
import { JetpackCompose } from '@nativescript/jetpack-compose'
151+
152+
registerElement('JetpackCompose', () => JetpackCompose)
153+
```
154+
155+
It can now be used within any Angular component, eg:
156+
157+
```xml
158+
<StackLayout>
159+
<JetpackCompose composeId="flyingHearts" (composeEvent)="onEvent($event)" [data]="data"></JetpackCompose>
160+
</StackLayout>
161+
```
162+
163+
## Credits
164+
165+
<img src="https://raw.githubusercontent.com/valor-software/.github/d947b8547a9d5a6021e4f6af7b1df816c1c5f268/profile/valor-logo%20for-light.png#gh-light-mode-only" alt="Valor Software" width="200" />
166+
167+
NativeScript is proudly supported by Valor Software as an official partner. We are proud to offer guidance, consulting, and development assistance in all things NativeScript.
168+
169+
[Contact Valor for assistance](https://valor-software.com/).
170+
171+
## License
172+
173+
MIT

0 commit comments

Comments
 (0)