React Native - Route Groups

This lesson is part of a series on React Native.

Step 8 - Route groups and nested layouts

Route groups - folders that you put in the app folder to organize pages. The folder name will become part of the route path for all the pages in the folder.

Create these folders in the app folder:

• news
• stocks

Create news/index.jsx

• use the rnfes shortcut:

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'

const index = () => {
  return (
    <View>
      <Text>News</Text>
    </View>
  )
}

export default index

const styles = StyleSheet.create({})

Create stocks/index.jsx

• use the rnfes shortcut:

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'

const index = () => {
  return (
    <View>
      <Text>News</Text>
    </View>
  )
}

export default index

const styles = StyleSheet.create({})

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

• http://localhost:8081/news
• http://localhost:8081/stocks

Notice that the header is inheriting the styles from the app/_layout file

Create news/sports.jsx

• use rfnes to put in the starter code

Create news/weather.jsx

• use rfnes to put in the starter code

Run the app in the browser and navigate to:

• http://localhost:8081/news/sports
• http://localhost:8081/news/weather

This is file based routing!

Create a _layout.jsx file inside the news folder:

import { Stack } from 'expo-router'

const NewsLayout = () => {
  return (
    <Stack screenOptions={{
      headerStyle: {backgroundColor:'green'},
      headerTintColor: 'white',
      /*headerShown: false*/ 
    }}>
      <Stack.Screen name="index" options={{title:" News Home"}} />
      <Stack.Screen name="sports" options={{title:"Sports Screen"}} />
      <Stack.Screen name="weather" options={{title:"Weather Screen"}} />
    </Stack>
  )
}

export default NewsLayout

const styles = StyleSheet.create({})

Run the app in the browser and navigate to:

• http://localhost:8081/news/sports
• http://localhost:8081/news/weather

Experiment with the headerShown property for the options.

If you don't want the yellow header to appear when your are in the news section, add this to the stack in app/_layout.jsx:

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

Extra Note:

I did not mention this in the video, but if you want the back button to be visible, you can set the headerBackVisible property to true in the options object of a Stack.Screen element.