Code Monkey home page Code Monkey logo

compose-destinations's Introduction

Maven metadata URL License Apache 2.0 Android API kotlin

A KSP library that processes annotations and generates code that uses Official Jetpack Compose Navigation under the hood. It hides the complex, non-type-safe and boilerplate code you would have to write otherwise.
No need to learn a whole new framework to navigate - most APIs are either the same as with the Jetpack Components or inspired by them.

⚠️ If the IDE cannot find the generated files ⚠️

If you cannot use Kotling 1.8.0+

Since AGP (Android Gradle Plugin) 7.4.0, then you need to tell the IDE about the generated files like so:

groovy - build.gradle(:module-name)
applicationVariants.all { variant ->
    variant.addJavaSourceFoldersToModel(
            new File(buildDir, "generated/ksp/${variant.name}/kotlin")
    )
}
kotlin - build.gradle.kts(:module-name)
applicationVariants.all {
    addJavaSourceFoldersToModel(
        File(buildDir, "generated/ksp/$name/kotlin")
    )
}

Note: ☝️ inside android block and replacing applicationVariants with libraryVariants if the module is not an application one (i.e, it uses 'com.android.library' plugin).

If you can update to or are already using Kotling 1.8.0+

Then use KSP version 1.8.0-1.0.9+ which fixes this issue, so the IDE will automatically see the generated files! 🙌 You can, if that's the case, ignore the last step of the Setup section.

Main features

  • Typesafe navigation arguments
  • Simple but configurable navigation graphs setup
  • Navigating back with a result in a simple and type-safe way
  • Getting the navigation arguments from the SavedStateHandle (useful in ViewModels) and NavBackStackEntry in a type-safe way.
  • Navigation animations through integration with Accompanist Navigation-Animation
  • Bottom sheet screens through integration with Accompanist Navigation-Material
  • Easy deep linking to screens
  • Wear OS support (NEW since versions 1.x.30!)
  • All you can do with Official Jetpack Compose Navigation but in a simpler safer way!

For a deeper look into all the features, check our documentation website.

Materials

Basic Usage

  1. Annotate your screen Composables with @Destination:
@Destination
@Composable
fun ProfileScreen() { /*...*/ }
  1. Add navigation arguments to the function declaration:
@Destination
@Composable
fun ProfileScreen(
   id: Int, // <-- required navigation argument
   groupName: String?, // <-- optional navigation argument
   isOwnUser: Boolean = false // <-- optional navigation argument
) { /*...*/ }

Parcelable, Serializable, Enum and classes annotated with @kotlinx.serialization.Serializable (as well as Arrays and ArrayLists of these) work out of the box! You can also make any other type a navigation argument type. Read about it here

There is an alternative way to define the destination arguments in case you don't need to use them inside the Composable (as is likely the case when using ViewModel). Read more here.

  1. Build the project (or ./gradlew kspDebugKotlin, which should be faster) to generate all the Destinations. With the above annotated composable, a ProfileScreenDestination file (that we'll use in step 4) would be generated.

  2. Use the generated [ComposableName]Destination invoke method to navigate to it. It will have the correct typed arguments.

@RootNavGraph(start = true) // sets this as the start destination of the default nav graph
@Destination
@Composable
fun HomeScreen(
   navigator: DestinationsNavigator
) {
   /*...*/
   navigator.navigate(ProfileScreenDestination(id = 7, groupName = "Kotlin programmers"))
}

DestinationsNavigator is a wrapper interface to NavController that if declared as a parameter, will be provided for free by the library. NavController can also be provided in the exact same way, but it ties your composables to a specific implementation which will make it harder to test and preview. Read more here

  1. Finally, add the NavHost call:
DestinationsNavHost(navGraph = NavGraphs.root)

NavGraphs is a generated file that describes your navigation graphs and their destinations. By default all destinations will belong to "root" (@RootNavGraph), but you can create your own nav graphs annotations to have certain screens in other navigation graphs.

This call adds all annotated Composable functions as destinations of the Navigation Host.

That's it! No need to worry about routes, NavType, bundles and strings. All that redundant and error-prone code gets generated for you.

Setup

Compose destinations is available via maven central.

1. Add the KSP plugin:

Note: The version you chose for the KSP plugin depends on the Kotlin version your project uses.
You can check https://github.com/google/ksp/releases for the list of KSP versions, then pick the last release that matches your Kotlin version. Example: If you're using 1.6.21 Kotlin version, then the last KSP version is 1.6.21-1.0.6.

groovy - build.gradle(:module-name)
plugins {
    //...
    id 'com.google.devtools.ksp' version '1.6.21-1.0.6' // Depends on your kotlin version
}
kotlin - build.gradle.kts(:module-name)
plugins {
    //...
    id("com.google.devtools.ksp") version "1.6.21-1.0.6" // Depends on your kotlin version
}

2. Add the dependencies:

Compose Destinations has multiple active versions. The higher one uses the latest versions for Compose and Accompanist, while the others use only stable versions. Choose the one that matches your Compose version, considering this table:

Compose 1.1 (1.1.x)Maven Central
Compose 1.2 (1.2.x)Maven Central
Compose 1.3 (1.3.x)Maven Central
Compose 1.4 (1.4.x)Maven Central

Warning: If you choose a version that uses a higher version of Compose than the one you're setting for your app, gradle will upgrade your Compose version via transitive dependency.

groovy - build.gradle(:module-name)
implementation 'io.github.raamcosta.compose-destinations:core:<version>'
ksp 'io.github.raamcosta.compose-destinations:ksp:<version>'
kotlin - build.gradle.kts(:module-name)
implementation("io.github.raamcosta.compose-destinations:core:<version>")
ksp("io.github.raamcosta.compose-destinations:ksp:<version>")

Note: If you want to use animations between screens and/or bottom sheet screens, replace above core dependency with:
implementation 'io.github.raamcosta.compose-destinations:animations-core:<version>'
this will use Accompanist Navigation-Animation and Accompanist Navigation-Material internally.
Read more about the next steps to configure these features here

Note: If you want to use Compose Destinations in a Wear OS app, replace above core dependency with:
implementation 'io.github.raamcosta.compose-destinations:wear-core:<version>'
this will use Wear Compose Navigation internally.
Read more about the next steps to configure these features here

3. And finally, you need to make sure the IDE looks at the generated folder. (NOT NEEDED if you're using Kotlin 1.8.0+, check Readme's first section)

See KSP related issue.
Here is an example of how to do that for all your build variants (inside android block):

Warning: Replace applicationVariants with libraryVariants if the module uses 'com.android.library' plugin!

groovy - build.gradle(:module-name)
applicationVariants.all { variant ->
    kotlin.sourceSets {
        getByName(variant.name) {
            kotlin.srcDir("build/generated/ksp/${variant.name}/kotlin")
        }
    }
}
kotlin - build.gradle.kts(:module-name)
applicationVariants.all {
    kotlin.sourceSets {
        getByName(name) {
            kotlin.srcDir("build/generated/ksp/$name/kotlin")
        }
    }
}

About

The library is now in its beta stage, which means that I am happy with the core feature set. If the APIs change, I will provide a migration path. Please do try it and open issues if you find any. If you're interested in contributing, reach out via twitter DM.

Any feedback and contributions are highly appreciated!

If you like the library, consider starring and sharing it with your colleagues.

compose-destinations's People

Contributors

raamcosta avatar rafaeltonholo avatar imashnake0 avatar mordred avatar yschimke avatar petrstetka avatar yasanglass avatar hrafnthor avatar sumanabhi avatar skaldebane avatar vahalaru avatar margarita-v avatar nrobi144 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.