How can I hide tabbar navigation? After navigate I can See tabbar and not working but in working.
navigationOptions:{tabBarVisible: false} On line 5 not working but on line 22 for main tabs working fine.
const MenStack = createStackNavigator({
menStackNav: { screen: MenTabScreen},
Products: {
screen: ProductsShow,
navigationOptions:{tabBarVisible: false},
},
},{
initialRouteName: 'menStackNav',
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
});
const HomeScreenTabs = createMaterialTopTabNavigator({
home:{
screen:HomeTabScreen,
},
women: WomenTabScreen,
men: {
screen:MenStack,
navigationOptions:{tabBarVisible: false},
},
},{
tabBarOptions: {
activeTintColor: '#fff',
inactiveTintColor: '#eee',
tabStyle:{backgroundColor:'#0077FF',height:40},
labelStyle: {
fontSize: 14,
fontFamily:'iransans_medium',
},
},
initialRouteName: 'men',
mode: 'modal',
headerMode: 'none',
});
I have 3 tabs and a stack navigation for navigate to another screen to show products. I need to hide tabbar when products are visible.
You need to use tabBarVisible to hide the tabBar inside your stackPage
const MenStack = createStackNavigator({
Home:{screen: MenTabScreen,},
Products:{screen: ProductsShow,}
}, {initialRouteName: 'Home', headerMode: 'none')}
MenStack.navigationOptions = ({navigation}) => {
let tabBarVisible = true;
if(navigation.state.index > 0){
tabBarVisible = false;
}
return {
tabBarVisible,
}
}
const HomeScreenTabs = createBottomTabNavigator({
Home:{screen: HomeTabScreen,},
Women :{screen: WomenTabScreen,},
Men : {screen : MenStack,}
})
export default HomeScreenTabs;
Related
For 3 screens in my app I need to make a modal transition.
For the rest of the screens - I need the default right-to-left transition.
How do I achieve this with different stack navigators?
const AuthStack = createStackNavigator(
{
LogIn: { screen: LogInScreen },
Signup: { screen: SingupScreen },
Welcome: { screen: WelcomeScreen },
CodeVerification: { screen: CodeVerificationScreen },
PasswordSelection: { screen: PasswordSelectionScreen },
RegistrationSuccess: { screen: RegistrationSuccessScreen }
},
{
initialRouteName: 'LogIn'
}
)
const ModalNavigator = createStackNavigator({
ContactInfoEdit: { screen: ContactInfoEditScreen },
DeliveryAddressEdit: { screen: DeliveryAddressEditScreen },
OrderPlacedScreen: { screen: OrderPlacedScreen },
},
{
initialRouteName: 'ContactInfoEdit',
})
const ProductsStack = createStackNavigator(
{
Products: {
screen: ProductsScreen
},
Product: {
screen: ProductScreen
},
ProductBuy: {
screen: ProductBuyScreen
},
OrderConfirm: {
screen: OrderConfirmScreen
},
PlaceOrder: {
screen: PlaceOrderScreen
},
Modal: ModalNavigator
},
{
initialRouteName: 'Products',
mode: 'modal',
}
)
If I set mode: modal it will make all the navigation animations will be modal.
If I remove it, all the navigations will be default (right-to-left)
const ProductsTabStack = createBottomTabNavigator(
{
Orders: { screen: OrdersScreen },
Products: { screen: ProductsStack },
Profile: { screen: ProfileScreen }
},
{
initialRouteName: 'Products',
backBehavior: 'none',
tabBarOptions: {
activeTintColor: '#ffffff',
inactiveTintColor: primaryColor,
activeBackgroundColor: primaryColor,
labelStyle: {
marginBottom: 17,
fontSize: 15,
},
tabStyle: {
shadowColor: primaryColor,
borderWidth: 0.5,
borderColor: primaryColor,
},
},
},
)
export const AppNavigator = createSwitchNavigator({
Auth: AuthStack,
Categories: ProductsTabStack
})
I tried setting mode: modal in the ModalNavigator, but then it took the default parent navigation.
You probably want to try to use StackNavigatorConfig while navigating to that screen this.props.navigation.navigate('ScreenName', params, {mode: 'modal'})
If you want to keep all your transition code in same file as you have right now, you can do the same as what react-navigation is suggesting here
It goes something like that
import { createStackNavigator, StackViewTransitionConfigs } from 'react- navigation';
/* The screens you add to IOS_MODAL_ROUTES will have the modal transition. */
const IOS_MODAL_ROUTES = ['OptionsScreen'];
let dynamicModalTransition = (transitionProps, prevTransitionProps) => {
const isModal = IOS_MODAL_ROUTES.some(
screenName =>
screenName === transitionProps.scene.route.routeName ||
(prevTransitionProps && screenName ===
prevTransitionProps.scene.route.routeName)
)
return StackViewTransitionConfigs.defaultTransitionConfig(
transitionProps,
prevTransitionProps,
isModal
);
};
const HomeStack = createStackNavigator(
{ DetailScreen, HomeScreen, OptionsScreen },
{ initialRouteName: 'HomeScreen', transitionConfig: dynamicModalTransition }
);
OK, found a workaround for custom transitions in 1 StackNavigator using https://www.npmjs.com/package/react-navigation-transitions:
const handleCustomTransition = ({ scenes }) => {
const nextScene = scenes[scenes.length - 1]
if (nextScene.route.routeName === 'ContactInfoEdit')
return fromBottom()
else
return fromRight()
}
const ProductsStack = createStackNavigator(
{
Products: {
screen: ProductsScreen
},
Product: {
screen: ProductScreen
},
ProductBuy: {
screen: ProductBuyScreen
},
OrderConfirm: {
screen: OrderConfirmScreen
},
PlaceOrder: {
screen: PlaceOrderScreen
},
ContactInfoEdit: { screen: ContactInfoEditScreen },
DeliveryAddressEdit: { screen: DeliveryAddressEditScreen },
OrderPlacedScreen: { screen: OrderPlacedScreen },
},
{
initialRouteName: 'Products',
transitionConfig: (nav) => handleCustomTransition(nav)
}
)
I have issue with react-navigation v3. I want to add new component (tab item) or remove exists tab item in the current tab bar.
I have do:
export const MainTabContainer = createBottomTabNavigator(
{
Genre: {
screen: GenreScreen
},
History: {
screen: HistoryScreen
}
},
{
initialRouteName: 'Genre',
backBehavior: true,
lazy: true,
tabBarOptions: {
activeTintColor: '#454545',
activeBackgroundColor: 'white',
inactiveTintColor: '#ccc',
inactiveBackgroundColor: 'white'
}
}
);
const defaultTabGetStateForAction = MainTabContainer.router.getStateForAction;
const defaultTabGetComponentForRouteName = MainTabContainer.router.getComponentForRouteName;
MainTabContainer.router.getStateForAction = (action, state) => {
if (!state || !action || !action.name) {
return defaultTabGetStateForAction(action, state);
}
if (action.name === 'addTab') {
const routes = [
...state.routes,
{key: action.key, routeName: action.routerName, params: action.data}
];
return {
...state,
routes,
index: routes.length - 1,
};
}
return defaultTabGetStateForAction(action, state);
};
MainTabContainer.router.getComponentForRouteName = (routeName) => {
if (routeName === 'Recent') return RecentScreen;
else if (routeName === 'About') return AboutScreen;
return defaultTabGetComponentForRouteName(routeName);
};
export const Home = createDrawerNavigator(
{
Main: MainTabContainer
},
{
drawerPosition: 'left',
useNativeAnimations: true,
drawerType: 'front',
contentComponent: MenuDrawer
}
);
const RootStack = createStackNavigator(
{
SplashScreen: SplashScreen,
Home: Home,
DetailScreen: DetailScreen
},
{
initialRouteName: 'SplashScreen',
mode: 'modal',
headerMode: 'none',
header: null,
transparentCard: true,
cardStyle: {
shadowColor: 'transparent',
backgroundColor:"transparent",
opacity: 1
}
}
);
export const AppContainer = createAppContainer(RootStack);
This way will return error not found the routerName GenreScreen or AboutScreen.
When the user have done something, I want to add GenreScreen or AboutScreen or remove one of them on it. GenreScreen and AboutScreen is not display normally.
Have any suggest to solve this issue?
The first, thank for time.
I have a StackNavigation like this:
const AppNavigator = createStackNavigator({
Login: {
screen: Login,
navigationOptions: () => ({
title: 'Login',
headerTintColor: 'white',
headerStyle:{
backgroundColor: '#000',
elevation: 0,
showdowOpacity: 0
},
})
},
Home: {
screen: AppDrawerNavigator,
navigationOptions: () => ({
header: null
})
},
});
With a DrawerNavigator nested inside:
const AppDrawerNavigator = createDrawerNavigator({
Home: {
screen: Home,
navigationOptions: {
drawerLabel: 'Home',
gesturesEnabled: false,
}
},
Favorites: {
screen: Favorites,
navigationOptions: {
drawerLabel: 'Favorites',
}
}
},
{
drawerPosition: 'left',
contentComponent: props => <Drawer {...props} />
});
The initial route of the stack navigator is working fine
Login -> Home
But when I try navigating from Home to Favorites it navigates immediately back to Home after rendering the Favorites screen.
I am using react-navigation#2.11.2 and react-native#0.56.0
With Home being used in both stack and drawer navigator.
There are high chances of name conflicts occurring here.
Try this structure.
const Stack = {
FirstView: {
screen: FirstView
},
SecondView: {
screen: SecondView
},
ThirdView: {
screen: ThirdView
}
};
const DrawerRoutes = {
FirstViewStack: {
name: 'FirstViewStack',
screen: StackNavigator(Stack, { initialRouteName: 'FirstView' })
},
SecondViewStack: {
name: 'SecondViewStack',
screen: StackNavigator(Stack, { initialRouteName: 'SecondView' })
},
ThirdViewStack: {
name: 'ThirdViewStack',
screen: StackNavigator(Stack, { initialRouteName: 'ThirdView' })
},
};
const RootNavigator =
StackNavigator({
Drawer: {
name: 'Drawer',
screen: DrawerNavigator(
DrawerRoutes,
),
},
...Stack
},
{
headerMode: 'none'
}
);
I faced a similar issue when i tried to use a hamburger menu in my Home page (which uses stack navigator to goto other pages).
Check this Git Article also.
I've made a custom tab bar in a Component which uses StackNavigator like so
export default StackNavigator(
{
Login: {
screen: Login,
},
ForgotPassword: {
screen: ForgotPassword,
},
SignUp: {
screen: SignUp,
},
Home: {
screen: Home,
},
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
},
initialRouteName: 'Home',
},
);
Now my Home screen has a custom made Tab Bar like so
export default () => (
<View>
<Text>HOME</Text>
<TabBar />
</View>
)
I want my Home screens Tab bar to have no transition
Currently it animates (left to right for IOS & bottom to up for Android) when one of the Tab link is clicked
I checked docs & found mode property but it has only 2 props card & modal & I want no animation
How to do it ?
Thanks to #Vojtech, I got the answer
const customAnimationFunc = () => ({
screenInterpolator: (sceneProps) => {
const { scene } = sceneProps;
const tabs = ['Home'];
if (tabs.indexOf(scene.route.routeName) !== -1) return null;
},
});
export default StackNavigator(
{
Login: {
screen: Login,
},
ForgotPassword: {
screen: ForgotPassword,
},
SignUp: {
screen: SignUp,
},
Home: {
screen: Home,
},
},
{
headerMode: 'none',
transitionConfig: customAnimationFunc,
navigationOptions: {
headerVisible: false,
},
initialRouteName: 'Home',
},
);
The only problem right now is nothing is animating. I'll edit the answer when few screens animate & tabs don't
please I want to create two DrawerNavigator inside 1 stacknavigator I need the first one will be in Menu Drawer, the second will be for Cart items I need some help or just some ideas how to create this with react-navigation thanks
this my actual implementation
const RootNavigator =
StackNavigator({
Drawer: {
screen: DrawerNavigator(
DrawerRoutesLeft,DrawerContentLeft
)
},
...AnonymousStack
},
{ headerMode: 'none' }
);
let drawerStack = {
Home: {screen: nav_tab},
Rayon: {title:"Rayon" ,screen: Rayon},
Product : {screen :Porduct } }
export let DrawerContentLeft = {
drawerWidth: DEVICE_WIDTH - DEVICE_WIDTH / 5,
contentOptions: {
inactiveTintColor: '#333',
activeTintColor: "#ddd0dd",
},
contentComponent: DrawerContent,
drawerPosition: 'left',
}
let drawerOptions = {
navigationOptions:({navigation}) => ({
headerLeft: <MenuButton navigate={navigation.navigate}/>,
headerStyle:styles.header
}) }
export let DrawerRoutesLeft = {
Home: {
screen: StackNavigator(drawerStack, drawerOptions)
},
Product: {
screen: StackNavigator(drawerStack)
} }