Continuing with the “old-school” serie of implementations (first post here), at the hands of duix , today I’ll show you how to implement a simple Navigation pattern in React Native. Because, remember, duix can be also used in React Native, or any another JavaScript project.

The Approach

The approach is simple. We’ll define a variable in the duix store, called currentPage . We’ll define a default value to point to the “Loading” page, and then we’ll change it every time we want to navigate.

The Example

I implemented the code for the App.js file, and I also implemented a “Login” and “Home” pages, where we’ll have just some text simulating being buttons, that when pressed, them are gonna login/logout the user and navigate to the proper next page.

The Login page has a Text-Button that navigates to Home page. And the Home page has a Text-Button that navigates to Login page again.

The App.js main component file:

The App main component

Here, the Login.js component:

The Login component

Here, the Home.js component file:

The Home component

That’s all guys! I hope you enjoy the simplicity.