Compose Nav Transitions

A Jetpack Compose Library built on top of the Jetpack Compose Navigation Library to provide easy to use transitions between screens.

Demo

v0.2.0-alpha01.mp4

Installation

// This library is built on top of Navigation Compose Library, You need to add it to your project first
// https://developer.android.com/jetpack/compose/navigation
implementation("androidx.navigation:navigation-compose:2.7.1")

implementation("dev.jianastrero.compose-nav-transitions:compose-nav-transitions:0.2.0-alpha01")

Version Guide

Compose Nav Transitions	Navigation Compose	Demo
0.2.0-alpha01	2.7.1
0.1.0-alpha01	2.7.1

Usage

Use NavTransitionHost instead of NavHost

NavTransitionHost(
    navController = navController,
    startDestination = "Home",
    modifier = Modifier.fillMaxSize()
) {
    /* Rest of your code */
}

Use transitionComposable instead of composable

transitionComposable("home") {
    /* Rest of your code */
}

Use sharedElement(tag) modifier for the views you want to animate

transitionComposable("home") {
    Column(
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center,
    modifier = Modifier.fillMaxSize()
    ) {
        Text(
            text = "Home",
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier
                .padding(32.dp)
                .sharedElement("text") // <-- Add this
                .padding(4.dp)
        )
        Image(
            painter = painterResource(id = R.drawable.sample),
            contentDescription = "Sample Image",
            modifier = Modifier
                .size(100.dp)
                .clickable { navController.navigate("detail") }
                .sharedElement("image") // <-- Add this
        )
    }
}

- OR -

@Composable
fun NavTransitionScope.MyScreen() { // <-- Add NavTransitionScope to be able to use sharedElement
  Column(
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center,
    modifier = Modifier.fillMaxSize()
  ) {
    Text(
      text = "Home",
      fontSize = 24.sp,
      fontWeight = FontWeight.Bold,
      modifier = Modifier
        .padding(32.dp)
        .sharedElement("text") // <-- Add this
        .padding(4.dp)
    )
    Image(
      painter = painterResource(id = R.drawable.sample),
      contentDescription = "Sample Image",
      modifier = Modifier
        .size(100.dp)
        .clickable { navController.navigate("detail") }
        .sharedElement("image") // <-- Add this
    )
  }
}

Contributing to Compose Nav Transitions

I love your input! I want to make contributing to this project as easy and transparent as possible, whether it's:

• Reporting a bug
• Discussing the current state of the code
• Submitting a fix
• Proposing new features
• Becoming a maintainer
• Or even just giving feedback

How to contribute

To contribute to Compose Nav Transitions, follow these steps:

1. Fork this repository.
2. Create a branch: git checkout -b <branch_name>.
3. Make your changes and commit them: git commit -m '<commit_message>'
4. Push to the original branch: git push origin ComposeNavTransitions/main
5. Create the pull request.

Alternatively see the GitHub documentation on creating a pull request.

Any contributions you make will be under the MIT Software License

In short, when you submit code changes, your submissions are understood to be under the same **MIT License **

Write bug reports with detail, background, and sample code

Great Bug Reports tend to have:

• A quick summary and/or background
• Video (if possible) showing the problem
• Steps to reproduce
  • Be specific!
  • Give sample code if you can.
• What you expected would happen
• What actually happens
• Notes (possibly including why you think this might be happening, or stuff you tried that didn't work)

License

By contributing, you agree that your contributions will be licensed under its MIT License.

LICENSE (MIT)

MIT License

Copyright (c) 2023 Jian James Astrero

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.