I am trying to make a specific screen have a transparent background using react navigation but I only want this behaviour on this specific screen. I am stuck because I have tried the following approach:
export const MainNavigator = StackNavigator({
ScreenOne: {
screen: ScreenOne
},
ScreenTwo: {
screen: ScreenTwoNavigator
},
ScreenThree: {
screen: ScreenThreeNavigator,
},
}, {
headerMode: 'none',
mode: 'modal',
cardStyle: {
opacity: 0.1,
},
})
However, this results in the opacity being applied to all the screens. I have also tried removing the opacity from this and instead setting it within the ScreenThreeNavigator, which contains only the single screen that i wish to have as transparent. This had no impact whatsoever. I have also tried setting the background color of the View for this screen as transparent but this also did not work.
I was able to resolve the problem by instead taking this approach and not using a separate screen:
Add an overlay to a react-navigation navigator
Related
I am trying to replicate Popup behaviour(Modal) using react-navigation. I am able to replicate some parts of it but I am not able to generate the complete result. I have to put the tabBar in the Background of the screen. I don't want to hide it. I am using Navigation it gives me some significant advantages over Modal.
I have tried using tabBarVisible: false but it hides the tabBar completely. I am using mode: 'modal' to have the modal behaviour and using TouchableHighlight to close the Modal if pressed on the empty part of the screen. I am not able to overlap the tabBar like the images I have attached below.
This is my code:
const SpaceTabNavigator = createStackNavigator({
Spaces: {
screen: SpacesTab
},
applianceList: AppliancesList,
applianceConfig: ApplianceConfig
},
{
initialRouteName: 'Spaces',
headerMode: 'none',
navigationOptions: {
headerVisible: false,
},
mode: 'modal',
transparentCard: true,
cardStyle: {
opacity: 1
},
})
const TabNavigator = createBottomTabNavigator({
Dashboard: {
screen: HomeTab,
},
Spaces: SpaceTabNavigator,
Moods: MoodStackNavigator,
},
{
swipeEnabled: true,
animationEnabled: true
})
const DrawerNavigator = createDrawerNavigator(
{
TabNav: TabNavigator
},
{
contentComponent: Drawer
}
);
Can you please suggest a way around it?
Here is the result I have achieved yet: The achieved Result
Here is the result I want: This is the result I want
Step - 1 : Make the modal transparent by using the 'transparent' prop from the modal.
Step - 2 : Give the modal margin bottom lets say 50 to render it above the tab bar.
This shall do it
I am currently working at a project with a StackNavigator of React-Navigation: https://snack.expo.io/#pob/stacknavigator-problem. I use the Navigator in front of a background image and I want, that the body of each of its pages is transparent, so that you can see the background image through the StackNavigator.
I already found out how to set the style of the StackNavigator's header, but I have no idea how to set the style of its body. I would like to set the color of this body to 'transparent'. Can anyone help?
Screenshot of the result I get with Hazim Ali's snack in iOS:
the body style should be added something like this if you want all screen in StackNavigator to have transparent background, and header not visible
const MyStackNavigator = new StackNavigator({
ScreenOne: { screen: ScreenOne },
},{
cardStyle: {
backgroundColor: "transparent",
},
navigationOptions: {
header: null
}
});
I'm a newbie in React Native and I want to test react-native-navigation by wix
I have a SingleScreenApp with a drawer. See below :
Navigation.startSingleScreenApp({
screen: {
screen: 'example.HomeScreen',
title: 'Home',
navigatorStyle: {},
navigatorButtons: {}
},
drawer: {
// optional, add this if you want a side menu drawer in your app
left: {
screen: 'example.LefMenu',
passProps: {},
disableOpenGesture: false,
fixedWidth: 500
},
style: {
drawerShadow: true,
contentOverlayColor: 'rgba(0,0,0,0.25)',
leftDrawerWidth: 50,
rightDrawerWidth: 50
},
type: 'MMDrawer',
animationType: 'door',
disableOpenGesture: false
},
passProps: {},
animationType: 'slide-down'
});
To have a menu-like behavior, I want to change the main screen of the SingleScreenApp (by clicking a button or other interaction).
I insist that I want to change/remplace the main screen, not pushing or showing a modal.
Should I start another SingleScreenApp with a root screen different screen ? Should I use "resetTo" method ?
What is the best in term of performance ?
Thanks a lot !
You do want to use resetTo(). This will pop any currently-pushed screens and replace the current root screen with the new one.
I am using a StackNavigator from react-navigation. I want a simple card slide animation to occur in my component. The current transition is one where the second screen slides up from the bottom. I want the standard slide effect(which is supposed to be the default in the first place).
The StackNavigator is created as follows:
const Stack = StackNavigator(
{
Phone: {
screen: Phone,
},
Code: {
screen: Code
}
},
{
mode: 'card',
headerMode: 'none',
cardStyle: {
backgroundColor: "transperent"
}
});
And this is the navigationOptions I used in the components:
static navigationOptions = {
header: {
visible: false,
}
I created a little snack, with the expo app, of your code. If you are developing on iOS, it will slide in from the right.
https://snack.expo.io/HkKhDNJ4W
I'm beginning in React Native development.
I've spend many hours on something but I'm still blocked.
I have a "header" view and under the view, a Stack navigator and inside a tab navigator.
When I open the stack navigator (with the Login Button), I would like to put the new view above the "header", without hiding him to avoid ugly effect when the new view appears.
Here an example when I put a negative margin top on the stacknavigator, but it stays behind the header
Is there any other way to do this properly ?
Thanks.
For information, I've started from the React Native boilerplate "Pepperoni App Kit", added my custom header before the AppNavigator, and hidden the headers on the Tab navigator.
Instead of having header under View, you should have use headerMode:'screen' option with StackNavigator. You can control the visibility of header under each sub navigator using the navigation options.
Here is sample snippet
export const Root = StackNavigator(
{
Tabs: {
screen: HOViewPager,
navigationOptions: {
title: "Title",
header: <Header />,
},
},
login: {
screen: Login,
navigationOptions: {
headerMode: "none",
header: null,
},
},
imageoverlay: {
screen: HOImageOverlay,
navigationOptions: {
headerMode: "none",
header: null,
},
},
},
{
mode: "modal",
headerMode: "screen",
}
);