Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://docs.nativescript.org/plugins/jetpack-compose below:

Jetpack Compose | NativeScript

View on GitHub

A plugin that allows you to use Jetpack Compose in NativeScript.

• Installation
• Use @nativescript/jetpack-compose
  • Add Jetpack Compose version and dependencies
  • Create a Compose view
  • Register your Compose view
  • Use Compose view with any NativeScript layout
  • Use Jetpack Compose with Angular
• Credits

npm install @nativescript/jetpack-compose

Adjust App_Resources/Android/app.gradle to include your desired Jetpack Compose version and dependencies:

dependencies {
    def compose_version = "1.2.1"
    implementation "androidx.compose.ui:ui:$compose_version"
    // Tooling support (Previews, etc.)
    implementation "androidx.compose.ui:ui-tooling:$compose_version"

    // Add any other dependencies your Jetpack Compose UI needs
}

android {
    // other settings like targetSdk, etc.

    buildFeatures {
        compose true
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = "1.8"
    }
    composeOptions {
        kotlinCompilerExtensionVersion '1.3.2'
    }
}

Any Kotlin file can be created in your App_Resources, for example:

• App_Resources/Android/src/main/java/BasicView.kt

class BasicView {
    data class ExampleUIState(
        val text: String = ""
    ) {}

    class ExampleViewModel(
    ) : ViewModel() {
        var uiState by mutableStateOf(ExampleUIState())
    }

    var mViewModel = ExampleViewModel()

    fun generateComposeView(view: ComposeView): ComposeView {
        return view.apply {
            setContent {
                MaterialTheme {
                    val uiState = mViewModel.uiState;
                    Text(uiState.text)
                }
            }
        }
    }

    fun updateData(value: Map<Any, Any>) {
        val v = value["data"] as String;
        onEvent?.invoke(v)
        mViewModel.uiState = ExampleUIState(v);
    }

    var onEvent: ((String) -> Unit)? = null
}

This can be done in the bootstrap file (often app.ts or main.ts) or even the view component that needs it.

• app.ts

import {
  registerJetpackCompose,
  ComposeDataDriver,
} from '@nativescript/jetpack-compose'

// A. You can generate types for your own Compose Provider with 'ns typings android --aar {path/to/{name}.aar}'
// B. Otherwise you can ignore by declaring the package resolution path you know you provided
declare var com
registerJetpackCompose(
  'flyingHearts',
  (view) => new ComposeDataDriver(new com.example.FlyingHearts(), view),
)

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.)

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page" xmlns:jc="@nativescript/jetpack-compose">
  <StackLayout>
    <jc:JetpackCompose composeId="flyingHearts" composeEvent="{{ onEvent }}" data="{{ text }}"/>
  </StackLayout>
</Page>

import { registerElement } from '@nativescript/angular'
import { JetpackCompose } from '@nativescript/jetpack-compose'

registerElement('JetpackCompose', () => JetpackCompose)

It can now be used within any Angular component, eg:

<StackLayout>
    <JetpackCompose composeId="flyingHearts" (composeEvent)="onEvent($event)" [data]="data"></JetpackCompose>
</StackLayout>

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.

Contact Valor for assistance.

MIT

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4