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

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>
    )