# @nativescript/jetpack-compose

> Jetpack Compose for NativeScript

Latest version **1.0.0-beta.0** (published 2022-12-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nativescript/jetpack-compose
pnpm add @nativescript/jetpack-compose
yarn add @nativescript/jetpack-compose
bun add @nativescript/jetpack-compose
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high maintenance score.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.0-beta.0 |
| Published | 2022-12-20 |
| First published | 2022-12-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 25.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 206 |
| Author | NativeScript |
| Maintainers | nativescript-user, tns-bot, lini, tachev, rosen-vladimirov, stoskov, rosen_vladimirov, walkerrunpdx, bradmartin, davecoffin, rigor789, nativescript-bot, multishiv19, eddyverbruggen, edusperoni, facetious, tdermendjiev, sis0k0 |
| Keywords | NativeScript, JavaScript, TypeScript, iOS, Android |

## Links

- npm: https://www.npmjs.com/package/@nativescript/jetpack-compose
- Repository: https://github.com/NativeScript/plugins
- Issues: https://github.com/NativeScript/plugins/issues
- npm.io page: https://npm.io/package/@nativescript/jetpack-compose

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.0.0-beta.0 (latest) — 2022-12-20

## README

# @nativescript/jetpack-compose

Jetpack Compose for NativeScript.

```javascript
npm install @nativescript/jetpack-compose
```

## Usage

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

```ts
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'
    }
}
```

### Create a Compose view

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

- `App_Resources/Android/src/main/java/BasicView.kt`

```java
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
}
```

### Register your Compose view

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

* `app.ts`

```typescript
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));
```

### Use Compose view with any NativeScript layout

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>
```

#### To use with Angular

```ts
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>
```

## Credits

<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" />

NativeScript is proudly supported by Valor Software as official partners. We are proud to offer guidance, consulting, and development assistance in all things NativeScript.

[Contact Valor for assistance](https://valor-software.com/).

## License

MIT

---
_Source: https://npm.io/package/@nativescript/jetpack-compose · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._