Below is my code for bottomTabs that is not working, don't worry my component names are correct, I have checked many times. The only thing is when below code loads my apps stops working , by the way i am testing it in android (tried in simulator as well as on real device ) but not working.
What may be the possible reasons? I am new to react-native
const startTabs = () => {
Navigation.setRoot({
root: {
bottomTabs: {
children: [
{
component: {
name: 'awesome-places.SharePlaceScreen',
passProps: {
text: 'This is tab 1',
myFunction: () => 'Hello from a function!',
},
},
},
{
component: {
name: 'awesome-places.FindPlaceScreen',
passProps: {
text: 'This is tab 2',
},
},
},
],
},
}
});
}
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 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
}
}
}
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 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 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