Linear Gradient (React native) not working on the navigation container

I am creating a react native app in which, I am using the react-native-linear-gradient. I want to use the linear gradient on all of my screens. So I tried to wrap my navigation container(react navigation 6) but it is not working, when applying linear gradient to individual screens then it is showing.

const SignupNavigation = () => {


 return (
        <Provider store={store}>
          <NavigationContainer>
            <LinearGradient
              colors={['#05086A', '#0B023A']}
              style={[GlobalStyle.rootScreen]}>
              <SafeAreaView style={GlobalStyle.rootScreen}>
                <Stack.Navigator>
                  <Stack.Screen
                    name="Start"
                    component={StartScreen}
                    options={{
                      headerShown: false,
                    }}
                  />
                  <Stack.Screen
                    name="SendOtp"
                    component={SendOtpScreen}
                    options={{
                      headerShown: false,
                    }}
                  />
                  <Stack.Screen
                    name="VerifyOtp"
                    component={VerfiyOtpScreen}
                    options={{
                      headerShown: false,
                    }}
                  />
                  <Stack.Screen
                    name="VerifiedOtp"
                    component={VerifiedOtpScreen}
                    options={{
                      headerShown: false,
                    }}
                  />
                  <Stack.Screen
                    name="SignUpUserInfo"
                    component={SignUpUserInfoScreen}
                    options={{
                      headerShown: false,
                    }}
                  />
                  <Stack.Screen
                    name="SignUpGameSelection"
                    component={SignUpGameSelectScreen}
                    options={{
                      headerShown: false,
                    }}
                  />
                  <Stack.Screen
                    name="SignUpGameTags"
                    component={SignUpGameTagScreen}
                    options={{
                      headerShown: false,
                    }}
                  />
                  <Stack.Screen
                    name="TabNavigation"
                    component={TabNavigation}
                    options={{
                      headerShown: false,
                    }}
                  />
                </Stack.Navigator>
              </SafeAreaView>
            </LinearGradient>
          </NavigationContainer>
        </Provider>
      );
    };

export default SignupNavigation;

style for rootscreen:

 rootScreen: {
    flex: 1,
  },

I want to reduce the repetited code such as implementing safeAreaView and linear-gradient to every screen. Please guide me what is the fix?

Thanks in advance.