I'm using createMaterialTopTabNavigator. Inside screen i want top tab navigator. But isn't not showing any screen.
react-native 0.59.9 and react-navigation 3.11.0
{
``` TaskListRoute: { screen: Create },
``` Register: { screen: List }
},
{
``` tabBarPosition: "top",
``` animationEnabled: false,
``` lazy: true,
``` swipeEnabled: false
}
);
I want to render both screen of top tab.
MainNavigator
const MainNavigator = StackNavigator(
{
Start:{ screen:Start },
Login:{ screen:Login },
mainFlow:{
screen: TabNavigator({
Profile: { screen: Profile },
List: { screen: List },
MenuStack: { screen: StackNavigator({
Menu: {screen: Menu},
OpenChannel: { screen: OpenChannel },
OpenChannelCreate: { screen: OpenChannelCreate },
Chat: { screen: Chat },
Member: { screen: Member },
BlockUser: { screen: BlockUser },
GroupChannel: { screen: GroupChannel },
GroupChannelInvite: { screen: GroupChannelInvite },
},{
initialRouteName: 'Menu',
headerMode: 'none',
})}
},{
initialRouteName: 'Profile'
})
}
},{
initialRouteName: 'Start',
}
);
How can I jump from Menu of mainFlow's menuStack to Login Screen of MainNavigator .
I've tried some ways like passing parents navigation to child navigation as params but I failed to pass navigation from tabNavigation to child StackNavigation...
I really need your help!
I followed the react-navigation API instructions as in the link (https://reactnavigation.org/docs/tab-based-navigation.html) and created Tabbar app with TabNavigator stack and each tab has StackNavigator screens. I purposefully commented the tabBarComponent and tabBarPosition because I want the Tabs to appear like native for Android (Top Tabbbar) and IOS (Bottom Tabbar) with same code base. The IOS Tab bar works correctly but when I look at the Android tabbar, the top portion of the tab bar is overlap/overflowing to the Android status bar (I mean the section where the time, battery and wifi symbols appear). Also, the icons and label font size are bigger compared to IOS tab bar size which makes the label to wrap to next line (see "Abcd's ef" tab). What needs to be done, in order for the Android Tabbar to show correctly like the IOS tabbar but at the top i.e., without overflow, wrap text and correct icon and label size. I have provided below the code as well as screenshots of Android and IOS Tabbar.
FYI, I am using Expo on Android and IOS device (not simulators) with create-react-native-app application
[IOS][1]
[Android][2]
[Android Screen with issue details][3]
***Commented Code:***
//tabBarComponent: TabBarBottom,
//tabBarPosition: 'bottom',
***Codes:***
<code>
import React, { Component } from 'react';
import { View, Text, StyleSheet, Platform } from 'react-native';
import FirstScreen from './tabs/FirstScreen';
//import SecondScreen from './tabs/SecondScreen';
import FagsHome from './FagsHome';
import Movies from './Movies';
import MenuSecondScreen from './MenuSecondScreen';
import ThirdScreen from './tabs/ThirdScreen';
import FourthScreen from './tabs/FourthScreen';
import FifthScreen from './tabs/FifthScreen';
import { TabNavigator, TabBarBottom, StackNavigator } from 'react-navigation';
import IconOcticons from 'react-native-vector-icons/Octicons';
import IconFontAwesome from 'react-native-vector-icons/FontAwesome';
// What's Up
const WhatsupStackMain = StackNavigator(
{
FirstScreen: {
screen: FirstScreen,
},
Movies: {
screen: Movies,
},
},
{
initialRouteName: 'FirstScreen',
}
);
const WhatsupStack = StackNavigator(
{
Main: {
screen: WhatsupStackMain,
},
MenuFags: {
screen: MenuSecondScreen,
},
},
{
mode: 'card',
headerMode: 'none',
}
);
// Fags
const FagsStackMain = StackNavigator(
{
FagsHome: {
screen: FagsHome,
},
Movies: {
screen: Movies,
},
},
{
initialRouteName: 'FagsHome',
}
);
const FagsStack = StackNavigator(
{
Main: {
screen: FagsStackMain,
},
MenuFags: {
screen: MenuSecondScreen,
},
},
{
mode: 'card',
headerMode: 'none',
}
);
// Tags
const TagsStackMain = StackNavigator(
{
ThirdScreen: {
screen: ThirdScreen,
},
Movies: {
screen: Movies,
},
},
{
initialRouteName: 'ThirdScreen',
}
);
const TagsStack = StackNavigator(
{
Main: {
screen: TagsStackMain,
},
MenuFags: {
screen: MenuSecondScreen,
},
},
{
mode: 'card',
headerMode: 'none',
}
);
// Settings
const SettingsStackMain = StackNavigator(
{
FourthScreen: {
screen: FourthScreen,
},
Movies: {
screen: Movies,
},
},
{
initialRouteName: 'FourthScreen',
}
);
const SettingsStack = StackNavigator(
{
Main: {
screen: SettingsStackMain,
},
MenuFags: {
screen: MenuSecondScreen,
},
},
{
mode: 'card',
headerMode: 'none',
}
);
// Profile
const ProfileStackMain = StackNavigator(
{
FifthScreen: {
screen: FifthScreen,
},
Movies: {
screen: Movies,
},
},
{
initialRouteName: 'FifthScreen',
}
);
const ProfileStack = StackNavigator(
{
Main: {
screen: ProfileStackMain,
},
MenuFags: {
screen: MenuSecondScreen,
},
},
{
mode: 'card',
headerMode: 'none',
}
);
// Tabs
export default TabNavigator(
{
'Abcd\'s ef': { screen: WhatsupStack },
Ghij: { screen: FagsStack },
Klmn: { screen: TagsStack },
Settings: { screen: SettingsStack },
Profile: { screen: ProfileStack },
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Abcd\'s ef') {
//iconName = `ios-information-circle${focused ? '' : '-outline'}`;
//return <Icon name={focused ? 'globe' : 'globe'} size={22}
//style={{ color: focused ? '#ff0066' : 'black'}}/>;
return <IconOcticons name={'globe'} size={22} style={{ color: focused ? '#ff0066' : 'black'}}/>;
} else if (routeName === 'Ghij') {
//iconName = `ios-options${focused ? '' : '-outline'}`;
return <IconFontAwesome name={'users'} size={22} style={{ color: focused ? '#ff0066' : 'black'}}/>
} else if (routeName === 'Klmn') {
//iconName = `ios-options${focused ? '' : '-outline'}`;
return <IconFontAwesome name={'heart'} size={22} style={{ color: focused ? '#ff0066' : 'black'}}/>
} else if (routeName === 'Settings') {
//iconName = `ios-options${focused ? '' : '-outline'}`;
return <IconOcticons name={'gear'} size={22} style={{ color: focused ? '#ff0066' : 'black'}}/>
} else if (routeName === 'Profile') {
//iconName = `ios-options${focused ? '' : '-outline'}`;
return <IconFontAwesome name={'user'} size={22} style={{ color: focused ? '#ff0066' : 'black'}}/>
}
// You can return any component that you like here! We usually use an
// icon component from react-native-vector-icons
//return <Ionicons name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: '#ff0066',
inactiveTintColor: 'gray',
showIcon: true,
upperCaseLabel: false,
},
//tabBarComponent: TabBarBottom,
//tabBarPosition: 'bottom',
animationEnabled: true,
swipeEnabled: true,
}
);
</code>
[1]: https://i.stack.imgur.com/0oVwG.png
[2]: https://i.stack.imgur.com/QQhN4.png
[3]: https://i.stack.imgur.com/oFeiG.png
use allowFontScaling:false in tabBarOptions , by adding this font size will not scale on the basis of devices fontSize.
tabBarOptions:{
allowFontScaling:false
}
How to prevent qtip overlaps when mouse hovering on another cells.
The issue is that the qtip is not hidden immediately when mouse left and when the mouse is hovered on another cell, the previous one is also visible.
Code:
$(event.target).qtip({
content: { text: tooltiptext, title: { text: "Info", button: 'Close' } },
show: {
event: 'mouseover',
ready: true
},
hide: {
event: 'mouseout'
},
position: {
my: 'center',
at: 'bottom left',
adjust: {
screen: true
}
},
});
From the Documentation:http://qtip2.com/options#show.solo. You could set show.solo to true(Default false).when set true,only show one tooltip at a time.
Here is an example of what I mean:
http://jsfiddle.net/Andy_wang_ke/fhbnoojd/4/
I hope this helps
I have a MVC Sencha Touch application I'm building and am having some issues getting the TabPanel to function correctly. The issue is this, when I have my PosViewport.js like this, everything works fine:
touch.views.PosViewport = new Ext.extend(Ext.TabPanel, {
initComponent: function () {
console.log("inside initComponent() of PosViewport.js");
touch.views.PosViewport.superclass.initComponent.call(this);
},
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
layout: 'fit',
scroll: 'vertical',
items: [
{
title: 'Reciepts',
iconCls: 'bookmarks',
html: 'one'
},
{
title: 'POS',
iconCls: 'Favorites',
html: 'two'
}
]
});
Here, everything is great! The tab bar shows up on the bottom, it fits perfectly, and I can switch back and forth between the two with no problems.
However, instead of keeping those panels inside my PosViewport.js file, let's move them out to two seperate files:
View1.js:
touch.views.View1 = new Ext.extend(Ext.Panel, {
initComponent: function () {
touch.views.View1.superclass.initComponent.call(this);
},
layout: 'fit',
scroll: 'vertical',
fullscreen : true,
title: 'Reciepts',
iconCls: 'bookmarks',
html: 'panel one'
});
and View2.js:
touch.views.View2 = new Ext.extend(Ext.Panel, {
initComponent: function () {
touch.views.View2.superclass.initComponent.call(this);
},
layout: 'fit',
scroll: 'vertical',
fullscreen : true,
title: '2',
iconCls: 'bookmarks',
html: 'panel two'
});
I add both new views to my index.html. Now, I update my PosViewport.js to point to the new views:
touch.views.PosViewport = new Ext.extend(Ext.TabPanel, {
initComponent: function () {
console.log("inside initComponent() of PosViewport.js");
touch.views.PosViewport.superclass.initComponent.call(this);
},
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
layout: 'fit',
scroll: 'vertical',
items: [ touch.views.View1, touch.views.View2]
});
And it all goes to hell. The Bottom Tab Bar is not visible, as only a tiny piece of the top is visible on the page. The panels do not show up at all, I cannot see their HTML content at all.
What is going on here? I have absolutely no idea why it is behaving like this. Any pointers in the right direction are much appreciated, thank you!
In the second case you created two classes by this:
touch.views.View2 = new Ext.extend(Ext.Panel, { // Class definition
whereas you needed two instances of these panels. So, add the items like this:
items: [new touch.views.View1(), new touch.views.View2()] // Panel instance
This should work now. And remove the fullscreen:true option from these panels. fullscreen means, it will make the panels take whole viewport area.