Eungabi

https://euuungb.github.io/eungabi/
Admin
Eungabi is a Compose Multiplatform navigation library that provides screen transitions with support...
Tokens:2,696
Snippets:40
Trust Score:9.7
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install Eungabi Core Module

Source: https://euuungb.github.io/eungabi/getting-started/installation

Add the Eungabi dependency to your build configuration using either Groovy or Kotlin DSL.

```groovy
implementation "io.github.easternkite:eungabi:<version>"
```

```kotlin
implementation("io.github.easternkite:eungabi:<version>")
```

--------------------------------

### Configure EunGabiNavHost

Source: https://euuungb.github.io/eungabi/getting-started/quick-start

Define the navigation graph and routes using the EunGabiNavHost composable.

```kotlin
val controller = rememberEunGabiController()
EunGabiNavHost(
    modifier = Modifier,
    controller = controller,
    startDestination = "routeA",
) {
    composable("routeA") {
        MainComponent("routeA") {
            controller.navigate("routeB")
        }
    }
    composable("routeB") {
        DetailsComponent(
            "routeB",
            onNavigateBack = controller::navigateUp
        ) {
            egController.navigate("routeC")
        }
    }
    //...
}
```

--------------------------------

### Define and apply horizontal slide transitions

Source: https://euuungb.github.io/eungabi/navigation/animate-transitions-between-destinations

Create an EunGabiTransitionState instance to define enter, exit, popEnter, and popExit animations, then pass it to EunGabiNavHost.

```kotlin
// 1. declare EunGabiTransitionState
val defaultTransition =  
    EunGabiTransitionState(  
        enter = {  
            slideInHorizontally(  
                animationSpec = tween(300),  
                initialOffsetX = { fullWidth -> fullWidth },  
            )  
        },  
        exit = {  
            slideOutHorizontally(  
                tween(durationMillis = 300),  
                targetOffsetX = { fullWidth -> -fullWidth / 4 },  
            )  
        },  
        popEnter = {  
            slideInHorizontally(  
                animationSpec = tween(300),  
                initialOffsetX = { fullWidth -> -fullWidth / 4 },  
            )  
        },  
        popExit = {  
            slideOutHorizontally(  
                tween(durationMillis = 300),  
                targetOffsetX = { fullWidth -> fullWidth },  
            )  
        },  
    )


// 2. pass the 'defaultDransition' to the EunGabiNavHost as a parameter.
fun App() {
    EunGabiNavHost(
        //...
        transitionState = defaultTransition
    ) { ... }
}
```

--------------------------------

### Navigate back

Source: https://euuungb.github.io/eungabi/navigation/navigate-between-composables

Navigates to the previous screen in the back stack.

```kotlin
controller.navigateUp()
```

--------------------------------

### Initialize EunGabiController

Source: https://euuungb.github.io/eungabi/getting-started/quick-start

Create a navigation controller instance within a composable function using rememberEunGabiController.

```kotlin
val controller = rememberEunGabiController()
```

--------------------------------

### Navigate with Query Parameters

Source: https://euuungb.github.io/eungabi/navigation/passing-arguments

Pass arguments by appending query parameters to the route string when calling the navigate function.

```kotlin
controller.navigate("ScreenA?id=111")
```

--------------------------------

### Configure iOS swipe back transition

Source: https://euuungb.github.io/eungabi/navigation/animate-transitions-between-destinations

Define an EunGabiPredictiveState with a 1000ms duration to sync with user gestures on iOS.

```kotlin
val iosPredictiveBack =  
    EunGabiPredictiveState(  
        popEnter = {  
            slideInHorizontally(  
                animationSpec = tween(1000, easing = LinearEasing),  
                initialOffsetX = { fullWidth -> -fullWidth / 4 },  
            )  
        },  
        popExit = {  
            slideOutHorizontally(  
                tween(durationMillis = 1000, easing = LinearEasing),  
                targetOffsetX = { fullWidth -> fullWidth },  
            )  
        },  
    )

fun App() {
    EunGabiNavHost(
        //...
        predictiveBackTransition = iosPredictiveBack
    ) { ... }
}
```

--------------------------------

### Apache License 2.0

Source: https://euuungb.github.io/eungabi

The legal license text for the Eungabi project.

```text
Copyright 2024 easternkite

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
```

--------------------------------

### Pop up to a destination

Source: https://euuungb.github.io/eungabi/navigation/navigate-between-composables

Removes destinations from the back stack during navigation. Setting inclusive to true removes the specified destination as well.

```kotlin
controller.navigate("ScreenD") {
    popUpTo("ScreenB") {
        inclusive = true
    }
}
```

--------------------------------

### Navigate to a route

Source: https://euuungb.github.io/eungabi/navigation/navigate-between-composables

Triggers navigation to a specific destination defined in the navigation graph.

```kotlin
controller.navigate("ScreenA")
```

--------------------------------

### Enable predictive back on Android

Source: https://euuungb.github.io/eungabi/navigation/animate-transitions-between-destinations

Set the enableOnBackInvokedCallback flag in AndroidManifest.xml and configure the EunGabiPredictiveState for the NavHost.

```xml
<application
    ...
    android: enableOnBackInvokedCallBack = "true"
    ... >
</application>
```

```kotlin
val defaultPredictiveState = EunGabiPredictiveState(  
    popEnter = { fadeIn(animationSpec = tween(700)) },  
    popExit = { fadeOut(animationSpec = tween(700)) }
)

fun App() {
    EunGabiNavHost(
        //...
        predictiveBackTransition = defaultPredictiveState
    ) { ... }
}
```

--------------------------------

### Koin Integration for SavedStateHandle

Source: https://euuungb.github.io/eungabi/navigation/saved-state-handle-integration

Uses koinViewModel to automatically inject the SavedStateHandle into a Koin-managed ViewModel.

```kotlin
@Composable  
fun KoinView(  
    viewModel: KoinViewModel = koinViewModel()  
) {  
    val state by viewModel.state.collectAsState()  
    Text(text = state, modifier = Modifier.testTag("state"))  
}
```

--------------------------------

### Using Parameter Default Values with eunGabiViewModel

Source: https://euuungb.github.io/eungabi/navigation/saved-state-handle-integration

Injects the SavedStateHandle automatically into the ViewModel via the eunGabiViewModel helper.

```kotlin
@Composable 
fun EunGabiScreen( 
    viewModel: EunGabiViewModel = eunGabiViewModel { handle -> EunGabiViewModel(handle) }
) { ... }
```

--------------------------------

### Accessing SavedStateHandle via EunGabiController

Source: https://euuungb.github.io/eungabi/navigation/saved-state-handle-integration

Retrieves the SavedStateHandle from the navigation back stack using the controller.

```kotlin
val controller = rememberEunGabiController()
val backStack by controller.backStack. collectAsState()
val handle = backStack.last().savedStateHandle 
val viewModel = viewModel { ViewModel(handle) }
```

--------------------------------

### Hilt Integration for SavedStateHandle

Source: https://euuungb.github.io/eungabi/navigation/saved-state-handle-integration

Uses hiltViewModel to automatically inject the SavedStateHandle into a Hilt-managed ViewModel.

```kotlin
@Composable  
fun HiltView(viewModel: HiltViewModel = hiltViewModel()) {  
    val state by viewModel.state.collectAsState()  
    Text(text = state, modifier = Modifier.testTag("state"))  
}
```

--------------------------------

### Access Arguments in Composable

Source: https://euuungb.github.io/eungabi/navigation/passing-arguments

Retrieve passed arguments inside a composable function defined in the graph builder using the arguments bundle.

```kotlin
fun EunGabiGraphBuilder.aScreenRoute() {
    composable("ScreenA") {
        val id = it.arguments.getString("id")
        Screen(id = id)
    }
}
```

--------------------------------

### Pass Complex Arguments in URLs

Source: https://euuungb.github.io/eungabi/navigation/passing-arguments

Enclose complex arguments in curly braces to handle special characters. Note that this feature is deprecated since version 0.4.1.

```kotlin
val fullRoute =  
    "ScreenA?url1={https://easternkite.github.io?param1=value1&param2=value2}&url2={https://easternkite.github.io?param1=value1&param2=value2}&id=123"
controller.navigate(fullRoute)

fun EunGabiGraphBuilder.aScreenRoute() {
    composable("ScreenA") {
        val id = it.arguments.getString("url1") // it will be "https://easternkite.github.io?param1=value1&param2=value2"
        Screen(id = id)
    }
}
```

--------------------------------

### Accessing SavedStateHandle within NavGraphBuilder.composable

Source: https://euuungb.github.io/eungabi/navigation/saved-state-handle-integration

Directly accesses the SavedStateHandle from the current entry provided by the composable function.

```kotlin
NavHost(...) { 
    composable(...) { entry -> 
        val handle = entry.savedStateHandle
        val viewModel = viewModel { ViewModel(handle) } 
    }
}
```
Tokens:
Raw