I have a react native applicaiton that I am currently building. One part of my react native application is that if the user is not logged in, I want to show a background image with the content from the LoginScreen displaying on the screen with a red background. I am noticing that the AuthenticationStackNavigation cards all have a white background for som reason and I can not remove it by setting cardStyle: { backgroundColor: 'rgba(0,0,0,0)' },
I dont know how to remove the background. I also tried setting backgroundColor: 'transparent'
. Does anyone know how to remove the background.
import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import LoginScreen from '../Screens/Authentication/LoginScreen';
import SignupScreen from '../Screens/Authentication/SignupScreen';
import ProfileScreen from '../Screens/Authentication/ProfileScreen';
import ForgotPasswordScreen from '../Screens/Authentication/ForgotPasswordScreen';
import ConfirmEmailScreen from '../Screens/Authentication/ConfirmEmailScreen';
import { NavigationContainer } from '@react-navigation/native';
const StackNav = createStackNavigator();
const AuthenticationStackNavigation = () => {
return (
<NavigationContainer>
<StackNav.Navigator
initialRouteName="LoginScreen"
screenOptions={{
headerShown: false,
cardStyle: { backgroundColor: 'rgba(0,0,0,0)' },
}}>
<StackNav.Screen name="LoginScreen" component={LoginScreen} />
<StackNav.Screen name="SignupScreen" component={SignupScreen} />
<StackNav.Screen name="ProfileScreen" component={ProfileScreen} />
<StackNav.Screen name="ForgotPasswordScreen" component={ForgotPasswordScreen} />
<StackNav.Screen name="ConfirmEmailScreen" component={ConfirmEmailScreen} />
</StackNav.Navigator>
</NavigationContainer>
);
};
export default AuthenticationStackNavigation;
You can see the background image I have. The red login for is from the LoginScreen.tsx.
My issue is with the navigation.