{"action":"created","issue":{"url":"https://api.github.com/repos/aksonov/react-native-router-flux/issues/877","repository_url":"https://api.github.com/repos/aksonov/react-native-router-flux","labels_url":"https://api.github.com/repos/aksonov/react-native-router-flux/issues/877/labels{/name}","comments_url":"https://api.github.com/repos/aksonov/react-native-router-flux/issues/877/comments","events_url":"https://api.github.com/repos/aksonov/react-native-router-flux/issues/877/events","html_url":"https://github.com/aksonov/react-native-router-flux/issues/877","id":162850534,"number":877,"title":"Broken layout when using Drawer & NavBar","user":{"login":"pewh","id":881358,"avatar_url":"https://avatars.githubusercontent.com/u/881358?v=3","gravatar_id":"","url":"https://api.github.com/users/pewh","html_url":"https://github.com/pewh","followers_url":"https://api.github.com/users/pewh/followers","following_url":"https://api.github.com/users/pewh/following{/other_user}","gists_url":"https://api.github.com/users/pewh/gists{/gist_id}","starred_url":"https://api.github.com/users/pewh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pewh/subscriptions","organizations_url":"https://api.github.com/users/pewh/orgs","repos_url":"https://api.github.com/users/pewh/repos","events_url":"https://api.github.com/users/pewh/events{/privacy}","received_events_url":"https://api.github.com/users/pewh/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":9,"created_at":"2016-06-29T06:31:30Z","updated_at":"2016-08-22T11:18:09Z","closed_at":null,"body":"### Version\r\nTell us which versions you are using: \r\n\r\n- react-native-router-flux v3.30.2\r\n- react-native v0.27.2\r\n- react-native-drawer v2.2.3\r\n\r\n### Expected behaviour\r\nShow app with drawer.\r\n\r\n\r\n### Actual behaviour\r\nBroken layout when using drawer\r\n\r\n\r\nBelow is my render method:\r\n```\r\nrender () {\r\n    const scenes = Actions.create(\r\n      <Scene key='root' hideTabBar={true}>\r\n        <Scene key='drawer' type='replace' component={DrawerContainer}>\r\n          <Scene key='products' title='SS Shop Collection' component={ProductContainer} initial />\r\n        </Scene>\r\n      </Scene>\r\n    )\r\n\r\n    return (\r\n      <Router\r\n        scenes={scenes}\r\n        createReducer={this.reducerCreate}\r\n        getSceneStyle={this.getSceneStyle}\r\n        navigationBarStyle={{ backgroundColor: COLOR.primary }}\r\n        titleStyle={{ color: COLOR.textOrIcon }}\r\n        leftButtonIconStyle={{ tintColor: COLOR.textOrIcon }}\r\n      />\r\n    )\r\n  }\r\n```\r\n\r\nthe layout just show half & become mess:\r\n![drawer-after](https://cloud.githubusercontent.com/assets/881358/16442391/724aa486-3dfc-11e6-9171-e0b7fcbb123c.png)\r\n\r\nBut when I remove or comment drawer scene like this:\r\n```\r\nconst scenes = Actions.create(\r\n      <Scene key='root' hideTabBar={true}>\r\n        {/*<Scene key='drawer' type='replace' component={DrawerContainer}>*/}\r\n          <Scene key='products' title='SS Shop Collection' component={ProductContainer} />\r\n        {/*</Scene>*/}\r\n      </Scene>\r\n    )\r\n```\r\n\r\nthe layout show like what I expected.\r\n\r\n![drawer-before](https://cloud.githubusercontent.com/assets/881358/16442429/ab1fb8dc-3dfc-11e6-895e-9f675e287200.png)\r\n\r\nI have following the Example. This is what I've done:\r\n\r\n**DrawerContainer:**\r\n```\r\nimport React, { Component, PropTypes } from 'react'\r\nimport Drawer        from 'react-native-drawer'\r\nimport DrawerContent from './DrawerContent'\r\nimport { Actions, DefaultRenderer } from 'react-native-router-flux'\r\n\r\nexport default class DrawerContainer extends Component {\r\n  static propTypes = {\r\n    navigationState: PropTypes.object,\r\n    onNavigate: PropTypes.func,\r\n  }\r\n\r\n  render () {\r\n    const { navigationState, onNavigate } = this.props\r\n\r\n    return (\r\n      <Drawer\r\n        ref=\"navigation\"\r\n        open={navigationState.open}\r\n        onOpen={()=>Actions.refresh({key:navigationState.key, open: true})}\r\n        onClose={()=>Actions.refresh({key:navigationState.key, open: false})}\r\n        type=\"displace\"\r\n        content={<DrawerContent />}\r\n        tapToClose={true}\r\n        openDrawerOffset={0.2}\r\n        panCloseMask={0.2}\r\n        negotiatePan={true}\r\n        tweenHandler={(ratio) => ({\r\n          main: { opacity:Math.max(0.54,1-ratio) }\r\n        })}>\r\n          <DefaultRenderer\r\n            navigationState={navigationState.children[0]}\r\n            onNavigate={onNavigate}\r\n          />\r\n      </Drawer>\r\n    )\r\n  }\r\n}\r\n```\r\n\r\n**DrawerContent.js**:\r\n```\r\nimport React, { PropTypes } from 'react'\r\nimport {\r\n  StyleSheet,\r\n  View,\r\n  Text,\r\n} from 'react-native'\r\n\r\nconst DrawerContent = (props, context) => {\r\n  const { drawer } = context\r\n\r\n  return (\r\n    <View style={[styles.container, props.sceneStyle]}>\r\n      <Text>Current tab {JSON.stringify(props)}</Text>\r\n\r\n      \r\n    </View>\r\n  )\r\n}\r\n\r\nDrawerContent.contextTypes = {\r\n  drawer: PropTypes.object,\r\n}\r\n\r\nDrawerContent.propTypes = {\r\n  name:       PropTypes.string,\r\n  sceneStyle: View.propTypes.style,\r\n  title:      PropTypes.string,\r\n}\r\n\r\nexport default DrawerContent\r\n\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    flex: 1,\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n    backgroundColor: '#F5FCFF',\r\n    borderWidth: 2,\r\n    borderColor: 'red',\r\n  },\r\n});\r\n```\r\n\r\nFor everyone who curious with my ProductContainer render, I post the code below. Nothing special.\r\n```\r\nreturn (\r\n      <View style={{ flex: 1 }}>\r\n        <View style={{ flexDirection: 'column' }}>\r\n          <SearchBox onChangeText={text => this.handleSearchItem({ text })} />\r\n          <FilterBox\r\n            selectedValue={currentStatus}\r\n            values={statusList}\r\n            onValueChange={status => this.handleSearchItem({ status })}\r\n          />\r\n        </View>\r\n\r\n        <ProductList\r\n          products={products}\r\n          loading={loading}\r\n          error={error}\r\n          gridSize={this.state.gridSize}\r\n          onItemClick={product => Actions.productDetail({ product })}\r\n          onChange={ref => { ref && ref.scrollTo() }}\r\n        />\r\n\r\n        {this.renderActionButton()}\r\n      </View>\r\n    )\r\n```"},"comment":{"url":"https://api.github.com/repos/aksonov/react-native-router-flux/issues/comments/241383381","html_url":"https://github.com/aksonov/react-native-router-flux/issues/877#issuecomment-241383381","issue_url":"https://api.github.com/repos/aksonov/react-native-router-flux/issues/877","id":241383381,"user":{"login":"ThaJay","id":9341747,"avatar_url":"https://avatars.githubusercontent.com/u/9341747?v=3","gravatar_id":"","url":"https://api.github.com/users/ThaJay","html_url":"https://github.com/ThaJay","followers_url":"https://api.github.com/users/ThaJay/followers","following_url":"https://api.github.com/users/ThaJay/following{/other_user}","gists_url":"https://api.github.com/users/ThaJay/gists{/gist_id}","starred_url":"https://api.github.com/users/ThaJay/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ThaJay/subscriptions","organizations_url":"https://api.github.com/users/ThaJay/orgs","repos_url":"https://api.github.com/users/ThaJay/repos","events_url":"https://api.github.com/users/ThaJay/events{/privacy}","received_events_url":"https://api.github.com/users/ThaJay/received_events","type":"User","site_admin":false},"created_at":"2016-08-22T11:18:09Z","updated_at":"2016-08-22T11:18:09Z","body":"@ronyv89 could you post the styles you used to make it work again? this wrapper scene makes a free space being rendered above the navbar and it isn't immediately obvious how to remove that."}}
{"actor":{"display_login":"ThaJay"}}