Trying to figure this out and I think I'm just missing something simple. I've got a few screens configured and I want to switch between tabs pending on a user action on the second screen.
Nav:
Navigation.setRoot({
root: {
bottomTabs: {
children: [
{
stack: {
id: 'rootStack',
children: [
{
component: {
name: 'dashboard',
id: 'cc.dashboard',
options: {
statusBar: {
visible: true,
style: 'light',
},
},
},
},
],
options: {
bottomTab: {
title: 'Home',
icon: images.bottomIconHome,
testID: 'FIRST_TAB_BAR',
text: 'Home',
selectedIconColor: color.WHITE,
selectedTextColor: color.WHITE,
iconColor: color.WHITE_25,
textColor: color.WHITE_25,
fontFamily: font.LATO_BOLD,
fontSize: 11,
},
bottomTabs: {
selectedTabColor: 'white',
backgroundColor: color.charcoalGreyThree,
titleDisplayMode: 'alwaysShow',
// fontSize: 10
},
topBar: {
visible: false,
},
statusBar: {
visible: true,
style: 'light',
},
layout: {
orientation: ['portrait'],
},
},
},
},
{
stack: {
id:'screen2stack',
children: [
{
component: {
name: 'program',
id: 'cc.program',
options: {
statusBar: {
visible: true,
style: 'light',
},
},
},
},
],
options: {
bottomTab: {
title: 'Program Tab',
icon: images.bottomIconProgram,
testID: 'SECOND_TAB_BAR_BUTTON',
text: 'Program',
selectedIconColor: color.WHITE,
selectedTextColor: color.WHITE,
iconColor: color.WHITE_25,
textColor: color.WHITE_25,
fontFamily: font.LATO_BOLD,
fontSize: 11,
},
bottomTabs: {
selectedTabColor: 'white',
backgroundColor: color.charcoalGreyThree,
titleDisplayMode: 'alwaysShow',
//fontSize: 10
},
topBar: {
visible: false,
},
statusBar: {
visible: true,
style: 'light',
},
layout: {
orientation: ['portrait'],
},
},
},
},
}
});
I've tried:
Navigation.popTo('cc.dashboard');
But that does nothing, so then I tried:
Navigation.push('cc.dashboard', {
component: {
id: 'cc.dashboard',
name: 'dashboard',
passProps: propsToPass ? propsToPass : {},
options: {
layout: {
backgroundColor: color.charcoalGreyThree,
componentBackgroundColor: color.charcoalGreyThree,
},
bottomTabs: {
visible: true,
backgroundColor: color.charcoalGreyThree,
},
},
},
});
That works, but it doesn't update the bottom tabs on the screen, still showing the second tab as highlighted. It also just puts the dashboard over it so you can still click on "Home" and go to the dashboard. When you go back to the second screen, it shows the dashboard still. Any thoughts would be appreciated.
Using "react-native-navigation": "^7.16.0", "react": "17.0.1", "react-native": "0.64.1", if that matters at all.
In order to change current tab index in React Native Navigation, you need to do merge options for bottomTabs option:
Navigation.mergeOptions(this.props.componentId, {
bottomTabs: {
currentTabIndex: 1
}
});
For more information, you'd recommend checking out this part in the docs - https://wix.github.io/react-native-navigation/docs/bottomTabs/#selecting-a-tab-by-index.
Related
TopBar are define as shown
I want to be able to decrease and spacing between multiple button, but their doesn't seem to be a way to achieve this
const options = {
topBar: {
rightButtons: [
{
id: 'id',
text: 'Button',
},
{
id: 'id2',
text: 'Button2',
},
],
},
};
I've tried adding styling to each button definition but it doesn't seem to have that functionality
const options = {
topBar: {
rightButtons: [
{
id: 'id',
text: 'Button',
style: {
marginHorizantal: -10, <= ?
}
},
{
id: 'id2',
text: 'Button2',
},
],
},
};
I am a beginner in React Native. I am make a small project, but I don't understand some things. How to add function for rightButtons and leftButtons in this case?
This is my code:
Community.options = {
topBar: {
animate: true,
elevation: 0,
title: {
text: 'Sharing Community',
fontWeight: 'bold',
alignment: 'center',
},
leftButtons: [
{
id: 'backButton',
icon: require('../../assets/icons/back-button.png'),
color: '#5B7C56',
},
],
rightButtons: [
{
id: 'rightButton',
icon: require('../../assets/icons/add.png'),
color: '#5B7C56',
},
],
},
};
I have a screen that has three bottom tabs, in one of the tab screens I want to move to a completely new page using Navigation.push but it's not working. Please anyone who can help out with switching from tab based view to push screen(that has no tabs. stack I guess)
below is my navigator.js file that contains the initial logic for switching to tabs view on login
Navigation.registerComponentWithRedux('HomeScreen', ()=> Home, Provider, store)
Navigation.registerComponentWithRedux('FindPlace', ()=> FindPlace, Provider, store)
Navigation.registerComponentWithRedux('SharePlace', ()=> SharePlace, Provider, store)
Navigation.registerComponent('PlaceDetailScreen', ()=> PlaceDetailScreen);
export const startNavigation = () => {
Promise.all([
Icon.getImageSource('ios-search', 30),
Icon.getImageSource('md-share', 30, 'blue'),
Icon.getImageSource('ios-home', 30, 'darkblue'),
]).then(icons => {
Navigation.setRoot({
root: {
bottomTabs: {
children: [
{
component: {
name: 'HomeScreen',
options: {
bottomTab: {
text: 'Home',
fontSize: 10,
icon: icons[2]
}
}
}
},
{
component: {
name: 'FindPlace',
options: {
bottomTab: {
text: 'Find a Place',
fontSize: 10,
icon: icons[0]
}
},
passProps: {
data: 'Data'
}
}
},
{
component: {
name: 'SharePlace',
options: {
bottomTab: {
text: 'Share Place',
fontSize: 10,
icon: icons[1]
}
}
}
}
]
}
}
})
})
}
below is my dummy login page that I use to call the tabs logic
import {startNavigation} from '../../../navigation';
const AuthScreen = props=> {
const navigateTabs = () => {
startNavigation()
}
return (
<View style={styles.authScreen}>
<TextInput placeholder='Username'/>
<Button title='Log me in' color='green' onPress={navigateTabs}/>
</View>
)
}
below is the code I am trying to use to push a new screen which is not working
const handleItemSelect = key => {
const selPlaces = places.places.find(item => item.key === key);
Navigation.push(props.componentId, {
component: {
name: 'PlaceDetailScreen',
options: {
topBar: {
visible: true,
title: {
text: selPlaces.name
}
}
},
passProps: {
selectedPlace: selPlaces
}
}
})
}
Solved it! the issue was with how I was setting the root in my main navigation.js file. I wasn't doing it properly.
here is the updated root as instructed here https://wix.github.io/react-native-navigation/#/docs/top-level-api?id=setrootlayout
bottomTabs: {
children: [
{
stack: {
children: [
{
component: {
name: 'HomeScreen',
options: {
bottomTab: {
text: 'Home',
fontSize: 10,
icon: icons[2]
},
topBar: {
visible: true,
leftButtons: [
{
id: 'sideMenu',
icon: icons[3]
}
],
noBorder: true
}
}
}
}
]
}
},
{
stack: {
children: [
{
component: {
name: 'FindPlace',
options: {
bottomTab: {
text: 'Find a Place',
fontSize: 10,
icon: icons[0]
},
topBar: {
leftButtons: [
{
id: 'sideMenu',
icon: icons[3]
}
],
noBorder: true
}
},
passProps: {
data: 'Data'
}
}
},
]
}
},
{
stack: {
children: [
{
component: {
name: 'SharePlace',
options: {
bottomTab: {
text: 'Share Place',
fontSize: 10,
icon: icons[1]
},
topBar: {
leftButtons: [
{
id: 'sideMenu',
icon: icons[3]
}
],
noBorder: true
}
},
passProps: {
data: 'data'
}
}
}
]
}
}
]
}
Please help, i will explain first by showing the code :
home.js
onHelpPagePress() {
Promise.all([
AntDesign.getImageSource('arrowleft', 25)
]).then((sources) => {
Navigation.setRoot({
root: {
stack: {
children: [{
component: {
name: 'projectName.HelpPage',
options: {
topBar: {
title: {
text: 'Screen Name 1',
},
drawBehind: false,
leftButtons: [
{
id: 'backButton',
enabled: true,
showAsAction: 'ifRoom',
component: {
name: 'projectName.Home',
passProps: {
color: 'white',
// pass event here
}
},
icon: sources[0],
color: 'white',
},
],
}
}
},
}]
}
}
});
});
}
it will looks like this :
------------------------------------
<- Screen Name 1
------------------------------------
how can i access the back button in the new screen?
and could someone help me how can i go to the previous screen?
thanks
it fixed when using navigation.showmodal
I'm trying to add bottom tab bar in my jhipster ignite application, which uses react-native-navigation v2.
Screens are registered like:
Navigation.registerComponentWithRedux(LAUNCH_SCREEN, () => LaunchScreen, Provider, store)
Where e.g.:
export const LAUNCH_SCREEN = 'nav.LaunchScreen'
And here is the complete navigation:
export const topBar = {
title: {
text: 'MDNGHT',
color: Colors.snow
},
leftButtons: [
{
id: 'menuButton',
icon: Images.menuIcon,
testID: 'menuButton',
color: Colors.snow
}
]
}
export const launchScreenComponent = {
component: {
id: 'id.launch',
name: LAUNCH_SCREEN,
options: {
topBar: topBar,
bottomTab: {
fontSize: 12,
text: 'HOME'
}
}
}}
export const eventsScreenComponent = {
component: {
id: 'id.events',
name: EVENTS_SCREEN,
options: {
topBar: topBar,
bottomTab: {
fontSize: 12,
text: 'EVENTS'
}
}
}
}
export const bottomTabs = {
id: 'bottomTabs',
children: [
{
stack: {
children: [
launchScreenComponent
]
}
},
{
stack: {
children: [
eventsScreenComponent
]
}
}
],
options: {
bottomTabs: {
activeTintColor: 'red',
inactiveTintColor: 'grey',
backgroundColor: '#121212',
borderTopWidth: 0,
shadowOffset: {width: 5, height: 3},
shadowColor: 'black',
shadowOpacity: 0.5,
elevation: 5
}
}
}
export const appStack = {
root: {
sideMenu: {
left: {
component: {
name: DRAWER_CONTENT
}
},
center: {
bottomTabs: bottomTabs
}
}
}
}
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setDefaultOptions({
topBar: {
topBar: {
title: {
color: Colors.snow
}
},
backButton: {
showTitle: false,
testID: 'backButton',
icon: Images.chevronLeftIcon,
color: Colors.snow,
iconColor: Colors.snow
},
background: {
color: Colors.background
}
},
sideMenu: {
left: {
enabled: false
}
}
})
Navigation.setRoot(appStack)
// handle app state and deep links
AppState.addEventListener('change', handleAppStateChange)
Linking.addEventListener('url', handleOpenURL)
})
I don't get any error message, my application just stops after start.
When I put:
stack: {
id: 'center',
children: [launchScreenComponent]
}
Instead of bottomTabs: bottomTabs in appStack, the application works (but without bottom tab bar)
Following the Layout docs from react-native-navigation, you can replace the appStack with a bottomTabs implementation instead of a drawer like below (only one tab configured as example, add another object in root.bottomTabs.children to add another tab).
export const appStack = {
root: {
bottomTabs: {
children: [
{
stack: {
id: 'firstTabStack',
children: [
{
component: {
name: LAUNCH_SCREEN,
options: {
topBar: {
title: {
text: 'Welcome!',
color: Colors.snow
}
}
}
}
}
],
options: {
bottomTab: {
iconColor: 'gray',
textColor: 'gray',
selectedIconColor: 'black',
selectedTextColor: 'black',
text: 'Launch Screen',
testID: 'LAUNCH_SCREEN',
icon: Images.menuIcon
}
}
}
}
]
}
}
}
It actually turns out that it is required to set an icon for each bottom tab, otherwise the app crashes:
bottomTab: {
fontSize: 12,
text: 'HOME'
icon: require('../shared/images/logo.png')
}
This resolves the issue.