# Jetpack Compose

VGS Show Android SDK provide support for integration with apps that use Jetpack Compose UI building toolkit by providing composable wrappers for all VGS custom view. VGS Show composable wrappers are designed to make integration easier and more straight forward by taking care of all needed state and lifecycle events.

## Integration

Update VGS Collect Android SDK version to >1.3.2

```gradle
dependencies {
    implementation 'com.verygoodsecurity:vgsshow:1.3.2'
}
```

Select composable wrapper which meet your needs:

* **VGSTextViewWrapper**
* **VGSImageViewWrapper**
* **VGSPDFViewWrapper**

Add composable wrapper:

```kotlin
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.verygoodsecurity.vgsshow.VGSShow
import com.verygoodsecurity.vgsshow.core.listener.VGSOnResponseListener
import com.verygoodsecurity.vgsshow.core.network.model.VGSResponse
import com.verygoodsecurity.vgsshow.widget.compose.VGSTextViewWrapper

class ComposeActivity : AppCompatActivity(), VGSOnResponseListener {

    private val show: VGSShow by lazy {
        VGSShow.Builder(
            this,
            "<VAULT_ID>"
        ).build()
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                Content(collect = collect)
            }
        }
    }

    override fun onResponse(response: VGSResponse) {
        // Handle response
    }

    @Composable
    private fun Content(show: VGSShow?) {
        Column {
            VGSTextViewWrapper(
                show = show,
                contentPath = "<CONTENT_PATH>",
                modifier = Modifier.fillMaxWidth(),
                onViewCreate = {
                    it.setHint("Secured data")
                }
            )
        }
    }
}
```

All composable wrappers share same public interface:

* **show** - `VGSShow` instance.
* **contentPath** - text that's used for data transfer between field and VGS proxy. Usually, it is similar to field-name in JSON path in your inbound route filters.
* **modifier** - modifier which applied to `AndroidView` wrapper.
* **onViewCreate** - a callback to be invoked when VGS view is created.
* **onViewUpdate** - a callback to be invoked after the view is inflated and upon recomposition to update the information and state of the view.

Best place to customize composable wrapper is `onViewCreate`:

```kotlin
@Composable
private fun Content(show: VGSShow?) {
    Column {
        VGSTextViewWrapper(
            show = show,
            contentPath = "<CONTENT_PATH>",
            modifier = Modifier.fillMaxWidth(),
            onViewCreate = {
                it.setHint("Secured data")
            }
        )
    }
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.verygoodsecurity.com/vault/developer-tools/vgs-show/android-sdk/compose.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.