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
Related
I was using RNN V1 and decided to update to the latest since I needed more customization, it updated to the V3-alpha. Don't know if this was a mistake from my part or not, if I prolly should go to latest V2 for more stability.
Thing is, whenever I start my project on a different mac, it throws the following error:
Exception 'Bridge not yet loaded! Send commands after Navigation.events().onAppLaunched() has been called.' was thrown while invoking setDefaultOptions on target RNNBridgeModule with params (
{
statusBar = {
style = light;
visible = 1;
};
topBar = {
visible = 0;
};
},
30,
31
)
callstack: (
The only place where i set the setDefaultOptions was when starting the tab based navigation.
This is the code for that.
import { Navigation } from 'react-native-navigation';
import { iconsMap } from '../../_global/AppIcons';
import i18n from '../../_global/i18n';
import { navigatorStyle } from '../../styles/navigatorStyles';
Navigation.setDefaultOptions({
statusBar: {
visible: true,
style: 'light'
},
topBar: {
visible: false
}
});
const startTabs = () => {
Navigation.setRoot({
root: {
bottomTabs: {
animate: true,
visible: false,
drawBehind: true,
elevation: 8,
children: [
{
stack: {
children: [
{
component: {
id: 'MainTab',
name: 'app.MainTab'
}
}
],
options: {
bottomTab: {
text: i18n.t('main'),
icon: iconsMap['home'],
...navigatorStyle
}
}
}
},
{
stack: {
children: [
{
component: {
id: 'MyProfileTab',
name: 'app.MyProfileTab'
}
}
],
options: {
bottomTab: {
text: i18n.t('myProfile'),
icon: iconsMap['md-person'],
...navigatorStyle
}
}
}
},
{
stack: {
children: [
{
component: {
id: 'MessageScreen',
name: 'app.MessageScreen'
}
}
],
options: {
bottomTab: {
text: i18n.t('messages'),
icon: iconsMap['comment-dots'],
badge: '2',
badgeColor: 'red',
...navigatorStyle
}
}
}
}
]
}
}
});
}
export default startTabs;
On my main macbook used to work, why is not working on a different computer? what could I be possibly be doing wrong or missing here? I got the latest code on both.
Even tried commenting out the setDefaultOptions but the error still shows up.
Any help will be appreciated.
The most likely option is how you are passing the default Options. Make sure you pass them inside registerAppLaunchedListener before Navigation.setRoot({}) option.
Navigation.events().registerAppLaunchedListener(() => { // here }.
So your code will look something like this.
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setDefaultOptions({
//options here
})
Navigation.setRoot({
root: {
bottomTabs: {
//bottom tabs option
}
}
});
});
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"
}
}]
}
}
I want side menu in a particular screen in stack navigation.
How can i navigation.push to a screen in stack navigation having a side menu in react native navigation v2. As Navigation.push only takes component object.
Navigation.setRoot({
root: {
stack: {
id: 'App',
children: [
{
component: {
name: 'FormList',
options: {
topBar: {
title: {
text: 'Forms'
}
}
}
}
}
],
}
}
});
I want to push to a screen in CreateForm which would have a sidemenu
const sidemenu = {
sideMenu: {
center: {
component: {
name: 'CreateForm',
options: {
topBar: {
title: {
text: 'Create Form'
},
},
}
},
},
right: {
component: {
name: 'CreateField',
passProps: {
text: ''
},
},
},
}
};
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 **/}
}]
}
}]
}
}