Step 1: Setting Up Navigation ⚔️

Every adventurer needs a way to move between different realms, and for us, that means Tab Navigation! We'll use the mighty power of React Navigation.

First, let’s grab the spellbook from the official library 📚:

npm install @react-navigation/native

Next, install the necessary dependencies for tabs and navigation:

npm install @react-navigation/bottom-tabs
npm install react-native-screens react-native-safe-area-context

Finally, open up your navigation/ folder, and create a TabNavigator.js file:

// src/navigation/TabNavigator.js
import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from '../screens/HomeScreen';
import AccountScreen from '../screens/AccountScreen';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Account" component={AccountScreen} />
    </Tab.Navigator>
  );
}

export default MyTabs;

Step 2: Using the Navigator 🚪

Next, we need to bring our navigation setup into the App.js so that it runs when the app starts. Here’s what your App.js should look like:

// src/App.js
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import MyTabs from './navigation/TabNavigator';

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

With this, you’ve successfully added Tab Navigation to your app. You can now switch between the Home and Account screens with just a tap — like opening doors between magical worlds! 🏞️✨

Final Thoughts 🤔

With a solid folder structure and navigation in place, you’re now ready to start building your app’s core features! But don’t forget — keeping things organized is key to success in the long run. 💪🔮