I'm using react navigation V3 and i want to use swipe in my bottomTabNavigator.
i can't do it because createBottomTabNavigator don't support it any yet and createBottomNavigator is actually deprecated.
It is very annoying because in react navigation V2 we can do iteasily.
Just createMaterialTopTabNavigator support swipe but i want a bottom navigator and not a top one
If you take a look at the documentation for createMaterialTopTabNavigator you can see that in the TabNavigatorConfig there is the ability to set the position of the tab bar using tabBarPosition
Position of the tab bar, can be 'top' or 'bottom', default is top
So if you use createMaterialTopTabNavigator instead of createMaterialBottomTabNavigator and set tabBarPosition: 'bottom' in your config you should get a createMaterialTopTabNavigator but at the bottom.
Here is what it should look like in code
import Screen1 from './Screen1';
import Screen2 from './Screen2';
import { createMaterialTopTabNavigator, createAppContainer } from 'react-navigation';
const screens = {
Screen1: {
screen: Screen1
},
Screen2: {
screen: Screen2
}
}
const config = {
headerMode: 'none',
initialRouteName: 'Screen1',
tabBarPosition: 'bottom' // <- add this line to your config
}
const MainNavigator = createMaterialTopTabNavigator(screens,config);
export default createAppContainer(MainNavigator);
Here is a snack showing it working https://snack.expo.io/#andypandy/materialtopnavigator-at-the-bottom
Related
First, change the theme of IOS to the light, access the app, and look at the header, and there is a border bottom style in the header.
However, if you change the theme to dark and look at the header, there is no border bottom.
IOS Dark Mode
IOS Light Mode
Is navigation related to the theme of the device?
Example from #react-navigation documentation
Using the operating system preferences​
On iOS 13+ and Android 10+, you can get user's preferred color scheme ('dark' or 'light') with the (Appearance API).
Try this example on Snack
import { useColorScheme } from 'react-native';
import {
NavigationContainer,
DefaultTheme,
DarkTheme,
} from '#react-navigation/native';
export default () => {
const scheme = useColorScheme();
return (
<NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
{/* content */}
</NavigationContainer>
);
};
React navigation createMaterialTopTabNavigator shows a pretty cool setup at the top of their documentation page:
Notice that the top navigator stack seems to be inside a screen. There is a title at the top "Material Top Tabs" and we can go back to "Examples"
Funny enough, this setup is not given in any of the examples.
I would like to have the same setup and be able to navigate to a specific tab from another screen.
Could someone please share an example code for it?
What I currently have is a basic bottom tab navigation with a
<BottomTab.Screen
name="Tabs"
component={TabsNavigator}
/>
and then
function TabsNavigator() {
const MyTabs = createMaterialTopTabNavigator();
return (
<MyTabs.Navigator
<MyTabs.Screen name="Upcoming" component={TabsUpcomingScreen} />
<MyTabs.Screen name="Past" component={TabsPastScreen} />
</MyTabs.Navigator>
);
}
Although this works when doing navigation.navigate('Tabs', { screen: 'Upcoming' });, I am missing the screen containing the tabs... or the "Tabs" screen (as in the example, it is the "Material Top Tabs" screen)
I could do something like this:
function TabsNavigator() {
const TabsStack = createStackNavigator();
return (
<TabsStack.Navigator>
<TabsStack.Screen name="Tabs" component={TabsScreen} options={{ headerTitle: 'Tabs' }} />
</TabsStack.Navigator>
);
}
function TabsScreen() {
const MyTabs = createMaterialTopTabNavigator();
return (
<MyTabs.Navigator
<MyTabs.Screen name="Upcoming" component={TabsUpcomingScreen} />
<MyTabs.Screen name="Past" component={TabsPastScreen} />
</MyTabs.Navigator>
);
}
But then I am unable to navigate to a specific tab with navigation.navigate('Tabs', { screen: 'Upcoming' });
If you want to navigate to some tab inside of createMaterialTopTabNavigator.Instead of navigation.navigate('Tabs', { screen: 'Upcoming' }) use navigation.jumpTo('Tabs', { name: 'Upcoming' });
https://reactnavigation.org/docs/material-top-tab-navigator#jumpto
react-navigation: 3.2.1
I've create TopTabNavigator (using createMaterialTopTabNavigator) inside a Drawer (using createDrawerNavigator).
Swiping navigates between tabs but the first time I swipe from the direction of the drawer - the drawer will be the only thing that will open / close.
swiping between the tabs is stopped (click the buttons in the bar still works).
What can cause that?
const MainTab = createMaterialTopTabNavigator ({
Tab1: {
screen: Tab1Screen,
},
Tab2: {
screen: Tab2Screen,
},
});
const DrawerNav = createDrawerNavigator(
Main: {
screen: MainTab,
}
);
Adding link for Expo - but unfortunately there is a bug when using createDrawerNavigation inside expo.snack.io
I am using angularjs-dragula and I am not able to auto scroll to the overflow container that is hidden from the screen.
This is my issue:
I have five containers in my dragula and the 5th container is hidden from the screen. Now I want to drag an element from the first container and drop it in the 5th container. But I am not able to do this, since the screen is not auto scrolling to the 5th container.
Does angularjs-dragula support vertical scrolling? or is there a property that I'm missing?
Example Plunkr : https://plnkr.co/edit/iD38MugmHIx298p7OlrI?p=preview
var app = angular.module('angular-dragula-demo', [angularDragula(angular)]);
app.controller('MainCtrl', function($scope, dragulaService) {
dragulaService.options($scope, 'fifth-bag', {
copy: true
});
});
It seems like this option is not implemented in Dragula. Dragula's developer suggests to use the module dom-autoscroller.
See this issue on Github: https://github.com/bevacqua/dragula/issues/121
To implement this functionality with AngularJS:
1) Download dom-autoscroller from the official repo: https://github.com/hollowdoor/dom_autoscroller/blob/master/dist/dom-autoscroller.min.js
2) Include it in your project folder
3) Enable autoscroll in your controller:
// ENABLE AUTOSCROLL FOR GOALS LIST
var scroll = autoScroll([
document.querySelector('.list')
], {
margin: 30,
maxSpeed: 10,
scrollWhenOutside: true,
autoScroll: function () {
//Only scroll when the pointer is down
return this.down
}
});
Im going to MVC route with Sencha. I have a Viewport panel initialized much like the twitter example:
/**
* #author Jeff Blake
*/
Ext.regApplication('App', {
defaultTarget: 'viewport',
defaultUrl : 'Viewport/index',
name : 'App',
icon : "mobile/public/resources/images/icon.png",
phoneStartupScreen : "mobile/public/resources/images/phone_startup.png",
//useHistory : false,
//useLoadMask : true,
launch: function() {
Ext.Viewport.init();
Ext.Viewport.onOrientationChange();
this.viewport = new App.Viewport({
application: this
});
Ext.dispatch({
controller: 'User',
action : 'index'
});
}
});
/**
* #class App.Viewport
* #extends Ext.Panel
* This is a default generated class which would usually be used to initialize your application's
* main viewport. By default this is simply a welcome screen that tells you that the app was
* generated correctly.
*/
App.Viewport = Ext.extend(Ext.Panel, {
id : 'viewport',
layout : 'card',
fullscreen: true,
cardSwitchAnimation: 'slide',
initComponent: function() {
Ext.apply(this, {
dockedItems: [
{
// Top Bar
dock : 'top',
xtype : 'toolbar',
title : 'Whats Good',
items: [
{
text: 'About'
},
]
}
]
});
App.Viewport.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('App.Viewport', App.Viewport);
New Code:
if (!App.viewport.getDockedComponent(homeBar)) {
var homeBar = new App.HomeBar();
App.viewport.addDocked(homeBar);
}
I want to be able to conditionally apply DockedItems (toolbars) based on which Type of panel is currently rendered in the Viewport. EG: one for Login, Home screen, detail screen, etc.
I've tried using Ext.apply(App.Viewport, { dockedItems: [App.LoginBar]});
But that doesn't work. Currently it works to add the toolbar to the currently rendered Panel and setting it to fullscreen, but unfortunately transitions and things behave weirdly as the structure is
Panel
Toolbar
Panel
Toolbar
/end Panel
/end Panel
Does anyone have a suggestion?
To programmatically add a docked item, I would recommend using
viewport.addDocked(loginBar);
Methods like this are far better than trying to update the original configuration of the component.
Then there is also a .removeDocked() method to take it off again.
Also make sure you are dealing with instances of the components, not trying to update their class.
To get the reference to your application's viewport, you can come in through the 'App' namespace, which is automatically created by the name property of the regApplication config.
So you could make your toolbar button do this for example:
{
text: 'About',
handler: function() {
App.viewport.getDockedItems()[0].setTitle('Pressed!');
}
},
Which would make the title change when you press the button.
But now I better understand what it is you are trying to do, I recommend you don't dock a single, dynamically-changed toolbar to the outer viewport, but add individual toolbars to each of the (card) panels in it. That way they get to slide nicely too ;-)