Route Transition

Onomis offers useful animation properties that allow you to animate transitions between views when the route changes.

The default value of routeAnimation in the app.config.js is set to fade-in. Additionally, we've created a changeRouteAnimationaction in src/store/routeAnimationSlice, allowing you to change the value dynamically.

// Redux Imports
import {useDispatch, useSelector} from "react-redux"

// Actions
import {RouteAnimation, changeRouteAnimation} from "@/store/routeAnimationSlice"

// Custom Components Imports
import EBtn from "@components/Elements/EBtn"

export const RouteAnimationToggler = () => {
    // Hooks
    const dispatch = useDispatch();
    
    // This is how you get the route animation value
    const routeAnimation = useSelector((RouteAnimation));
    
    const toggleAnimation = () => {
        // @possible-values: fade-in, slide-right, slide-left, slide-up
        dispatch(changeRouteAnimation("slide-right"))
    }

    return (
        <EBtn onClick={toggleAnimation}>
          Slide-right
        </EBtn>
    )
}

Here's the list of animation values available for route transitions:

• fade-in
• slide-right
• slide-left
• slide-up