React-native-router-flux: Broken layout when using Drawer & NavBar

[pewh]

Version

Tell us which versions you are using:

• react-native-router-flux v3.30.2
• react-native v0.27.2
• react-native-drawer v2.2.3

Expected behaviour

Show app with drawer.

Actual behaviour

Broken layout when using drawer

Below is my render method:

render () {
    const scenes = Actions.create(
      <Scene key='root' hideTabBar={true}>
        <Scene key='drawer' type='replace' component={DrawerContainer}>
          <Scene key='products' title='SS Shop Collection' component={ProductContainer} initial />
        </Scene>
      </Scene>
    )

    return (
      <Router
        scenes={scenes}
        createReducer={this.reducerCreate}
        getSceneStyle={this.getSceneStyle}
        navigationBarStyle={{ backgroundColor: COLOR.primary }}
        titleStyle={{ color: COLOR.textOrIcon }}
        leftButtonIconStyle={{ tintColor: COLOR.textOrIcon }}
      />
    )
  }

the layout just show half & become mess:

But when I remove or comment drawer scene like this:

const scenes = Actions.create(
      <Scene key='root' hideTabBar={true}>
        {/*<Scene key='drawer' type='replace' component={DrawerContainer}>*/}
          <Scene key='products' title='SS Shop Collection' component={ProductContainer} />
        {/*</Scene>*/}
      </Scene>
    )

the layout show like what I expected.

I have following the Example. This is what I've done:

DrawerContainer:

import React, { Component, PropTypes } from 'react'
import Drawer        from 'react-native-drawer'
import DrawerContent from './DrawerContent'
import { Actions, DefaultRenderer } from 'react-native-router-flux'

export default class DrawerContainer extends Component {
  static propTypes = {
    navigationState: PropTypes.object,
    onNavigate: PropTypes.func,
  }

  render () {
    const { navigationState, onNavigate } = this.props

    return (
      <Drawer
        ref="navigation"
        open={navigationState.open}
        onOpen={()=>Actions.refresh({key:navigationState.key, open: true})}
        onClose={()=>Actions.refresh({key:navigationState.key, open: false})}
        type="displace"
        content={<DrawerContent />}
        tapToClose={true}
        openDrawerOffset={0.2}
        panCloseMask={0.2}
        negotiatePan={true}
        tweenHandler={(ratio) => ({
          main: { opacity:Math.max(0.54,1-ratio) }
        })}>
          <DefaultRenderer
            navigationState={navigationState.children[0]}
            onNavigate={onNavigate}
          />
      </Drawer>
    )
  }
}

DrawerContent.js:

import React, { PropTypes } from 'react'
import {
  StyleSheet,
  View,
  Text,
} from 'react-native'

const DrawerContent = (props, context) => {
  const { drawer } = context

  return (
    <View style={[styles.container, props.sceneStyle]}>
      <Text>Current tab {JSON.stringify(props)}</Text>


    </View>
  )
}

DrawerContent.contextTypes = {
  drawer: PropTypes.object,
}

DrawerContent.propTypes = {
  name:       PropTypes.string,
  sceneStyle: View.propTypes.style,
  title:      PropTypes.string,
}

export default DrawerContent

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    borderWidth: 2,
    borderColor: 'red',
  },
});

For everyone who curious with my ProductContainer render, I post the code below. Nothing special.

return (
      <View style={{ flex: 1 }}>
        <View style={{ flexDirection: 'column' }}>
          <SearchBox onChangeText={text => this.handleSearchItem({ text })} />
          <FilterBox
            selectedValue={currentStatus}
            values={statusList}
            onValueChange={status => this.handleSearchItem({ status })}
          />
        </View>

        <ProductList
          products={products}
          loading={loading}
          error={error}
          gridSize={this.state.gridSize}
          onItemClick={product => Actions.productDetail({ product })}
          onChange={ref => { ref && ref.scrollTo() }}
        />

        {this.renderActionButton()}
      </View>
    )

[pewh]

It seems the problem is on my DrawerContainer.js. So I temporarily remove Drawer inside DrawerContainer.js, and now my DrawerContainer's render become:

<DefaultRenderer
            navigationState={navigationState.children[0]}
            onNavigate={onNavigate}
          />

It renders correctly without NAVBAR. It seems DefaultRenderer doesn't contain NavBar. Any idea to show it in my product scene? Thanks

[kristikristo]

I'm having the same issue, the NavBar is not being displayed when using DefaultRenderer.

[tuckerchapin]

+1 Same issue

[mnfgul]

Hi, I have the same issue. The only way that i could overcome is to move to the top of the scene tree. When drawer scene has any parent scene, the rooting even did not work for me.

[babbarankit]

I am also have same issue.

[aksonov]

Please prepare clone of Example to show the issue

[chrisjowen]

+1

[ronyv89]

Nest all the scenes inside the drawer scene inside another scene. Navbar showed up for me after that

[drdeath113]

I was used this method
<Drawer ref="navigation" open={navigationState.open} onOpen={()=>Actions.refresh({key:navigationState.key, open: true})} onClose={()=>Actions.refresh({key:navigationState.key, open: false})} type="displace" content={<DrawerContent />} tapToClose={true} openDrawerOffset={0.2} panCloseMask={0.2} negotiatePan={true} tweenHandler={(ratio) => ({ main: { opacity:Math.max(0.54,1-ratio) } })}> <Router> <Scene component ... /> <Scene component ... /> </Router> </Drawer>
it working for me but all scene has drawer

[pewh]

Thanks @ronyv89. I still figure out what you'd mentioned. Was it like @drdeath113's code above? If yes, is there any way to show drawer in some scenes? Thanks :)

[tiempham]

@pewh. Do you have skype ID. I do with @ronyv89 way. It's working but Scene screen so lagging, with no error warm.
My code

[alfredoreduarte]

I had to use an intermediate scene between drawer and content, as @ronyv89 pointed out.

It seems unreasonable, though. Anyway, this should be clarified in the docs.

<Scene 
    key="drawer" 
    component={DrawerMenu} 
    open={false}
    >
    <Scene key="extraSceneForNoReason">
        <Scene key="home" 
            component={Home}
            title="Title"
            renderLeftButton={HamburguerButton}
            initial={true}
            titleStyle={styles.navBarTitle}
            navigationBarStyle={styles.navBar}
            />
    </Scene>
</Scene>

[ronyv89]

@alfredoreduarte: This is the way I did

[philjoseph]

@aksonov Is this your recommendation to insert such an intermediate scene? We had several secondary effects of such a scene and I am not thrilled about it so I wonder if there is a better way to have both drawers and navigation bar (that seem to very valid components for our app).

[haifaGh]

Hi, I'm having the exact same problem .. so can you please post the complete code? thank you, I really appreciate your help