ReactNative Navigation - activeState
Active state navigation with navigation props
Recently, I got to work on my first react-native live project. The project director mandated we curtail reliance on dependencies as much as possible. Earlier on, he recounted how a certain dependency kept breaking his codebase during production. It allegedly took him several months of debugging and stripping dependencies to identify the culpable dependency.
This rule cum relayed experienced formed the basic principles of the project’s front-end development. Thus we could use only the basic dependencies, then try to work around others.
I was tasked with integrating the navigation and active states. I easily fixed the navigation but got stuck implementing the active state.
An active state is a prominent ‘highlight’ that helps an application’s user identify his/her current focused page. Ideally, you can easily achieve this using the tab or gesture handler. But then, you are required to download their dependencies to be able to use them.
How I worked around implementing activeState without a dependency
Modularization allowed me to build an independent module for the footer navigation.
Within this module, I was able to integrate an active state using the react state, conditionals and styles. Though this procedure contradicted best practices as I used the onPress() event listener to switch between active states.
Going forward, I needed to integrate the footer module with its focus page by introducing the footer module to the parent flow. Doing this, I simply appended the navigation method to the onPress method bearing the active state but alas this did not achieve the desired result as the active state did not tally with its focused page. This occurred because the footer module was not static, rather it was individually attached to each of the focus pages so on pressing and subsequent navigation, the component re-renders to the intended page with a new footer navigation component and a disordered activeState.
My first thought of a fix entailed passing down props from the focused page down to its footer component, this props should enable the focused footer component to assume/handle an active state possibly using conditionals and styles but I could not figure out the best way to achieve this.
Another idea struck, I reckoned that a focused page should have some usable properties or methods. Re-searching on this, I came across the isfocused props and a much better approach; the navigation props.
Using the Navigation props(this.props.navigation.state.routeName) to handle navigation active state
The navigation props passed down to components to enable navigation has a state-this.props.navigation.state.routeName-which detects the focused page. I utilized this state within my footer module.
Thus, I was able to achieve a perfect activeState within the drawer and footer components using a conditional to assign the highlight styles to the intended elements while on the focused page.
