I want to take down the page with the swipe button using native-stack-navigator and transparentModal. (the button in the first picture). But gesture event does not work on transparentModal.
Using the presentation modal doesn't work for me. I need to use Fullscreen. When I use presentation card, the problem in the second picture occurs. (left top and right top white)
options: {
headerMode: 'none',
presentation: 'transparentModal',
animation: 'slide_from_bottom',
gestureDirection: 'vertical',
obscureBackground: true,
gestureEnabled: true,
fullScreenGestureEnabled: true,
}
Related
I have a component that when scrolling a button remains at the same height as the header, that header has headerBackTitleVisible: true, and when pressing those buttons in that position, they do not work.
I have tried with headerMode to float or to screen but I still can't find the solution
In my react native project, I want bottom tabBar to be shown on screen, as you scroll upwards with your finger, say 200 offset y, the tabBar hides with animation, and when you scroll down, again, say 200 offset y, it shows the tabBar again.
I am using createBottomTabNavigator. I am able to show/hide bottom bar without animation.
I have tried
https://github.com/react-navigation/react-navigation/issues/888#issuecomment-299600368
https://github.com/react-navigation/react-navigation/issues/958
Below is my code
navigationOptions: ({ navigation }) => {
const params = navigation.state.params;
return {
tabBarVisible: params && params.tabBarVisible,
animationEnabled: true,
}
},
How can I animate the bottom bar as user scrolls the list?
Thanks in advance.
If you want a bottom navigation with animation, you can use the createMaterialTopTabNavigator and simply set the tabBarPosition.
For detail information about createMaterialTopTabNavigator
I am using sideNav of MaterializeCSS in my application. I do not want to close sideNav while clicking outside. It can be achievable in modals like this:
{ dismissible: false }
How to do this in sideNav?
MaterializeCSS doesn't have a built-in method for achieve this task, but you can use a workaround, unbinding the click event from sideNav overlay:
$(function(){
$(".button-collapse").sideNav();
$(".drag-target").unbind('click');
$("#sidenav-overlay").unbind('click');
});
Update:
As of late, you can modify options of the sidenav by doing the following
$(".button-collapse").sideNav({
menuWidth: 300, // Default is 300
edge: 'left', // Choose the horizontal origin
closeOnClick: false, // clicking outside of the nav will not close it
draggable: true, // Choose whether you can drag to open on touch screens,
onOpen: function(el) { }, // A function to be called when sideNav is opened
onClose: function(el) { }, // A function to be called when sideNav is closed
});
});
you can take a look here to learn more: http://materializecss.com/side-nav.html
I'm use carouFredSel plugin for responsive carousel.
When scroll bottom (on mobile), browser address bar pannel will hide, slider update height and jump to top. And when scroll to top, browser address bar pannel will show and slider update sizes and jump to top too. How fix it?
I call callback 'updateSizes' some times and carousel calculate mobile browser url bar height) only when scroll top, and only when scroll bottom after this bar hide
$('.container').carouFredSel({
auto: false,
circular: false,
infinite: false,
responsive: true,
width: '100%',
height: 'variable',
items: {
visible: 1,
start: 1,
height: 'variable',
},
});
Here is a solution:
$(window).scroll(function () {
$("body").attr("height",$(document).scrollTop());
});
$(window).on("resize", function(e){
e.preventDefault();
$(document).scrollTop($("body").attr("height"))
});
When pushing new View, this view slides from left to right. But Navigation View elements (title, buttons) slide from right to left.
I'd like to achieve same effect as pressed Back button has.
Here is the code I'm using for sliding the Views:
navigationView.animateActiveItem(view, {
type: 'slide',
direction: 'right'
});
navigationView.push(view);
Thanks for help in advance.
You need to set the animation you want to use direction on the Ext.navigation.View:
Ext.create('Ext.navigation.View', {
fullscreen : true,
layout: {
type: 'card',
animation: {
type: 'slide',
direction: 'right'
}
}
});
Demo
Hope this helps