Ricky Figures It Out: Simple React-Native TabNavigator using React-Navigation

Ricky Figures It Out: Simple React-Native TabNavigator using React-Navigation

  • So to start let’s start with the basic file structure layout:I have created a folder I’m going to be doing all my work in called appInside it I have a config folder and a views folder with a index.js file as well.You can call your folders whatever you want, but…
  • /app/index.
  • js file.Our App.js file should look like:import App from ‘.
  • /app/index’;export default App;As always, we want to export it so our root level index.js can import it.Our index.js on the root level should look like this:import { AppRegistry } from ‘react-native’;import App from () = App);This is best practice if you want to set up any kind of server/database or…

No offense, but all of the other React-Native navigation articles I’ve found on Medium don’t work. So I took it upon myself to figure it out, and write a better, smarter, easier way for navigation…

No offense, but all of the other React-Native navigation articles I’ve found on Medium don’t work. So I took it upon myself to figure it out, and write a better, smarter, easier way for navigation.

So to start let’s start with the basic file structure layout:

Inside it I have a config folder and a views folder with a index.js file as well.

You can call your folders whatever you want, but for me, config made sense when I was writing this… I have no idea why.

Now comes the fun part!

In our root level App.js, let’s import our ./app/index.js file.

Our App.js file should look like:

import App from ‘./app/index’;

export default App;

As always, we want to export it so our root level index.js can import it.

Our index.js on the root level should look like this:

import { AppRegistry } from ‘react-native’;

import App from ‘./App’;

This is best practice if you want to set up any kind of server/database or authentication for your mobile app.

I will write an article about those later, for now, let’s focus on learning best practice and setting up our Tab Navigation!

Let’s go ahead and import react-navigation.

Next, let’s setup our views so we can have something to navigate through!

view as a starting point, my…

Ricky Figures It Out: Simple React-Native TabNavigator using React-Navigation