How to link data container with drawer router-flux?

Question

I created sidemenu drawer in routers-flux index file like this

    <Scene
    key="drawer"
    drawer
    contentComponent={Menu}
    drawerWidth={300}  >

    exp : <Tab> </Tab>

    </Scene>

It works correct shows a side menu on tabs now I want to show data on side menu like userName, Email.

But How can I get data inside menu drawer because a drawer tag doesn't allow to write component and container both, It only let me write the contentComponent which is just a view?

Answer 1

Your menu component will have to be a "smart component" - using the context API or something like Redux to get access to it.

Starting from the code you showed and using redux, it would be something like:

import React from 'react'
import { connect } from 'react-redux';

const Menu = props => (
  <View> 
    <Text>{props.username}</Text>
  </View>
)

export default connect((state) => ({ username: state.auth.username }))(Menu);

That way, when importing Menu to be used in your Drawer, it will be aware of the user context there.