reactjsreact-nativeexporeact-navigation

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


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:

enter image description here


Solution

  • 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