I'm using react-navigation and stack-navigator to manage my screens.
Platforms I'm using:
I have a screen, which acts as a modal form but it is really a full screen. Why is it important the part of "acts as a modal form"? That's because it is kind of modal menu with some options and WITH A TRANSPARENT BACKGROUND COLOR.
As you can see, in the second example the background color is completely replaced or the components previously loaded is unmounted so the effect I want to acchieve is lost. The idea is to be able to navigate to this screen like any other screen.
If it is not posible to accomplish using react-navigation, what other way can I take to do so?
This component executes actions (redux) since is a cross app component and encapsulates lot of mechanisms and logic inside, that's why I can't use it as a PureComponent
relaying on the component which makes use of this one. At least, making this Component as PureComponent would force me to replicate many mechanisms and logic in many other components.
For the sake of the question, and to avoid making the question enormous, both screens have exactly the same style, but the one pushed through StackNavigation
replaces the backgroundColor
, or unmounts the previus screen.
This is what I've have so far:
//PlaylistSelector.js
render() {
//Just a full size empty screen to check and avoid bugs
//Using red instead of transparent, works
return (
<View style={{ flex: 1, backgroundColor: 'transparent' }}>
</View>
);
}
//Navigator.js
import { StackNavigator } from 'react-navigation';
import Album from './Album'; //This is the screen I expect to keep at the background
import PlaylistSelector from './PlaylistSelector';
const AppNavigator = StackNavigator(
{
...moreScreens,
Album: { screen: Album },
PlaylistSelector: {
screen: PlaylistSelector,
navigationOptions: {
style: { backgroundColor: 'red' } //Does not work, red is just to ilustrate, should be transparent,
cardStyle: { //Does not work,
backgroundColor: 'transparent',
},
bodyStyle: { //Does not work,
backgroundColor: 'transparent',
},
}
}
},
{
initialRouteName: 'Splash',
headerMode: 'none',
cardStyle: { //Does not work
backgroundColor: 'transparent',
},
transitionConfig: (): Object => ({ //Does not work
containerStyle: {
backgroundColor: 'transparent',
},
}),
}
);
export default AppNavigator;
React Native in Action On press down, the default backgroundColor is replaced with a specified underlayColor property that you'll provide as a prop. Here you specify an underlayColor of '#efefef' , which is a light gray; the background color is white.
To change background color on click in React:Set the onClick prop on the element. When the element is clicked, set the active state. Use a ternary operator to conditionally set the background color based on the state variable.
Dark mode using AppearanceAppearance is a core React Native module for getting and listening to theme changes on an underlying device. We won't need to set up any providers in the root App. js file for this implementation.
Provides a way for your app to transition between screens where each new screen is placed on top of a stack. By default the stack navigator is configured to have the familiar iOS and Android look & feel: new screens slide in from the right on iOS, fade in from the bottom on Android.
This was really changed in latest React Navigation
versions. See
https://reactnavigation.org/docs/themes/
For example
import * as React from 'react';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
const MyTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: 'red'
},
};
export default function App() {
return (
<NavigationContainer theme={MyTheme}>{/* content */}</NavigationContainer>
);
}
With react-navigation v3.x You can use the transparentCard pro:
const MainNavigator = createStackNavigator(
{
BottomTabs: {
screen: BottomTabsStack,
},
Modal: {
screen: ModalScreen,
}
},
{
headerMode: 'none',
mode: 'modal',
transparentCard: true,
cardStyle: { opacity: 1 } //This prop is necessary for eventually issue.
}
);
You can find a complete example below:
https://snack.expo.io/@cristiankmb/stacks-in-tabs-with-header-options-with-modal
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With