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
Related
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: ''
},
},
},
}
};
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',
},
},
},
],
},
}
});
}
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"
}
}]
}
}
}
}
});
}