Setting background color for all Views using Expo-Route in React Native

Question

I am relatively new to React Native and have been exploring the expo-route. I am struggling to determine how to globally set the background color of all views using expo-router.

I've referred to React Navigation’s documentation, but it seems to be more relevant to React Navigation, not Expo-Route, leading me to question whether I'm missing some fundamental understanding. Link: https://reactnavigation.org/docs/stack-navigator/

I've customized the header background and applied other stylings, my objective is seemingly straightforward: I wish to change the background color to blue for all views collectively.

Could someone please clarify whether there is a way within expo-route to apply a universal background color, or perhaps enlighten me on any misconceptions I might have about expo-route and React Navigation?

An image to show the code and the folder structure:

Answer 1

You can change the color of the background directly by setting the option contentStyle: { backgroundColor: "your_color" } in your Stack component.

Here's an example:

            <Stack
                screenOptions={{
                    contentStyle: { backgroundColor: "your_color" },
                }}
            />

You can find more details about the props in the React Navigation documentation.

Hope I helped