React-native-router-flux: this.props not receiving params
- react-native-router-flux v4.0.6
- react v16.6.3
- react-native v0.57.7
Hi everybody, I'm having a weird problem.
Seems that passing values through scenes using props doesn't works after update to lasts versions
This is the code that changes the action passing a param "idEnquiry"
<TouchableOpacity onPress={() => Actions.Details({ idEnquiry: 'enquiry.id' })}
....
And this is the page that doesn't receive the params
export default class Details extends Component {
constructor(props) {
super(props);
console.log(this.props.idEnquiry);
....
returns undefined
Any idea? has the Actions api changed in the last version?
Thanks
jaumebosch
All 25 comments
any help here please ??
thnx
Q8hma
on 13 Dec 2018
I don't know why, but I had the same problem and I solved in this way
It was like this:
<Scene key="myScene" title="myTitle" component={myComponent} />
It become like this:
<Stack key="myScene">
<Scene key="myScene_inner" title="myTitle" component={myComponent} />
</Stack>
And the Action is always Actions.myScene({...}), not Actions.myScene_inner({...})
try and let me know!!!
davidinhong
on 13 Dec 2018
I don't know why, but I had the same problem and I solved in this way
It was like this:
<Scene key="myScene" title="myTitle" component={myComponent} />
It become like this:<Stack key="myScene"> <Scene key="myScene_inner" title="myTitle" component={myComponent} /> </Stack>And the Action is always Actions.myScene({...}), not Actions.myScene_inner({...})
try and let me know!!!
i think it bug ,, because if i have 20 screen i need to do 20 Stack , it is not good
i hope the developer help us
Q8hma
on 13 Dec 2018
yes, i think it's a bug to
however, has this solved Your problem?
Il giorno gio 13 dic 2018, 19:08 HAMAD ADHBIYAH notifications@github.com
ha scritto:
I don't know why, but I had the same problem and I solved in this way
It was like this:
It become like this:
And the Action is always Actions.myScene({...}), not
Actions.myScene_inner({...})try and let me know!!!
i think it bug ,, because if i have 20 screen i need to do 20 Stack , it
is not good
i hope the developer help us—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/aksonov/react-native-router-flux/issues/3374#issuecomment-447065307,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Ah4tmF9nJB0I_vhnDWCPCs4RY-Ee5TXPks5u4peTgaJpZM4ZJZ5n
.
davidinhong
on 13 Dec 2018
yes, i think it's a bug to however, has this solved Your problem? Il giorno gio 13 dic 2018, 19:08 HAMAD ADHBIYAH notifications@github.com ha scritto:
…
I don't know why, but I had the same problem and I solved in this way It was like this:It become like this: And the Action is always Actions.myScene({...}), not Actions.myScene_inner({...}) try and let me know!!! i think it bug ,, because if i have 20 screen i need to do 20 Stack , it is not good i hope the developer help us — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#3374 (comment)>, or mute the thread https://github.com/notifications/unsubscribe-auth/Ah4tmF9nJB0I_vhnDWCPCs4RY-Ee5TXPks5u4peTgaJpZM4ZJZ5n .
yes if i change Scene to Stack
<Stack key="main" component={main} title="main" initial={true} hideNavBar/>
i hope it fix fast
Q8hma
on 13 Dec 2018
tried
I've noticed that the problem only happens if the scene is inside a drawer
jaumebosch
on 14 Dec 2018
tried fix with no luck, any other idea?
I've noticed that the problem only happens if the scene is inside a drawer
put how you build your route to see how it is
Mifayo
on 14 Dec 2018
Here you have.
The scene which, if inside the drawer, doesn't receive this.props is "LawyerEnquiryDetails"
Cheers
<Router>
<Scene key="root" hideNavBar hideTabBar>
<Scene key="SplashPage" component={SplashPage} hideNavBar initial />
<Scene key="Main" component={Main} hideNavBar />
<Scene key="ClientMain">
<Scene key="ClientMainBody"
component={ClientMain}
panHandlers={null}
leftButtonImage={require('./images/back.png')}
onLeft={() => Actions.pop()}
navigationBarStyle={[STYLES.navBar]}
leftButtonIconStyle={[STYLES.navBarButton, STYLES.navBarLeftButton]}
navigationBarTitleImage={require('./images/logo.png')}
navigationBarTitleImageStyle={[STYLES.navBarLogo]}>
</Scene>
</Scene>
<Scene key="ClientGreetings">
<Scene key="ClientGreetingsBody"
component={ClientGreetings}
panHandlers={null}
leftButtonImage={require('./images/back.png')}
onLeft={() => Actions.Main()}
navigationBarStyle={[STYLES.navBar]}
leftButtonIconStyle={[STYLES.navBarButton, STYLES.navBarLeftButton]}
navigationBarTitleImage={require('./images/logo.png')}
navigationBarTitleImageStyle={[STYLES.navBarLogo]}>
</Scene>
</Scene>
<Scene key="LawyerTerms">
<Scene key="LawyerTermsBody"
component={LawyerTerms}
panHandlers={null}
leftButtonImage={require('./images/back.png')}
onLeft={() => Actions.pop()}
navigationBarStyle={[STYLES.navBar]}
leftButtonIconStyle={[STYLES.navBarButton, STYLES.navBarLeftButton]}
navigationBarTitleImage={require('./images/logo.png')}
navigationBarTitleImageStyle={[STYLES.navBarLogo]}>
</Scene>
</Scene>
<Scene key="LawyerMain" component={LawyerMain} hideNavBar />
<Scene key="LawyerForgot" component={LawyerForgot} hideNavBar />
<Scene key="LawyerSignupStep1" component={LawyerSignupStep1} hideNavBar />
<Scene key="LawyerSignupStep2" component={LawyerSignupStep2} hideNavBar />
<Scene key="LawyerSignupGreetings" component={LawyerSignupGreetings} hideNavBar />
<Drawer key="Drawer" drawer contentComponent={Drawer}
drawerImage={require('./images/burger.png')}
navigationBarStyle={[STYLES.navBar]}
leftButtonIconStyle={[STYLES.navBarButton, STYLES.navBarLeftButton]}
rightButtonTextStyle={[STYLES.navBarRightText]}
rightButtonIconStyle={[STYLES.navBarButton, STYLES.navBarRightButton]}
navigationBarTitleImage={require('./images/logo.png')}
navigationBarTitleImageStyle={[STYLES.navBarLogo]}>
<Scene key="LawyerMyEnquiries" component={LawyerMyEnquiries} panHandlers={null} />
<Scene key="LawyerEnquiries" tabBarPosition={'bottom'} tabs={true} default="tab1" tabBarSelectedItemStyle={STYLES.tabSelected} showLabel={false} tabBarStyle={STYLES.tabBar}>
<Scene key="tab1"
title={I18n.t('myAreas')}
iconName="folder-open-o"
icon={TabIcon}
component={LawyerAvailableEnquiries}
initial={true}
/>
<Scene key="tab2"
title={I18n.t('otherAreas')}
iconName="archive"
icon={TabIcon}
component={LawyerOtherEnquiries}
/>
</Scene>
<Scene key="LawyerReviews"
component={LawyerReviews}
panHandlers={null} />
<Scene key="LawyerProfile"
rightTitle={I18n.t('save')}
onRight={()=>Actions.refresh({ save: true }) }
component={LawyerProfile}
panHandlers={null}
passProps={true} />
<Scene key="LawyerPlans"
component={LawyerPlans}
panHandlers={null} />
<Scene key="LawyerAdvisor"
component={LawyerAdvisor}
panHandlers={null} />
<Scene key="LawyerEnquiryDetails"
leftButtonImage={require('./images/back.png')}
onLeft={() => Actions.LawyerMyEnquiries()}
component={LawyerEnquiryDetails}
panHandlers={null} />
</Drawer>
</Scene>
</Router>
which is the scene that has the problem?
Il giorno sab 15 dic 2018, 00:28 Jaume Bosch notifications@github.com ha
scritto:
`class App extends Component {
render() {
return (<Scene key="ClientMain"> <Scene key="ClientMainBody" component={ClientMain} panHandlers={null} leftButtonImage={require('./images/back.png')} onLeft={() => Actions.pop()} navigationBarStyle={[STYLES.navBar]} leftButtonIconStyle={[STYLES.navBarButton, STYLES.navBarLeftButton]} navigationBarTitleImage={require('./images/logo.png')} navigationBarTitleImageStyle={[STYLES.navBarLogo]}> </Scene> </Scene> <Scene key="ClientGreetings"> <Scene key="ClientGreetingsBody" component={ClientGreetings} panHandlers={null} leftButtonImage={require('./images/back.png')} onLeft={() => Actions.Main()} navigationBarStyle={[STYLES.navBar]} leftButtonIconStyle={[STYLES.navBarButton, STYLES.navBarLeftButton]} navigationBarTitleImage={require('./images/logo.png')} navigationBarTitleImageStyle={[STYLES.navBarLogo]}> </Scene> </Scene> <Scene key="LawyerTerms"> <Scene key="LawyerTermsBody" component={LawyerTerms} panHandlers={null} leftButtonImage={require('./images/back.png')} onLeft={() => Actions.pop()} navigationBarStyle={[STYLES.navBar]} leftButtonIconStyle={[STYLES.navBarButton, STYLES.navBarLeftButton]} navigationBarTitleImage={require('./images/logo.png')} navigationBarTitleImageStyle={[STYLES.navBarLogo]}> </Scene> </Scene> <Scene key="LawyerMain" component={LawyerMain} hideNavBar /> <Scene key="LawyerForgot" component={LawyerForgot} hideNavBar /> <Scene key="LawyerSignupStep1" component={LawyerSignupStep1} hideNavBar /> <Scene key="LawyerSignupStep2" component={LawyerSignupStep2} hideNavBar /> <Scene key="LawyerSignupGreetings" component={LawyerSignupGreetings} hideNavBar /> <Drawer key="Drawer" drawer contentComponent={Drawer} drawerImage={require('./images/burger.png')} navigationBarStyle={[STYLES.navBar]} leftButtonIconStyle={[STYLES.navBarButton, STYLES.navBarLeftButton]} rightButtonTextStyle={[STYLES.navBarRightText]} rightButtonIconStyle={[STYLES.navBarButton, STYLES.navBarRightButton]} navigationBarTitleImage={require('./images/logo.png')} navigationBarTitleImageStyle={[STYLES.navBarLogo]}> <Scene key="LawyerMyEnquiries" component={LawyerMyEnquiries} panHandlers={null} /> <Scene key="LawyerEnquiries" tabBarPosition={'bottom'} tabs={true} default="tab1" tabBarSelectedItemStyle={STYLES.tabSelected} showLabel={false} tabBarStyle={STYLES.tabBar}>
title={I18n.t('myAreas')}
iconName="folder-open-o"
icon={TabIcon}
component={LawyerAvailableEnquiries}
initial={true}
/><Scene key="tab2" title={I18n.t('otherAreas')} iconName="archive" icon={TabIcon} component={LawyerOtherEnquiries} /> </Scene> <Scene key="LawyerReviews" component={LawyerReviews} panHandlers={null} /> <Scene key="LawyerProfile" rightTitle={I18n.t('save')} onRight={()=>Actions.refresh({ save: true }) } component={LawyerProfile} panHandlers={null} passProps={true} /> <Scene key="LawyerPlans" component={LawyerPlans} panHandlers={null} /> <Scene key="LawyerAdvisor" component={LawyerAdvisor} panHandlers={null} /> <Scene key="LawyerEnquiryDetails" leftButtonImage={require('./images/back.png')} onLeft={() => Actions.LawyerMyEnquiries()} component={LawyerEnquiryDetails} panHandlers={null} /> </Drawer> </Scene> </Router> );}
}`
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/aksonov/react-native-router-flux/issues/3374#issuecomment-447509204,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Ah4tmCbi9HDJH412-37lrrDrCrZkiPfqks5u5DQpgaJpZM4ZJZ5n
.
davidinhong
on 15 Dec 2018
@davidinhong The scene which, if inside the drawer, doesn't receive this.props is "LawyerEnquiryDetails"
jaumebosch
on 15 Dec 2018
no news?
jaumebosch
on 19 Dec 2018
new info:
adding an "onStateChange" I see this on console.log:
reducer: ACTION: {type: "Navigation/NAVIGATE", routeName: "LawyerEnquiryDetails",
params: {…}}
params: drawer: true
drawerImage: 9
error: ""
idEnquiry: 274
init: true
leftButtonIconStyle: (2) [{…}, {…}]
leftButtonImage: 7
navigationBarStyle: [{…}]
navigationBarTitleImage: 8
navigationBarTitleImageStyle: [{…}]
onLeft: ƒ onLeft()panHandlers: null
rightButtonIconStyle: (2) [{…}, {…}]
rightButtonTextStyle: [{…}]
routeName: "LawyerEnquiryDetails"__proto__: ObjectrouteName: "LawyerEnquiryDetails"
type: "Navigation/NAVIGATE"__proto__: Object
EnquiryDetails.js:26
and in the scene EnquiryDetails, when ask for this.props.idEnquiry I get
undefined
jaumebosch
on 26 Dec 2018
Facing same problem. Removing Drawer solved the problem. Hope to see some solution with the Drawer.
astutetechnp
on 26 Dec 2018
Yep, I've noticed that, but I need the drawer
jaumebosch
on 26 Dec 2018
@jaumebosch Unfortunately it is not supported right now. Maybe situation will be improved after migration to react-navigation 3.x https://github.com/aksonov/react-native-router-flux/issues/3393
aksonov
on 4 Jan 2019
umm strange situation, in previous versions it worked flawlessly, but after upgrade it begin to fail.
Can we do any kind of test to help you?
cheers
jaumebosch
on 4 Jan 2019
I believe it is because of underlying react navigation. 4.beta used RN 1.5, 4.x uses RN 2.x
aksonov
on 4 Jan 2019
Ok, when is it planned to adopt RN 3.x?
jaumebosch
on 4 Jan 2019
ETA is unknown, I have very limited availability right now, supporters are wanted.
aksonov
on 4 Jan 2019
It happens to me as well, an ugly workaround to make props to work again (while using a Drawer) was to add the "root" scene inside the Drawer, and not the other way around.
This approach makes it work, but it causes some trouble with some properties of the drawer childs to not affect the Drawer (like to disable the drawer for a login screen for example). So I definitely hope that this get fixed, cant wait for RN 3.x support.
edoantonioco
on 4 Jan 2019
Thanks @edoantonioco it worked quite well!
jaumebosch
on 7 Jan 2019
Thank you @edoantonioco 🙏 This issue had been driving me crazy. I had removed a root scene within a Drawer because I deemed it unnecessary without realizing that it would break this. Adding that wrapping scene back in fixed things.
bradley2W1DL
on 29 Jan 2019
@edoantonioco fixes my issue as well, thanks a lot.....
Friis1978
on 19 Mar 2019
This thread helped me a lot.. was going crazy trying to figure out why didn't worked... hope this gets fixed in new version.
hectorsuarezm
on 19 May 2020
Related issues
sylvainbaronnet
·
3Comments
willmcclellan
·
3Comments
jgibbons
·
3Comments
kirankalyan5
·
3Comments
sarovin
·
3Comments
Most helpful comment
It happens to me as well, an ugly workaround to make props to work again (while using a Drawer) was to add the "root" scene inside the Drawer, and not the other way around.
This approach makes it work, but it causes some trouble with some properties of the drawer childs to not affect the Drawer (like to disable the drawer for a login screen for example). So I definitely hope that this get fixed, cant wait for RN 3.x support.