I'm trying to use the library react-native-navigation v2, i need some help I'm stuck with the side menu, i can't make it work...
I initialized my layout like this :
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"
}
}
]
}
}
}
}
});
});
With Components registered before, and in the Drawer component I want that when the user click on the item, it will trigger the goToScreen2(),
I tried :
Navigation.setStackRoot(this.props.componentId, {...}
Navigation.mergeOptions(this.props.componentId, {...}
Navigation.push(this.props.componentId, {...}
But, none works... someone can explain how can i make it works ?
Thanks.
You should add all the components that you want to navigate to from side menu in the center of your root stack as the following:
center: {
stack: {
id: "AppRoot",
children: [{
component: {
id: "anyID",
name: "Screen2"
}
}]
}
}
Related
I'm using Wix's react-native-navigation V3. I'd need to know if there's a way to call a function whenever Navigation.pop() is finished executing.
My specific case scenario is as follows.
I have 3 stack tab buttons, where I can push a new screen and pop back.
All works fine, except for the case that, from that pushed screen, I'd need to go to a different tab. If I mergeOptions directly to change currentTabIndex, the bottomTabs will disappear. Found out that I have to first, pop() and then mergeOptions.
Is there a way to accomplish this? When I run both in the same function, only pop() is triggered, I need to add some sync to this.
This is my current stack structure:
const startTabs = () => {
Navigation.setRoot({
root: {
bottomTabs: {
animate: true,
visible: false,
drawBehind: true,
elevation: 8,
waitForRender: true,
children: [
{
stack: {
id: 'MainTabStack',
children: [
{
component: {
id: 'MainTab',
name: 'app.MainTab'
}
}
],
options: {
bottomTab: {
text: i18n.t('home'),
icon: iconsMap['home-light'],
selectedIcon: iconsMap['home-solid'],
...navigatorStyle
}
}
}
},
{
stack: {
id: 'MyProfileTabStack',
children: [
{
component: {
id: 'MyProfileTab',
name: 'app.MyProfileTab'
}
}
],
options: {
bottomTab: {
text: i18n.t('myProfile'),
icon: iconsMap['user-light'],
selectedIcon: iconsMap['user-solid'],
...navigatorStyle
}
}
}
},
{
stack: {
id: 'MessageTabStack',
children: [
{
component: {
id: 'MessageScreen',
name: 'app.MessageScreen'
}
}
],
options: {
bottomTab: {
text: i18n.t('messages'),
icon: iconsMap['message-light'],
selectedIcon: iconsMap['message-solid'],
badgeColor: 'red',
...navigatorStyle
}
}
}
}
]
}
}
});
}
So I start from MainTab, then I push a new screen from this MainTab. Let's name it SingleViewScreen. When I'm done doing some stuff in SingleViewScreen, by an onPress function I need to pop() this current screen and go directly to MessageScreen.
Any ideas? Am I doing something wrong? Thanks.
You can use registerCommandCompletedListener
Invoked when a command (i.e push, pop, showModal etc) finishes executing in native. If the command contains animations, for example pushed screen animation, the listener is invoked after the animation ends.
Try this
// Subscribe
const commandCompletedListener = Navigation.events().registerCommandCompletedListener(({ commandId, completionTime, params }) => {
});
...
// Unsubscribe
commandCompletedListener.remove();
I am new to react-native. i want to add side menu icon like the following image
in wix-react-native-navigation v1 was fairly simple. We need to just add
{
tabs:[
screen: "myscreenName",
label: "MyLabel",
icon: require('icon-url')
]
}
But in V2 documentation they said if you add to side menu use this but they didn't say about how to add icon.
{
root: {
sideMenu: {
left: {
component: {
name: 'sideDrawer'
}
},
center: {
bottomTabs: {
.....
}
}
}
}
}
As a result a side drawer is appear if i dragged from left side but the icon is missing.
Any idea ho do i add a icon like this on wix-react-native-navigation v2
You can check this link
https://github.com/wix/react-native-navigation/issues/796
The hamburger button is no longer added by default since a lot of
users asked to control when it's displayed and when not. In every
screen you'd like to have the hamburger button, add it explicitly:
static navigatorButtons = { leftButtons: [
{
id: 'sideMenu'
} ] };
You can add this static function with different configs in your screen:
export default class Screen extends Component {
static get options() {
return {
topBar: {
title: {
text: 'Screen',
},
leftButtons: [
{
icon: require('../../../assets/icons/burgerMenu.png'),
id: 'toggleDrawer',
},
],
},
};
}
}
The complete list of options can be found in the docs in this link: topBar options
You can try the below code. This creates a tab based screen. If you want as screen, you can use Navigation.startSingleScreenApp(...)
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"
}
}]
}
}
}
}
});
}
I have root screen that contains 4 bottoms tabs implemented using react-native-navigation, for one of my bottomtab having sub tabs(topTabs) so now how can I navigate to next screen from the current screen.(note: the next screen is not a registered screen in root)
please anyone help me
here is my root navigation
export const startNavigation = () => {
Navigation.setRoot({
root: {
sideMenu: {
left: {
component: {
name: screenName.DRAWER
}
},
center: {
bottomTabs: {
children: [{
stack: {
children: [{
component: {
name: screenName.Sample1
}
}],
options: {
bottomTab: {
text: 'Sample1',
}
}
}
}, {
stack: {
children: [{
component: {
name: screenName.HOME
}
}],
options: {
bottomTab: {
text: 'Home',
selectedTextColor: 'red'
}
}
}
}],
options: {
bottomTabs: {
currentTabIndex: 1
}
}
}
}
}
}
})
}
from this root, how I will navigate to sub tabs or sunscreens
Have you tried anything? can you post some code?
if you are getting started, here is the official documentation from React Native
https://wix.github.io/react-native-navigation/#/docs/Usage
I'm trying to call Navigate.push from sideMenu but nothing happens.
Navigation.setRoot({
root: {
sideMenu: {
left: {
component: {
name: 'app.SideMenu',
},
children: [
{
stack: {
children: [
{
component: {
name: TERMS_SCREEN.id,
}
},
]
}
}
]
},
center: {
bottomTabs: {
id: 'BottomTabsId',
options: {
topbar: {
visible: true,
}
},
children: [
{
stack: {
id: 'Tabs',
children: [
{
..and I'm trying to push a screen in sideMenu like this
console.log(this.props.componentId);
Navigation.push(this.props.componentId, {
component: {
name: 'app.Terms',
}
})
I am getting the log but nothing happens. I'm positive that I need to do something with my layout but I don't see an example or explanation in docs.
There's something wrong with how you structure the components in the menu. The issue is that you must have a stack to be able to push other screens, and from what it looks - this is not the case for your side menu screen.
This is how you would set a left sideMenu component which is a stack; once you do that, you'll be able to push screens exactly as you did with Navigation.push(this.props.componentId...:
left: {
stack: {
children: [
{
component: {
name: 'app.SideMenu',
}
}
]
}
}
What I was doing wrong is actually because I'm passing the sidemenu componentId when in fact I need to pass the id of the current tab. Something like this.
Navigation.push(`Tab${this.props.activeTabIndex + 1}`,{
component: {
name: Screens.ACCOUNTS,
}
}
)
also sidemenu layout is this
root: {
sideMenu: {
id: 'SideMenu',
left: {
component: {
id: 'SideMenu.left',
name: Screens.SIDEMENU,
}
},
while having children and stack in sidemenu object might be one solution. but you could do this as well. Consider following
Navigation.setRoot({
root: {
sideMenu: {
left: {
id: "AppSideMenu",
component: {
id: "HomeScreenDrawer",
name: "YO.HomeScreen.Drawer",
},
},
center: {
stack: {
id: "AppHomeStack",
children: [
{
component: {
id: "AppHomeScreen",
name: "YO.HomeScreen",
options: {
topBar: {
visible: false,
drawBehind: true,
height: 0,
},
statusBar: {
style: "light",
},
},
},
},
],
},
},
},
},
});
This way when you are going to push just call the ID of your main stack which lies under center{stack:{}} with ID of AppHomeStack
Now anywhere in the app, this will just do the trick
Navigation.push("AppHomeStack", {
component: {
name: "YO.UserScreen",
},
});
I have the next layout:
Navigation.setRoot( {
root: {
sideMenu: {
right: {
component: {
id: 'sideDrawer',
name: DRAWER,
}
},
center: {
bottomTabs: {
id: 'bottomTabs',
children: [
{
stack: {
children: [
{
component: {
id: 'searchTab',
name: SEARCH_TAB,
options: {
bottomTab: {
text: 'Search',
icon: iconsMap[ 'search' ],
testID: 'searchTab',
},
topBar,
}
}
}
]
}
},
{
stack: {
children: [
{
component: {
id: 'secondTab',
name: SECOND_TAB,
options: {
bottomTab: {
text: 'Second Tab',
icon: iconsMap[ 'random' ],
testID: 'secondTab',
},
topBar,
}
}
}
]
}
},
]
}
}
}
}
} )
The drawer is open when a hamburger button in the topBar on any tab is tapped. In the side drawer I have a few menu items. When I tap an item I want to push a new screen to currently active tab ( searchTab or secondTab ). Please note I'm pushing from the drawer component. The challenge is how to know the id of the currently active item to push to or is there any other way to do that?
Ok, figured out. Hopefully this will help someone else also struggling with this. In my drawer component I have a global listener:
constructor( props: Props ) {
super( props )
Navigation.events().registerComponentDidAppearListener( ( { componentId } ) => {
// only spy on tabs we don't need other screens
if (componentId === 'searchScreen' || componentId === 'secondScreen') {
this.setState({
activeComponentId: componentId
})
}
}
Then when I need to open a screen I already have the active component id and can safely push new screen onto it.
openMenuItem( screenName ) {
// close drawer
Navigation.mergeOptions( 'sideDrawer', {
sideMenu: {
right: {
visible: false
}
}
} )
// open menu item
Navigation.push( this.state.activeComponentId, {
component: { name: screenName }
}
}
I used a similar solution by listening to the BottomTabSelected event inside of a react function component.
const [activeTabIndex, setActiveTab] = useState(2 /** My default tab is 2**/ );
useLayoutEffect(() => {
const sub = Navigation.events().registerBottomTabSelectedListener(({ selectedTabIndex, unselectedTabIndex }) => {
setActiveTab(selectedTabIndex);
})
return () => sub.remove();
}, [])
And made each of my bottom stacks have an id that correlated to the tab index.
center: {
bottomTabs: {
children: [{
stack: {
id: "BottomTabs_0",
children: [{
component: {/** Component Info Here **/}
}]
}
},
{
stack: {
id: "BottomTabs_1",
children: [{
component: {/** Component Info Here **/}
}]
}
},
{
stack: {
id: "BottomTabs_2",
children: [{
component: {/** Component Info Here **/}
}]
}
}]
}
}