Conditional for custom image on Drawer

[JulioOrellana]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.27
• react-native v0.52.2

Expected behaviour

When user is logged, props is updated by redux connect, so in console it actually changes on component with navigation, but even if conditional is called, the image doesn't change. drawerWidth changes but not drawerImage/Icon.

Actual behaviour

On App Start without user logged

After Login

My code

import React, { Component } from 'react'
import { TouchableOpacity, Text, Image } from 'react-native'
import { Actions, Scene, Route, Schema, ActionConst, Overlay, Drawer, Stack, Router } from 'react-native-router-flux'
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
import GLOBAL from '../global'
import BarLoggedIcon from '../images/menu_white.png'
import BarNotLoggedIcon from '../images/menu_white2.png'
import LeftArrow from '../images/left_arrow.png'
import GoHome from '../images/home.png'
import { connect } from 'react-redux'
import _ from 'lodash'
import Icon from 'react-native-vector-icons/FontAwesome'

// Screens

// Root screen
import MenuList from '../scenes/root/Menu_List'
import SingleMenu from '../scenes/root/Single_Menu'
import ShoppingCart from '../scenes/root/Shopping_Cart'

// Sidemenu screens

import MenuContent from '../scenes/sidemenu/Menu_Content'
import Help from '../scenes/sidemenu/Help'

// Sidemenu -- Logged
import ChangePassword from  '../scenes/sidemenu/logged/Change_Password'
import PaymentMethods from  '../scenes/sidemenu/logged/Payment_Methods'
import UserData from        '../scenes/sidemenu/logged/User_Data'

// Sidemenu -- Not logged

import Login from '../scenes/sidemenu/not_logged/Login'
import Register from '../scenes/sidemenu/not_logged/Register'

const styles = {
    header_background_style: {
        backgroundColor: "#5b29ad",
    },
    header_title_style:{
        color: "#F5F5F5",
        paddingLeft:0,
        fontFamily: GLOBAL.FONT.FAMILY,
        fontWeight: "normal"
    },
    back_button:{
        marginLeft:20,
        paddingLeft:25
    }
}

class MenuRouter extends Component {

    getImage(token){
        if(token)
            return BarLoggedIcon
        else
            return BarNotLoggedIcon
    }

    _renderDrawerButton = () => {
        <TouchableOpacity>
            <Image source={BarLoggedIcon}/>
        </TouchableOpacity>
    }

    render() {
        console.log("token: ",this.props.status.token)
        console.log("_.isEqual(this.props.status.token,'')", _.isEqual(this.props.status.token,'') ? BarNotLoggedIcon : BarLoggedIcon)
        return (
            <Router 
                titleStyle={ styles.header_title_style }
                navigationBarStyle={ styles.header_background_style }
                backButtonImage={LeftArrow}
                key="root"
                >
                <Scene key="root1">
                    <Drawer
                        hideNavBar
                        key="drawer"
                        contentComponent={MenuContent}
                        drawerImage={ _.isEqual(this.props.status.token,"") ? BarNotLoggedIcon : BarLoggedIcon }
                        drawerWidth={_.isEqual(this.props.status.token,'') ? 250 : 200 }
                        //drawerIcon={ _.isEqual(this.props.token,"") ? <Icon name="bars" size={20}/> : <Icon name="calendar"/>}
                        //renderLeftButton={this._renderDrawerButton}
                        // drawerOpenRoute="DrawerOpen"
                        // drawerCloseRoute="DrawerClose"
                        // drawerToggleRoute="DrawerToggle"
                        >
                            <Scene key="group" panHandlers={null}  transitionConfig={() => ({ screenInterpolator: CardStackStyleInterpolator.forFade })} >
                                
                                {/* Escena inicial */}

                                <Scene key="menuListScreen"           component={MenuList}          title="Platos disponibles" type={ActionConst.REPLACE}/>

                                {/* Menu sin logear */}

                                <Scene key="loginScreen"              component={Login}             title="Login"  
                                    back leftButtonIconStyle = { styles.back_button }
                                    onRight={() => Actions.menuListScreen({ fromRouter: true }) } 
                                    rightButtonIconStyle={{ marginRight:20, marginLeft:5 }} 
                                    rightButtonImage={GoHome}
                                    />
                                <Scene key="registerScreen"           component={Register}          title="Register" 
                                    back leftButtonIconStyle = { styles.back_button } 
                                    onRight={() => Actions.menuListScreen({ fromRouter: true }) } 
                                    rightButtonIconStyle={{ marginRight:20, marginLeft:5 }} 
                                    rightButtonImage={GoHome}
                                    />
                                <Scene key="helpScreen"               component={Help}              title="Help"
                                    back leftButtonIconStyle = { styles.back_button } 
                                    onRight={() => Actions.menuListScreen({ fromRouter: true }) } 
                                    rightButtonIconStyle={{ marginRight:20, marginLeft:5 }} 
                                    rightButtonImage={GoHome}
                                    />

                                {/* Menu logeado */}

                                <Scene key="chanegPasswordScreen"     component={ChangePassword}    title="Change password"/>
                                <Scene key="PaymentMethodsScreen"     component={PaymentMethods}    title="Payment Methods"/>

                                {/* Static single menu */}

                                <Scene key="singleMenuScreen"     component={SingleMenu}    title="Detalle"
                                    back leftButtonIconStyle = { styles.back_button }
                                    onRight={() => Actions.menuListScreen({ fromRouter: true }) } 
                                    rightButtonIconStyle={{ marginRight:20, marginLeft:5 }} 
                                    rightButtonImage={GoHome}
                                    />

                                {/* Carro de Compras */}

                                <Scene key="shoppingCartScreen"     component={ShoppingCart}    title="Tu carrito de compras"
                                    back leftButtonIconStyle = { styles.back_button }
                                    onRight={() => Actions.menuListScreen({ fromRouter: true }) } 
                                    rightButtonIconStyle={{ marginRight:20, marginLeft:5 }} 
                                    rightButtonImage={GoHome}
                                    />
                            </Scene>
                    </Drawer>
                </Scene>
            </Router>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        status: state.getToken
    }
}

export default connect(mapStateToProps)(MenuRouter)

Steps to reproduce

1. Create a drawer and connect component to redux
2. Make a conditional inside drawerImage (or drawerIcon)
3. Make changes to variable to change drawerImage/Icon

---

Thanks, please I need some explanation about how to make this work, I tried just everything.

[aksonov]

Sorry, it looks like a question for stackoverflow, not issue for github..