Related
How to set image as background on react-navigation drawer menu?
I'm using expo, with react navigation ^4.0.10
The menu should contain a png image as a BackgroundImage, (FullScreen)
Use Custom Drawer Component in react-navigation.Check the example of custom drawer component in react-navigation here
const DrawerNavigatorExample = createDrawerNavigator(
{
//Drawer Optons and indexing
NavScreen1: {
screen: FirstActivity_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 1',
},
},
NavScreen2: {
screen: Screen2_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 2',
},
},
NavScreen3: {
screen: Screen3_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 3',
},
},
},
{
//For the Custom sidebar menu we have to provide our CustomSidebarMenu
contentComponent: CustomSidebarMenu,
//Sidebar width
drawerWidth: Dimensions.get('window').width - 130,
}
);
const CustomSidebarMenu=()=><ImageBackground source={{uri:'imgbg'}}><Text>Drawer</Text></ImageBackground>
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
}
I have a quite simple mobile app I want to build with Sencha Touch 2. I have quite a lot of experience with ExtJs, but not really with their MVC architecture. What I want to achieve is :
first a main screen with toolbar and some icons rendered in the middle which are to be used to navigate across the app functionality.
clicking one of the icons should switch to a screen with a scrollable list.
What I'm struggling with is the proper place to define the views, and controllers. As well as should for example the main screen use a controller ? Should I create a viewport manually or not ?
What I have right now, which is not rendering anything apart of the toolbar :
app.js
Ext.application({
name: 'SG',
views: [
'Main',
'MainScreen'
],
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('SG.view.Main'));
}
})
Main.js
Ext.define('SG.view.Main', {
extend: 'Ext.Container',
requires: [
'Ext.TitleBar',
'ShopGun.view.MainScreen'
],
config: {
layout : 'fit',
items: [
{
title: 'Welcome',
iconCls: 'home',
position: 'top',
scrollable: true,
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'SG Alpha 1'
}
Ext.create('SG.view.MainScreen', {
docked: 'bottom'
})
]
}
]
}
});
MainScreen.js
Ext.define('SG.view.MainScreen', {
extend: 'Ext.Container',
xtype: 'mainScreen',
initialize : function(){
Ext.define("MenuIcon", {
extend: "Ext.data.Model",
config: {
fields: [
{name: "Name", type: "string"},
{name: "Icon", type: "string"}
]
}
});
this.store = Ext.create('Ext.data.Store', {
model: 'MenuIcon',
data: [
{
Name: "A",
Icon: "a.png"
},
{
Name: "B",
Icon: "b.png"
}
]
});
this.html = 'foo';
this.callParent(arguments);
}
});
And finally an image of what I'd like to get :
EDIT:
A senchafiddle demo here : http://www.senchafiddle.com/#jSqtV (which is not rendering at all but doesn't throw any errors).
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.