React Native - Tab Navigation

This lesson is part of a series on React Native.

Step 9 - Tab Navigation

Add the following files to the stocks folder (use the rfnes shortcut to create the starter code for each)

Run the app in the browser and navigate to:

In the stocks folder, create a file named _layout.jsx:

import { Tabs } from "expo-router";

export default function StocksLayout(){
  return (
    <Tabs screenOptions={{headerShown: false}}>
      <Tabs.Screen name="index" options={{ title: "STOCKS"}}/>
      <Tabs.Screen name="nasdaq" options={{ title: "NASDAQ"}}/>
      <Tabs.Screen name="nyse" options={{ title: "NYSE"}}/>
    </Tabs>
  )
}

Run the app in the browser and navigate to these URLs:

Change the headerShown option to false and run the app again.

To remove the yellow header from the screens in the stocks folder, add this element to the Stacks element in app/_layout.jsx:

<Stack.Screen name="stocks" options={{ headerShown: false }} />

Finally, let's add link elements to app/index.jsx so that you can navigate to the stocks and news folders:

import { StyleSheet, Text, View } from 'react-native'
import { Link } from 'expo-router'

const Home = () => {
  return (
    <View>
      <Text>Home</Text>
      <Link href="/about">About</Link>
      <Link href="/contact">Contact</Link>
      <Link href="/news">News</Link>    ////////////////////
      <Link href="/stocks">Stocks</Link> //////////////////
    </View>
  )
}

export default Home

const styles = StyleSheet.create({})

Now, if you run the app on your mobile device, you should be able to navigate to all the screens

Side Note:

If you DON'T want the folder name to be part of the route path, then put parenthesis around its name. This means that when you are setting up Link elements you do not include the folder name in the path