When the user hits a tab on a bottom nav bar while already on the screen I'd want to bring the user back to the top of the screen. Anyone know how I can do that using react-native-navigation?
Figured it out.
Add this to the page you want to be scrolled up.
constructor(props) {
super(props);
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
}
If you want more info on setting navigator events then you can check out:
https://wix.github.io/react-native-navigation/#/screen-api?id=listening-to-tab-selected-events
And then add this function:
onNavigatorEvent(event) {
if (event.id === 'bottomTabSelected') {
console.log('Tab selected!');
}
if (event.id === 'bottomTabReselected') {
console.log('Tab reselected!');
this.refs._scrollView.scrollTo({x: 0, y: 0, animated: true});
}
}
and add this to your ScrollView:
ref='_scrollView'
Thanks to this:
https://github.com/wix/react-native-navigation/issues/1719
Related
I have an element in my HTML and it has some HTML inside it. I am converting that to noUISlider at the click of a button (Start Slider). There is another button to hide the slider (Hide Slider). I want to hide the slider but keep the and also the HTML inside it. I am trying the slider.nouislider.destroy(); but it deletes the element completely.
Any help on this is appreciated.
Thank you.
Suhas
Okay, this is what I did and it worked for me. Hopefully, it could be helpful to someone or if there is a better way to do this, please let me know.
My HTML is
<div class="sliderContainer" id="slider">some HTML code</div>
And My JS code is
var sliderActive = false;
function createSlider() {
if (!sliderActive) {
sliderActive = true;
noUiSlider.create(slider, {
start: [360, 1080],
connect: true,
step: 15,
behaviour: 'drag',
tooltips: [
{
to: function (value) {
return processValue(value);
},
from: function (value) {
return processValue(value);
}
},
{
to: function (value) {
return processValue(value);
},
from: function (value) {
return processValue(value);
}
},
],
range: {
'min': 0,
'max': 1440,
}
});
}
}
function destroySlider() {
sliderActive = false;
$('.sliderContainer').attr('class', 'sliderContainer');
$('.noUi-base').remove();
delete slider.noUiSlider;
slider = document.getElementById('slider');
}
Thank you.
I'm trying to use lodash's debounce method to to toggle a boolean located in the state 500ms after the scroll occured.
I've look for responses on SO but none of these helped me to fix this. This seems fairly simple so there's probably something that I didn't get.
The state is:
constructor(props) {
super(props);
this.state = {
isScrolling: false
}
}
The componentDidMount part is:
componentDidMount(){
window.addEventListener('scroll', this.handleScroll, true);
window.addEventListener('scroll', _.debounce(() => {
this.setState({
isScrolling: false
})
}, 500))
}
The scroll function is:
handleScroll = (event) => {
this.setState({
isScrolling: true
})
};
In my rect chrome dev. tools, I see that isScrolling is toggling to true when I start scrolling but the debounce method does not toggle it back to false again. What am I doing wrong?
EDIT - My code was correct but this bit of css code was preventing the correct behavior to happen:
html, body {
height:100%;
}
I have a topBar with a button that toggles the Side Menu.
I have registered a navigationButtonPressed action as below
navigationButtonPressed({ buttonId }) {
switch (buttonId) {
case 'sideMenuButtonId':
Navigation.mergeOptions(this.props.componentId, {
sideMenu: {
left: {
visible: true
}
}
});
break
default:
break
}
}
But in this case, the button only makes the sideMenu visible, and Im trying to use it so it toggles the menu open and closed.
So i replaced the above with a variable approach seen below..
var sideMenuVisible = false
navigationButtonPressed({ buttonId }) {
switch (buttonId) {
case 'sideMenuButtonId':
sideMenuVisible = !sideMenuVisible
Navigation.mergeOptions(this.props.componentId, {
sideMenu: {
left: {
visible: sideMenuVisible
}
}
});
break
default:
break
}
}
Which works fine if the user only uses the button to open and closed the sideMenu, but the user can also open/close the menu by swiping to open the menu as well as tapping out the menu to close it.
Is there a way to check the visibility of the sideMenu so I can properly use an action to open/close the menu on command?
It can done much more simple.
Think you should create it as a state, because the component have to know, it should be rerendered, when the state change.
So something like
state = { isOpen: false };
toggleSidebar = () => {
this.setState({ isOpen: !isOpen })
}
And now, you should call the toggleSidebar function when you click the button
I am using ZingChart for a standard bar graph. I have the selected state for individual bars working as I would like but for one thing. Is there a way to show the value box (set to visible:false globally) to show just for the selected node when it is clicked/selected? I was able to make the value box for every node show in a click event I added to call an outside function using the modifyplot method but I don't see a similar method for nodes such as modifynode. If this is not an option, is there any way to insert a "fake" value box the markup of which would be created on the fly during the click event and have that element show above the selected node? Below is my render code for the chart in question. Thanks for your time!
zingchart.render({
id: "vsSelfChartDiv",
width: '100%',
height: '100%',
output: 'svg',
data: myChartVsSelf,
events:{
node_click:function(p){
zingchart.exec('vsSelfChartDiv', 'modifyplot', {
graphid : 0,
plotindex : p.plotindex,
nodeindex : p.nodeindex,
data : {
"value-box":{
"visible":true
}
}
});
var indexThis = p.nodeindex;
var indexDateVal = $('#vsSelfChartDiv-graph-id0-scale_x-item_'+indexThis).find('tspan').html();
updateTop(indexDateVal);
}
}
});
You'd probably be better off using a label instead of a value-box. I've put together a demo here.
I'm on the ZingChart team. Feel free to hit me up if you have any more questions.
// Set up your data
var myChart = {
"type":"line",
"title":{
"text":"Average Metric"
},
// The label below will be your 'value-box'
"labels":[
{
// This id allows you to access it via the API
"id":"label1",
"text":"",
// The hook describes where it attaches
"hook":"node:plot=0;index=2",
"border-width":1,
"background-color":"white",
"callout":1,
"offset-y":"-30%",
// Hide it to start
"visible":false,
"font-size":"14px",
"padding":"5px"
}
],
// Tooltips are turned off so we don't have
// hover info boxes and click info boxes
"tooltip":{
"visible":false
},
"series":[
{
"values":[69,68,54,48,70,74,98,70,72,68,49,69]
}
]
};
// Render the chart
zingchart.render({
id:"myChart",
data:myChart
});
// Bind your events
// Shows label and sets it to the plotindex and nodeindex
// of the clicked node
zingchart.bind("myChart","node_click",function(p){
zingchart.exec("myChart","updateobject", {
"type":"label",
"data":{
"id":"label1",
"text":p.value,
"hook":"node:plot="+p.plotindex+";index="+p.nodeindex,
"visible":true
}
});
});
// Hides callout label when click is not on a node
zingchart.bind("myChart","click",function(p){
if (p.target != 'node') {
zingchart.exec("myChart","updateobject", {
"type":"label",
"data":{
"id":"label1",
"visible":false
}
});
}
});
<script src='http://cdn.zingchart.com/zingchart.min.js'></script>
<div id="myChart" style="width:100%;height:300px;"></div>
I'm really struggling to get the same header effect of this website http://demo.qodeinteractive.com/bridge13/.
I'm using Wordpress plugin myStickymenu but the results is not what I'm looking for and want to use jquery instead but I have no idea how to do it.
You need to check the 'scroll' event to get the scroll position. If the scroll position is below the height of the header, add a class. The class that gets added will have a different height value which will overwrite the default value.
function init() {
// Check scroll event
window.addEventListener('scroll', function(e){
// Check scroll position
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector("header");
// If the scroll position is a larger value than the chosen value (shrinkOn)
if (distanceY > shrinkOn) {
// Add class "smaller"
classie.add(header,"smaller");
} else {
// Otherwise remove it
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();
Source: http://callmenick.com/2014/02/18/create-an-animated-resizing-header-on-scroll/