TWSViewCustomTabsExample

fun TWSViewCustomTabsExample(twsCustomTabsViewModel: TWSCustomTabsViewModel = hiltViewModel())

Demonstrates how to use TWSView with custom properties (props) defined in the TWSSnippet. The props field in the TWSSnippet allows you to attach custom metadata to a snippet in JSON format. These properties can be used for various purposes, such as configuring the behavior of your app or providing additional context to your view.

In this example, we access the custom tabName property (if it exists) and display it using a Text composable. The props can include values of any type, including classes, allowing you to extend the functionality of the snippet with complex data structures.

This flexibility allows you to pass any additional information your app might need to handle the snippet.

Working example can be found here. Download the Sample app from our web page to explore this functionality interactively.

Hint: try changing tabName or tabIcon on customTabs snippet and observe changes in the app instantly.

Samples

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Tab
import androidx.compose.material3.TabRow
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.lifecycle.ViewModel
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.thewebsnippet.data.TWSSnippet
import com.thewebsnippet.manager.core.TWSManager
import com.thewebsnippet.manager.core.TWSOutcome
import com.thewebsnippet.manager.core.mapData
import com.thewebsnippet.sample.components.ErrorView
import com.thewebsnippet.sample.components.LoadingView
import com.thewebsnippet.sample.components.sampleErrorView
import com.thewebsnippet.view.TWSView
import dagger.hilt.android.lifecycle.HiltViewModel
import kotlinx.collections.immutable.ImmutableList
import kotlinx.collections.immutable.toImmutableList
import kotlinx.coroutines.flow.Flow
import kotlinx.coroutines.flow.map
import javax.inject.Inject

fun main() { 
   //sampleStart 
   TabRow(currentTab) {
    content.forEachIndexed { index, item ->
        // Setting text and icons for each tab using custom snippet properties
        Tab(
            selected = index == currentTab,
            onClick = { onClick(index) },
            text = (item.props["tabName"] as? String)?.let { { Text(text = it, maxLines = 1) } },
            icon = (item.props["tabIcon"] as? String)?.asTabIconDrawable()?.let {
                {
                    Icon(
                        painter = painterResource(id = it),
                        contentDescription = "Tab icon"
                    )
                }
            }
        )
    }
} 
   //sampleEnd
}