While navigating to different screens from side menu, I hid the side menu using following code:
Navigation.mergeOptions('Drawer', {
sideMenu: {
left: {
visible: false,
}
}
});
The problem using this approach was change in behavior of swipe gesture. While using gesture to open the menu, it would appear for a instance and close itself. And swipe gesture would only work properly after your click the menu button.
closeSideMenu = ( ) => {
/*For android devices*/
if (Platform.OS === 'android') {
/*disable swipe gesture*/
Navigation.mergeOptions("navigation.playground.menu", {
sideMenu: {
left: {
enabled: false,
},
},
});
/*enable swipe gesture*/
Navigation.mergeOptions("navigation.playground.menu", {
sideMenu: {
left: {
enabled: true,
},
},
});
} else {
/*for iOs devices*/
Navigation.mergeOptions("navigation.playground.menu", {
sideMenu: {
left: {
visible: false,
},
},
});
}
};
Related
I am using react-native-navigation v2 from Wix, trying to push a screen to an existing stack. Here is my push code:
Navigation.push(this.props.componentId, {
component: {
name: 'chapel.search'
}
})
And my options object
static options (passProps) {
console.log('Firing static method')
return {
component: {
name: 'chapel.search',
topBar: {
visible: true,
leftButtons: [
{
id: 'back',
testID: 'back',
icon: require('../../Images/back.png')
}
],
title: {
component: {
name: 'chapel.navtitle',
alignment: 'center',
passProps: { text: 'Search' }
}
},
rightButtons: []
}
}
}
}
I never see the log statement and the topbar options do not change. Should they?
When I use Navigation.mergeOptions with the above options object in the constructor of my target screen, the options appear, so this is what I am using for now.
Using android, have not tested with iOS as yet. Will update when I do.
I'm originating static options like this in my component:
static get options() {
return {
...
}
}
And when i push from another screen and want to override some defaults, i do it like below:
Navigation.push(this.props.componentId, {
component: {
name: 'chapel.search',
passProps: {
myProp: myprop1
},
options: {
topBar: {
title: {
text: newTitleOverridingStaticOne
}
}
}
}
});
I don't know if static options (passProps){...} is valid, but you can try like i show above to check if it is resolved
With react-native-navigation v1 you can set up a drawer like this:
drawer: {
left: {
screen: 'ScreenName'
}
}
In docs of react-native-navigation they mention that drawer is still supported,
but there in no example of its usage. I tried with same way as in v1, but it didn't work. Is there anyone who has achieved it somehow?
In RNN V2 and up you can add Drawer with simply using sideMenu instead of old drawer option Ex :
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
sideMenu: {
id: "sideMenu",
left: {
component: {
id: "Drawer",
name: "navigation.Drawer"
}
},
center: {
stack: {
id: "AppRoot",
children: [{
component: {
id: "App",
name: "navigation.AppScreen"
}
}]
}
}
}
}
});
}
Take a look at this and navigate to sideMenu
and in order to close the drawer use Navigation.mergeOptions and pass visible false like this
<Button onPress={this.hideSideMenu}/>
hideSideMenu() {
Navigation.mergeOptions(this.props.componentId, {
sideMenu: {
left: {
visible: false
}
}
});
}
I'm currently trying to upgrade to react-native-navigation V2 from V1 and got stuck trying to find a way to toggle side menus on top bar button press.
My app starts with
Navigation.setRoot({
root: {
sideMenu: {
left: {
component: {
name: 'testApp.SideDrawer',
passProps: {
text: 'This is a left side menu screen'
}
}
},
center: {
bottomTabs: {
...
}
},
},
},
});
Is there a way to do it in current version?
Turned out you can't use this.props.navigator.toggleDrawer in V2 and should use Navigator.mergeOptions instead to change drawer visibility.
In my case:
1) First assign an Id to the drawer (id: leftSideDrawer)
Navigation.setRoot({
root: {
sideMenu: {
left: {
component: {
name: 'testApp.SideDrawer',
id: 'leftSideDrawer'
}
},
center: {
bottomTabs: {
...
}
},
},
},
});
2) Use it in to change drawer visibility
Navigation.mergeOptions('leftSideDrawer', {
sideMenu: {
left: {
visible: true
}
}
});
You can set a boolean in your component to identify the current state of the side drawer screen and then you can use that boolean to set the visibility of the drawer with mergeOptions. Basically toggle! Below is the snippet to achieve this.
constructor(props) {
super(props);
this.isSideDrawerVisible = false;
Navigation.events().bindComponent(this);
}
navigationButtonPressed({ buttonId }) {
if (buttonId === "openSideDrawer") {
(!this.isSideDrawerVisible) ? this.isSideDrawerVisible = true : this.isSideDrawerVisible = false
Navigation.mergeOptions(this.props.componentId, {
sideMenu: {
left: {
visible: this.isSideDrawerVisible,
}
}
});
}
}
I have to track event when turn on the video(click on big button).
I show result about "tech-click" but it's not click on the big button.
player = amp(randomId, <any>{
techOrder: ["azureHtml5JS", "flashSS", "html5FairPlayHLS", "silverlightSS", "html5"],
"nativeControlsForTouch": false,
"logo": { "enabled": false },
controls: true,
width: attrs.width,
height: attrs.height,
autoplay: scope.autoplay,
poster
});
player.addEventListener("tech-click", () => {
appInsights.trackEvent("homeVideo");
});
document.getElementsByClassName("vjs-big-play-button[0]
.addEventListener("click", () => {
appInsights.trackEvent("homeVideo");
});
I have a jTable with a child table for each row. On the toolbar header of the child table I have added a custom toolbar item. I want to make that toolbar item dynamic in the sense that if there are already some rows I do not want it to show. I came across a very similar query for the main toolbar "add new" button which added a function to run on recordsLoaded:
Below is my first attempt - it is just the field entry for the main table that specifies the child table. However the ".find(....)" spec will not work in my case as mine is a custom toolbar item. What do I need to put as the .find criteria?
Thanks
Dance: {
title: '',
width: '4%',
sorting: false,
create: false,
listClass: 'centreCol',
display: function(book) {
var $img = $('<img src="Images/layers.png" title="Show associated dance entries" />');
//Open child table when user clicks the image
$img.click(function() {
var thisrow = $img.closest('tr'); //Parent row
if($('#BookTableContainer').jtable('isChildRowOpen',thisrow)) { // Clicking image a second time closes the child row
$('#BookTableContainer').jtable('closeChildRow',thisrow);
} else {
currentTitleID = book.record.DanceTitleID;
$('#BookTableContainer').jtable(
'openChildTable',
thisrow,
{
title: 'Related Dance',
toolbar: {
items: [
{
icon: 'Images/add.png',
text: 'New dance',
tooltip: 'Add dance details',
click: function() { CreateDanceDialog(); }
}
]
},
actions: {
listAction: 'BookPageData.php?action=listChildDances&DanceTitleID=' + currentTitleID,
// createAction: 'dancesData.php?action=createAssignment',
// deleteAction: 'dancesData.php?action=deleteAssignment'
},
recordsLoaded: function(event, data) {
var rowCount = data.records.length;
if (rowCount>0){
$('#BookTableContainer').find('.jtable-toolbar-item.jtable-toolbar-item-add-record').remove();
}
},
fields: {
DanceID: { key: true, create: false, edit: false, list: false, visibility: 'hidden' },
DanceTitleID: { type: 'hidden', defaultValue: currentTitleID },
ChoreographerID: { title: 'Choreographer', width: '40%', options: function() { return ChoreographerOptions; } },
FormationID: { title: 'Formation', width: '30%', options: function() { return FormationOptions; } },
GenreID: { title: 'Genre', width: '30%', options: function() { return GenreOptions; } }
}
},
function(data) { data.childTable.jtable('load'); }
);
}
});
//Return image to show on the person row
return $img;
}
},
Try this
$('#BookTableContainer').find('.jtable-toolbar').remove();