How to pass Mobx store to BottomTabs from another screen using React-Native-Navigation V2?
up vote
0
down vote
favorite
I'm relatively new to React Native and I'm a little confused about combining MobX with React Native Navigation (by Wix) and passing the stores.
One concrete example:
I have a single Login component as root which has a store injected by using Provider in it's wrapper and inject in the component, the store is updated for example with the user name, and finally a method is invoked called goToMain, which sets up a bottom tab layout.
export const goToMain = () => Navigation.setRoot({
root: {
bottomTabs: {
children: [{
stack: {
children: [{
component: {
name: "Tab1",
passProps: {
text: 'This is tab 1'
}
}
}],
options: {
bottomTab: {
text: "Tab1",
icon: require('../../assets/icons/test_tab_icon.png'),
testID: "TAB_"'
}
}
}
},
{
stack: {
children: [{
component: {
name: "Tab2",
passProps: {
text: "This is tab 2"
}
}
}],
options: {
bottomTab: {
text: "Tab2",
icon: require('../../assets/icons/test_tab_icon.png'),
testID: "TAB_2"
}
}
}
}]
}
}
So far so good but I would like to pass the store from the Login to the tabs so they have access to the user name or other attributes from the store but I have no idea how to do that.
Do I have to play around with the structure of the screens and root or maybe use Provider in some other way?
Would be great to hear an expert opinion on the topic. :)
react-native mobx react-native-navigation mobx-react
asked Nov 19 at 11:50
Balazs Holpar
62210
add a comment |
up vote
0
down vote
favorite
I'm relatively new to React Native and I'm a little confused about combining MobX with React Native Navigation (by Wix) and passing the stores.
One concrete example:
I have a single Login component as root which has a store injected by using Provider in it's wrapper and inject in the component, the store is updated for example with the user name, and finally a method is invoked called goToMain, which sets up a bottom tab layout.
export const goToMain = () => Navigation.setRoot({
root: {
bottomTabs: {
children: [{
stack: {
children: [{
component: {
name: "Tab1",
passProps: {
text: 'This is tab 1'
}
}
}],
options: {
bottomTab: {
text: "Tab1",
icon: require('../../assets/icons/test_tab_icon.png'),
testID: "TAB_"'
}
}
}
},
{
stack: {
children: [{
component: {
name: "Tab2",
passProps: {
text: "This is tab 2"
}
}
}],
options: {
bottomTab: {
text: "Tab2",
icon: require('../../assets/icons/test_tab_icon.png'),
testID: "TAB_2"
}
}
}
}]
}
}
So far so good but I would like to pass the store from the Login to the tabs so they have access to the user name or other attributes from the store but I have no idea how to do that.
Do I have to play around with the structure of the screens and root or maybe use Provider in some other way?
Would be great to hear an expert opinion on the topic. :)
react-native mobx react-native-navigation mobx-react
asked Nov 19 at 11:50
Balazs Holpar
62210
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I'm relatively new to React Native and I'm a little confused about combining MobX with React Native Navigation (by Wix) and passing the stores.
One concrete example:
I have a single Login component as root which has a store injected by using Provider in it's wrapper and inject in the component, the store is updated for example with the user name, and finally a method is invoked called goToMain, which sets up a bottom tab layout.
export const goToMain = () => Navigation.setRoot({
root: {
bottomTabs: {
children: [{
stack: {
children: [{
component: {
name: "Tab1",
passProps: {
text: 'This is tab 1'
}
}
}],
options: {
bottomTab: {
text: "Tab1",
icon: require('../../assets/icons/test_tab_icon.png'),
testID: "TAB_"'
}
}
}
},
{
stack: {
children: [{
component: {
name: "Tab2",
passProps: {
text: "This is tab 2"
}
}
}],
options: {
bottomTab: {
text: "Tab2",
icon: require('../../assets/icons/test_tab_icon.png'),
testID: "TAB_2"
}
}
}
}]
}
}
So far so good but I would like to pass the store from the Login to the tabs so they have access to the user name or other attributes from the store but I have no idea how to do that.
Do I have to play around with the structure of the screens and root or maybe use Provider in some other way?
Would be great to hear an expert opinion on the topic. :)
react-native mobx react-native-navigation mobx-react
asked Nov 19 at 11:50
Balazs Holpar
62210
I'm relatively new to React Native and I'm a little confused about combining MobX with React Native Navigation (by Wix) and passing the stores.
One concrete example:
I have a single Login component as root which has a store injected by using Provider in it's wrapper and inject in the component, the store is updated for example with the user name, and finally a method is invoked called goToMain, which sets up a bottom tab layout.
export const goToMain = () => Navigation.setRoot({
root: {
bottomTabs: {
children: [{
stack: {
children: [{
component: {
name: "Tab1",
passProps: {
text: 'This is tab 1'
}
}
}],
options: {
bottomTab: {
text: "Tab1",
icon: require('../../assets/icons/test_tab_icon.png'),
testID: "TAB_"'
}
}
}
},
{
stack: {
children: [{
component: {
name: "Tab2",
passProps: {
text: "This is tab 2"
}
}
}],
options: {
bottomTab: {
text: "Tab2",
icon: require('../../assets/icons/test_tab_icon.png'),
testID: "TAB_2"
}
}
}
}]
}
}
So far so good but I would like to pass the store from the Login to the tabs so they have access to the user name or other attributes from the store but I have no idea how to do that.
Do I have to play around with the structure of the screens and root or maybe use Provider in some other way?
Would be great to hear an expert opinion on the topic. :)
react-native mobx react-native-navigation mobx-react
react-native mobx react-native-navigation mobx-react
asked Nov 19 at 11:50
Balazs Holpar
62210
asked Nov 19 at 11:50
Balazs Holpar
62210
asked Nov 19 at 11:50
Balazs Holpar
62210
asked Nov 19 at 11:50
Balazs Holpar
62210
asked Nov 19 at 11:50
Balazs Holpar
62210
62210
add a comment |
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53374057%2fhow-to-pass-mobx-store-to-bottomtabs-from-another-screen-using-react-native-navi%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
