I have been stuck on this problem all morning. I have read multiple GitHub issues and StackOverflow posts and nothing has worked.
I want to remove the blue back button in the top left of the below pic.
I have noticed I am having trouble customizing the top bar altogether. I cannot add a title to the back button etc (this hint might indicate what is wrong).
Navigation.setRoot
Navigation.events().registerAppLaunchedListener(() => {
Reactotron.log('5');
Navigation.setRoot({
root: {
stack: {
children: [{
component: {
id: STARTING_SCREEN,
name: STARTING_SCREEN
}
}],
}
},
layout: {
orientation: 'portrait',
},
}).then(()=>Reactotron.log('7'));
Navigation.push
SplashScreen (root screen) -> AccessScreen (next screen).
Navigation.push(this.props.componentId, {
component: {
name: screen
},
options: {
topBar: {
backButton: {
visible: false,
}
}
}
It's almost as if I am specifying the backButton options in the wrong place.
A tricky workaround
leftButtons: [
{
id: 'something',
text: '',
},
],
the text: '' will keep a empty space, so will hide the button.
Actually not hide, but yea you can say that too.
You're good to go!!
Use it but only working for ios
Navigation.setDefaultOptions({
topBar: {
backButton: {
visible: false
}
},
})
or you can customize topBar
Navigation.push(this.props.componentId, {
component: {
name: screen
},
options: {
topBar: {
backButton: {
background: YourComponent
}
}
}
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'm trying to use react-native-navigation and have a question about it.
I have a list screen with a lot of items and when you click on one of them, it will bring you to a details screen and I need 3 bottomtabs on that screen.
What is the best way to achieve this with react native navigation.
I could do something like this( see code ).
But then I’m stuck with the 3 bottomtabs on every screen.
Navigation.setRoot({
root: {
bottomTabs: {
children: [{
stack: {
children: [{
component: {
name: 'SignIn',
passProps: {
text: 'ex tab'
},
options: {
bottomTab: {
text: 'tab1',
icon: require('./images/one.png'),
}
}
},
}] // end children
} // end stack
},
{
component: {
name: 'SignUp',
passProps: {
text: 'Sign up tab'
},
options: {
bottomTab: {
text: 'tab2',
icon: require('./images/two.png'),
}
}
},
},
{
component: {
name: 'SignUp',
passProps: {
text: 'Sign up tab'
},
options: {
bottomTab: {
text: 'tab2',
icon: require('./images/two.png'),
}
}
},
}]
} // end bottomtabs
}
})
Any help or tips would be appreciated.
It's pretty good practice with React-Navigation to put your Auth Stack in one branch of a switch navigator and then the rest of your app within another branch of a switch navigator within a Stack Navigator. That way if you want tabs on your auth stack it's technically it's own stack and won't bleed into the rest of your app.
For instance:
app
-AuthSwitch
\_Tab1
\_Tab2
\_Tabn
-MainSwitch
\_HomeStack
\_etc...
I'm very new at Wix Navigation, I do really like the feeling of native in navigating but its also very hard.. I cant understand how I should build.
I want to be able to start my app with single welcome screen, then I will navigate the user to login/register screens. After they login they will be inside of home page, and home page will have sideMenu. I have created the home page with side menus but I cant make welcome screen show up before, something fails anyways..
I really tried so many combinations but I cant make it properly, can someone give me a small example how I would do that? Here actually welcome screen shows up first but it have backbutton, which I dont want.. when I press back button it goes to home page, instead we should be able to go to home page from welcome
Wanted flow: Welcome -> Login -> Home(with side menus)
Navigation.registerComponent(`WelcomeScreen`, () => Welcome);
Navigation.registerComponent(`HomeScreen`, () => Home);
Navigation.registerComponent(`Screen2`, () => Screen2);
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
sideMenu: {
left: {
component: {
name: 'Screen2',
passProps: {
text: 'This is a left side menu screen'
},
},
},
center: {
stack: {
children:[
{
component: {
name: 'HomeScreen',
options:{
topBar:{
visible: true,
title: {
text: 'Home',
color: 'red',
alignment: 'center'
},
},
}
},
},
{
component:{
name: 'WelcomeScreen',
options:{
topBar:{
visible: true,
title: {
text: 'Welcome',
color: 'red',
alignment: 'center'
},
},
}
},
}
]
}
},
right: {
component: {
name: 'Screen2',
passProps: {
text: 'This is a right side menu screen'
}
}
},
options: {
sideMenu: {
left: {
width: 250*SW,
},
},
}
},
},
})
})
You can start by putting the welcome screen as your root and then pushing the login screen on top of that and if the user is logged in setting the root again by putting the above code in setRoot. Example
Edit
index.js :
Navigation.events ().registerAppLaunchedListener (() => {
Navigation.setRoot ({
root: {
stack: {
children: [
{
component: {
id: 'WelcomeScreen', // Optional, Auto generated if empty
name: 'navigation.playground.WelcomeScreen', // WelcomeScreen Id
}
},
],
},
},
});
});
push to HomeScreen.js
ScreenOne.js :
import {PropTypes} from 'prop-types';
static propTypes = {
componentId: PropTypes.string,
};
pushScreen () {
Navigation.push (this.props.componentId, {
component: {
name: 'navigation.playground.HomeScreen' // HomeScreen.js Id
},
});
}
Try if this pushing screen logic works for you
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 am using RN 0.55 and RNN 2.1.2. When I am on the root screen of my stack navigator and swipe right (the back action) then attempt to navigate via a push, all user interaction locks and the application becomes unresponsive. It does not crash, nor does it throw an error. It just locks up. Has anyone experienced this or have a fix?
NOTE: There is a small chance that that .push is being called twice very very quickly. It isn't debounced and can be triggered multiple times.
The initial setup in index.js
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
stack: {
children: [
{
component: {
name: "search.ListsOfThings",
options: {
layout: {
orientation: ['portrait']
},
topBar: {
visible: false,
drawBehind: true
}
}
}
}
]
}
}
})
})
the push command inside of ListOfThings
Navigation.push(this.props.componentId, {
component: {
name: 'search.FoundThings',
passProps: {
things: data.foundThings
},
options: {
layout: {
orientation: ['portrait']
},
topBar: {
visible: false,
drawBehind: true
}
}
}
})
To lock you need to follow this:
stack: {
children: [{.....}],
options: { layout: { orientation: ['portrait']}}
},
This should help