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
}
});
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 teaching myself React Native and building a fairly simple app,irMobile.
I've set up each screen with (using the About screen as an example)
static navigationOptions = () => ({
title: 'About'
})
and in my app's main component
const MainNavigator = createBottomTabNavigator({ About })
const StackNavigator = createStackNavigator({ MainNavigator })
const AppContainer = createAppContainer(StackNavigator)
then in the component itself
render() {
return (
<View style={styles.container}>
<AppContainer />
</View>
)
}
My screens render with a nice nav bar at the bottom but I don't get any titles in the header, just an empty space.
I've gone through the docs several times looking to see what I have missed and I'm stumped.
If I use the inspector in the iOS simulator I can select the header and it shows it to be a View at x: 0, y: 44 with width: 375 and height: 43.7, so the thing is there I just can't see it.
I've tried setting a headerStyle to { backgroundColor: 'red' } to see if I can at least see that, but no.
However, if I change the StackNavigator to put the About screen in there along with the MainNavigator as follows:
const StackNavigator = createStackNavigator({ About, MainNavigator })
Then I get my header showing up as expected, but the bottom tab bar no longer shows.
So that's confusing.
The docs are a bit vague on how to get both a header and a bottom tab navigator into the same app. Clearly, being a bit of a React Native noob here, I am missing something really obvious and simple.
What am I failing to understand and how do I fix this?
Source code at github.com/davesag/irMobile.
By setting navigationOptions inside the component, you apply it to the navigation element that is calling the component.
So in your case, the title you define in About applies to the bottom tab, and not to the screen as you would like to.
Rather than setting navigationOptions as a static property inside the component, you need to define it directly when creating the stack navigation.
In addition to this, I think you want to nest the stack inside the bottom tab navigation, not the other way around. By doing so, you can have a different title for each screen.
Here is an example:
const AboutStack = createStackNavigator({ About: { screen: About, navigationOptions: { title: 'About Title' } } });
const CreditStack = createStackNavigator({ Credit: { screen: Credit, navigationOptions: { title: 'Credit Title' } } });
const MainNavigator = createBottomTabNavigator({
About: { screen: AboutStack, navigationOptions: { title: 'About Label' } },
Credit: { screen: CreditStack, navigationOptions: { title: 'Credit Label' } },
});
const AppContainer = createAppContainer(MainNavigator);
Like this, the header title will be "About Title" and the tab label "About Label".
Okay I have worked it out.
The trick is to use getActiveChildNavigationOptions.
So now my code looks like
const navBar = useStorybook({ Balances, Settings, About })
const MainNavigator = createBottomTabNavigator(navBar, {
navigationOptions: ({ navigation, screenProps }) =>
getActiveChildNavigationOptions(navigation, screenProps)
})
const StackNavigator = createStackNavigator({ MainNavigator })
const AppContainer = createAppContainer(StackNavigator)
As #Remeus pointed out, the titles in my actual screen components were only making it to the MainNavigator and not accessible by the StackNavigator.
Rather than invert my stack however and create a StackNavigator for each tab, it seems to me to be cleaner to leverage getActiveChildNavigationOptions to grab the screen components' title (and other) navigationOptions.
This works perfectly.
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
I have a login Screen, when the user login they are brought to a screen similar to the one shown above.
In this screen, I have a tabNavigator containing tabs to 5 screens, similar to the one shown in the image above. It also has a header kinda thing with search bar in it. This header is only supposed to be shown in 4 of the 5 tabs and there is a different header i need to display in the 5th tab.
Is there a way to do this? I know i can add a view in 4 of the 5 tabs that render same header and a view in the 5th screen that renders a different header, But I was wondering if there is a way I could do this without having to render the same view in all the 4 tabs again and again.
P.S It should work on both iOS and Android
You can configure header of TabNavigator by navigationOptions:
const TabNav = TabNavigator({
First: { screen: FirstPage },
Second: { screen: SecondPage },
Third: { screen: ThirdPage },
Fourth: { screen: FourthPage },
Fifth: { screen: FifthPage }
}, {
navigationOptions: {
header: <SearchHeader />
}
})
And then custom navigationOptions in FifthPage:
class FifthPage extends Component {
static navigationOptions = {
header: <FifthPageHeader />
}
}
I just created a demo on Expo Snack: https://snack.expo.io/rJDGpmPHZ, the 5th screen has a blue header, and the others have a red one.
In the document of TabNavigator at https://reactnavigation.org/docs/navigators/tab#Screen-Navigation-Options, it hasn't list the header option, I think it will be pass to StackNavigator.
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",
}
);