diff --git a/Example/Example.js b/Example/Example.js
index c3becab88..49b4a05de 100644
--- a/Example/Example.js
+++ b/Example/Example.js
@@ -18,6 +18,7 @@ import {
   Actions,
   Reducer,
   ActionConst,
+  Overlay,
   Tabs,
   Modal,
   Drawer,
@@ -52,26 +53,28 @@ const reducerCreate = params => {
   };
 };
 const getSceneStyle = () => ({
-  backgroundColor: "white",
+  backgroundColor: "#F5FCFF",
   shadowOpacity: 1,
   shadowRadius: 3,
 });
-
+const BackgroundView = () => <View style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, backgroundColor:'red' }}/>
 const Example = () => (
-  <View style={{ flex: 1 }}>
-    <Router createReducer={reducerCreate} tintColor="red" getSceneStyle={getSceneStyle}>
-      <Modal hideNavBar transitionConfig={() => ({ screenInterpolator: CardStackStyleInterpolator.forFadeFromBottomAndroid })}>
-        <Lightbox leftButtonTextStyle={{ color: 'green' }} backButtonTextStyle={{ color: 'red' }}>
-          <Stack hideNavBar hideTabBar titleStyle={{ alignSelf: 'center' }}>
-            <Scene key="echo" back clone component={EchoView} getTitle={({ navigation }) => navigation.state.key} />
-            <Scene key="register" back duration={0} >
-              <Scene key="_register" component={Register} title="Register" />
-              <Scene key="register2" component={Register} title="Register2" />
-              <Scene key="home" component={Home} title="Replace" type={ActionConst.REPLACE} />
+  <Router createReducer={reducerCreate} tintColor="red" getSceneStyle={getSceneStyle}>
+    <Overlay>
+      <Modal hideNavBar
+             transitionConfig={() => ({screenInterpolator: CardStackStyleInterpolator.forFadeFromBottomAndroid})}>
+        <Lightbox leftButtonTextStyle={{color: 'green'}} backButtonTextStyle={{color: 'red'}}>
+          <Stack hideNavBar hideTabBar titleStyle={{alignSelf: 'center'}}>
+            <Scene key="echo" back clone component={EchoView} getTitle={({navigation}) => navigation.state.key}/>
+            <Scene key="register" back duration={0}>
+              <Scene key="_register" component={Register} title="Register"/>
+              <Scene key="register2" component={Register} title="Register2"/>
+              <Scene key="home" component={Home} title="Replace" type={ActionConst.REPLACE}/>
             </Scene>
-            <Scene key="launch" component={Launch} title="Launch" initial />
+            <Scene key="launch" component={Launch} title="Launch" initial/>
             <Drawer contentComponent={TabView}>
-              <Tabs key="tabbar" gestureEnabled={false} showLabel={false} tabs tabBarStyle={styles.tabBarStyle} activeBackgroundColor="white"
+              <Tabs key="tabbar" gestureEnabled={false} showLabel={false} tabs tabBarStyle={styles.tabBarStyle}
+                    activeBackgroundColor="white"
                     inactiveBackgroundColor="red">
                 <Stack
                   key="tab1"
@@ -79,22 +82,25 @@ const Example = () => (
                   tabBarLabel="TAB #1"
                   inactiveBackgroundColor='white' activeBackgroundColor='#dddddd'
                   icon={TabIcon}
-                  navigationBarStyle={{ backgroundColor: 'green' }}
-                  titleStyle={{ color: 'white', alignSelf: 'center' }}
+                  navigationBarStyle={{backgroundColor: 'green'}}
+                  titleStyle={{color: 'white', alignSelf: 'center'}}
                 >
-                  <Scene
-                    key="tab1_1"
-                    component={TabView}
-                    title="Tab #1_1"
-                    onRight={() => alert('Right button')}
-                    rightTitle="Right"
-                  />
+                  <Overlay>
+                    <Scene component={BackgroundView} />
+                    <Scene
+                      key="tab1_1"
+                      component={TabView}
+                      title="Tab #1_1"
+                      onRight={() => alert('Right button')}
+                      rightTitle="Right"
+                    />
+                  </Overlay>
                   <Scene
                     key="tab1_2"
                     component={TabView}
                     title="Tab #1_2"
                     back
-                    titleStyle={{ color: 'black', alignSelf: 'center' }}
+                    titleStyle={{color: 'black', alignSelf: 'center'}}
                   />
                 </Stack>
                 <Scene key="tab2" initial title="Tab #2" icon={TabIcon}>
@@ -113,7 +119,8 @@ const Example = () => (
                     panHandlers={null}
                   />
                 </Scene>
-                <Scene key="tab3" component={TabView} title="Tab #3" icon={TabIcon} rightTitle="Right3" onRight={()=>{}}/>
+                <Scene key="tab3" component={TabView} title="Tab #3" icon={TabIcon} rightTitle="Right3" onRight={() => {
+                }}/>
                 <Scene key="tab4" component={TabView} title="Tab #4" hideNavBar icon={TabIcon}/>
                 <Scene key="tab5" component={TabView} title="Tab #5" icon={TabIcon}/>
               </Tabs>
@@ -124,7 +131,7 @@ const Example = () => (
         <Stack key="login" titleStyle={{alignSelf: "center"}}>
           <Scene component={Login} title="Login"
                  key="loginModal"
-                 onExit={()=>console.log("onExit")}
+                 onExit={() => console.log("onExit")}
                  leftTitle="Cancel" onLeft={Actions.pop}/>
           <Scene
             key="loginModal2"
@@ -144,8 +151,9 @@ const Example = () => (
           />
         </Stack>
       </Modal>
-    </Router>
-    <MessageBar />
-  </View>);
+      <Scene component={MessageBar} />
+    </Overlay>
+  </Router>
+);
 
 export default Example;
diff --git a/Example/components/TabView.js b/Example/components/TabView.js
index 0e49d765a..39f65fb28 100644
--- a/Example/components/TabView.js
+++ b/Example/components/TabView.js
@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#F5FCFF',
+    backgroundColor: 'transparent',
     borderWidth: 2,
     borderColor: 'red',
   },
diff --git a/dist/Overlay.js b/dist/Overlay.js
new file mode 100644
index 000000000..4ae3b812e
--- /dev/null
+++ b/dist/Overlay.js
@@ -0,0 +1,9 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.default=
+
+
+
+
+
+
+
+function(){return null;};
\ No newline at end of file
diff --git a/dist/OverlayNavigator.js b/dist/OverlayNavigator.js
new file mode 100644
index 000000000..1c649d329
--- /dev/null
+++ b/dist/OverlayNavigator.js
@@ -0,0 +1,50 @@
+Object.defineProperty(exports,"__esModule",{value:true});var _jsxFileName='src/OverlayNavigator.js';
+
+var _react=require('react');var _react2=_interopRequireDefault(_react);
+var _reactNavigation=require('react-navigation');
+var _reactNative=require('react-native');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}
+
+var OverlayNavigator=function OverlayNavigator(
+routeConfigs)
+
+{var tabsConfig=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};
+var router=(0,_reactNavigation.TabRouter)(routeConfigs,tabsConfig);
+
+var navigator=(0,_reactNavigation.createNavigator)(
+router,
+routeConfigs,
+tabsConfig,
+'react-navigation/STACK')(
+function(_ref){var navigation=_ref.navigation;var
+state=navigation.state,dispatch=navigation.dispatch;var
+routes=state.routes;
+
+
+var Component=routeConfigs[tabsConfig.initialRouteName].screen;
+var initialIndex=0;
+for(var i=0;i<routes.length;i++){
+var route=routes[i];
+if(route.routeName===tabsConfig.initialRouteName){
+initialIndex=i;
+}
+}
+var initialRouteName=tabsConfig.initialRouteName||routes[initialIndex].routeName;
+var overlays=[];
+for(var _i=0;_i<tabsConfig.order.length;_i++){
+var routeName=tabsConfig.order[_i];
+if(initialRouteName!==routeName){
+var Overlay=routeConfigs[routeName].screen;
+overlays.push(_react2.default.createElement(Overlay,{key:routeName,navigation:{dispatch:dispatch,state:state},__source:{fileName:_jsxFileName,lineNumber:37}}));
+}
+}
+var ContentComponent=tabsConfig.contentComponent||_reactNative.View;
+return _react2.default.createElement(ContentComponent,{style:{flex:1},__source:{fileName:_jsxFileName,lineNumber:41}},
+_react2.default.createElement(Component,{navigation:{dispatch:dispatch,state:routes[initialIndex]},__source:{fileName:_jsxFileName,lineNumber:42}}),
+overlays);
+
+});
+
+return(0,_reactNavigation.createNavigationContainer)(navigator,tabsConfig.containerOptions);
+};exports.default=
+
+OverlayNavigator;
\ No newline at end of file
diff --git a/dist/index.js b/dist/index.js
index f48aecfb0..6fa807704 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -1,4 +1,4 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.Tabs=exports.Drawer=exports.Stack=exports.Lightbox=exports.Modal=exports.Actions=exports.Scene=exports.Router=exports.Reducer=exports.ActionConst=undefined;var _ActionConst=require('./ActionConst');var ActionConst=_interopRequireWildcard(_ActionConst);
+Object.defineProperty(exports,"__esModule",{value:true});exports.Overlay=exports.Tabs=exports.Drawer=exports.Stack=exports.Lightbox=exports.Modal=exports.Actions=exports.Scene=exports.Router=exports.Reducer=exports.ActionConst=undefined;var _ActionConst=require('./ActionConst');var ActionConst=_interopRequireWildcard(_ActionConst);
 var _Reducer=require('./Reducer');var _Reducer2=_interopRequireDefault(_Reducer);
 var _Router=require('./Router');var _Router2=_interopRequireDefault(_Router);
 var _Scene=require('./Scene');var _Scene2=_interopRequireDefault(_Scene);
@@ -7,7 +7,8 @@ var _Modal=require('./Modal');var _Modal2=_interopRequireDefault(_Modal);
 var _Lightbox=require('./Lightbox');var _Lightbox2=_interopRequireDefault(_Lightbox);
 var _Stack=require('./Stack');var _Stack2=_interopRequireDefault(_Stack);
 var _Drawer=require('./Drawer');var _Drawer2=_interopRequireDefault(_Drawer);
-var _Tabs=require('./Tabs');var _Tabs2=_interopRequireDefault(_Tabs);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _interopRequireWildcard(obj){if(obj&&obj.__esModule){return obj;}else{var newObj={};if(obj!=null){for(var key in obj){if(Object.prototype.hasOwnProperty.call(obj,key))newObj[key]=obj[key];}}newObj.default=obj;return newObj;}}exports.
+var _Tabs=require('./Tabs');var _Tabs2=_interopRequireDefault(_Tabs);
+var _Overlay=require('./Overlay');var _Overlay2=_interopRequireDefault(_Overlay);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _interopRequireWildcard(obj){if(obj&&obj.__esModule){return obj;}else{var newObj={};if(obj!=null){for(var key in obj){if(Object.prototype.hasOwnProperty.call(obj,key))newObj[key]=obj[key];}}newObj.default=obj;return newObj;}}exports.
 
 
 ActionConst=ActionConst;exports.
@@ -19,4 +20,5 @@ Modal=_Modal2.default;exports.
 Lightbox=_Lightbox2.default;exports.
 Stack=_Stack2.default;exports.
 Drawer=_Drawer2.default;exports.
-Tabs=_Tabs2.default;
\ No newline at end of file
+Tabs=_Tabs2.default;exports.
+Overlay=_Overlay2.default;
\ No newline at end of file
diff --git a/dist/navigationStore.js b/dist/navigationStore.js
index 5f0fc59c2..5da15142b 100644
--- a/dist/navigationStore.js
+++ b/dist/navigationStore.js
@@ -15,7 +15,9 @@ var _lodash=require('lodash.isequal');var _lodash2=_interopRequireDefault(_lodas
 var _Modal=require('./Modal');var _Modal2=_interopRequireDefault(_Modal);
 var _Lightbox=require('./Lightbox');var _Lightbox2=_interopRequireDefault(_Lightbox);
 var _Drawer=require('./Drawer');var _Drawer2=_interopRequireDefault(_Drawer);
-var _Tabs=require('./Tabs');var _Tabs2=_interopRequireDefault(_Tabs);function _interopRequireWildcard(obj){if(obj&&obj.__esModule){return obj;}else{var newObj={};if(obj!=null){for(var key in obj){if(Object.prototype.hasOwnProperty.call(obj,key))newObj[key]=obj[key];}}newObj.default=obj;return newObj;}}function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _toConsumableArray(arr){if(Array.isArray(arr)){for(var i=0,arr2=Array(arr.length);i<arr.length;i++){arr2[i]=arr[i];}return arr2;}else{return Array.from(arr);}}function _initDefineProp(target,property,descriptor,context){if(!descriptor)return;Object.defineProperty(target,property,{enumerable:descriptor.enumerable,configurable:descriptor.configurable,writable:descriptor.writable,value:descriptor.initializer?descriptor.initializer.call(context):void 0});}function _applyDecoratedDescriptor(target,property,decorators,descriptor,context){var desc={};Object['ke'+'ys'](descriptor).forEach(function(key){desc[key]=descriptor[key];});desc.enumerable=!!desc.enumerable;desc.configurable=!!desc.configurable;if('value'in desc||desc.initializer){desc.writable=true;}desc=decorators.slice().reverse().reduce(function(desc,decorator){return decorator(target,property,desc)||desc;},desc);if(context&&desc.initializer!==void 0){desc.value=desc.initializer?desc.initializer.call(context):void 0;desc.initializer=undefined;}if(desc.initializer===void 0){Object['define'+'Property'](target,property,desc);desc=null;}return desc;}function _initializerWarningHelper(descriptor,context){throw new Error('Decorating class property failed. Please ensure that transform-class-properties is enabled.');}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}function _objectWithoutProperties(obj,keys){var target={};for(var i in obj){if(keys.indexOf(i)>=0)continue;if(!Object.prototype.hasOwnProperty.call(obj,i))continue;target[i]=obj[i];}return target;}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}
+var _Tabs=require('./Tabs');var _Tabs2=_interopRequireDefault(_Tabs);
+var _Overlay=require('./Overlay');var _Overlay2=_interopRequireDefault(_Overlay);
+var _OverlayNavigator=require('./OverlayNavigator');var _OverlayNavigator2=_interopRequireDefault(_OverlayNavigator);function _interopRequireWildcard(obj){if(obj&&obj.__esModule){return obj;}else{var newObj={};if(obj!=null){for(var key in obj){if(Object.prototype.hasOwnProperty.call(obj,key))newObj[key]=obj[key];}}newObj.default=obj;return newObj;}}function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _toConsumableArray(arr){if(Array.isArray(arr)){for(var i=0,arr2=Array(arr.length);i<arr.length;i++){arr2[i]=arr[i];}return arr2;}else{return Array.from(arr);}}function _initDefineProp(target,property,descriptor,context){if(!descriptor)return;Object.defineProperty(target,property,{enumerable:descriptor.enumerable,configurable:descriptor.configurable,writable:descriptor.writable,value:descriptor.initializer?descriptor.initializer.call(context):void 0});}function _applyDecoratedDescriptor(target,property,decorators,descriptor,context){var desc={};Object['ke'+'ys'](descriptor).forEach(function(key){desc[key]=descriptor[key];});desc.enumerable=!!desc.enumerable;desc.configurable=!!desc.configurable;if('value'in desc||desc.initializer){desc.writable=true;}desc=decorators.slice().reverse().reduce(function(desc,decorator){return decorator(target,property,desc)||desc;},desc);if(context&&desc.initializer!==void 0){desc.value=desc.initializer?desc.initializer.call(context):void 0;desc.initializer=undefined;}if(desc.initializer===void 0){Object['define'+'Property'](target,property,desc);desc=null;}return desc;}function _initializerWarningHelper(descriptor,context){throw new Error('Decorating class property failed. Please ensure that transform-class-properties is enabled.');}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}function _objectWithoutProperties(obj,keys){var target={};for(var i in obj){if(keys.indexOf(i)>=0)continue;if(!Object.prototype.hasOwnProperty.call(obj,i))continue;target[i]=obj[i];}return target;}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}
 
 var RightNavBarButton=void 0;
 var LeftNavBarButton=void 0;
@@ -75,6 +77,8 @@ var dontInheritKeys=[
 'tabBarComponent',
 'modal',
 'drawer',
+'lightbox',
+'overlay',
 'tabs',
 'navigator',
 'children',
@@ -131,7 +135,7 @@ headerStyle:getValue(navigationParams.headerStyle||headerStyle||navigationBarSty
 headerBackImage:navigationParams.backButtonImage||backButtonImage});
 
 if(NavBar){
-res.header=function(data){return _react2.default.createElement(NavBar,_extends({navigation:navigation},state,data,{__source:{fileName:_jsxFileName,lineNumber:134}}));};
+res.header=function(data){return _react2.default.createElement(NavBar,_extends({navigation:navigation},state,data,{__source:{fileName:_jsxFileName,lineNumber:138}}));};
 }
 
 if(panHandlers===null){
@@ -139,7 +143,7 @@ res.gesturesEnabled=false;
 }
 
 if(navigationBarTitleImage){
-res.headerTitle=_react2.default.createElement(_reactNative.Image,{source:navigationBarTitleImage,style:navigationBarTitleImageStyle,__source:{fileName:_jsxFileName,lineNumber:142}});
+res.headerTitle=_react2.default.createElement(_reactNative.Image,{source:navigationBarTitleImage,style:navigationBarTitleImageStyle,__source:{fileName:_jsxFileName,lineNumber:146}});
 }
 
 if(tabBarLabel){
@@ -148,7 +152,7 @@ res.tabBarLabel=tabBarLabel;
 
 if(tabBarIcon||icon){
 var Icon=tabBarIcon||icon;
-res.tabBarIcon=function(data){return _react2.default.createElement(Icon,_extends({},state,data,{__source:{fileName:_jsxFileName,lineNumber:151}}));};
+res.tabBarIcon=function(data){return _react2.default.createElement(Icon,_extends({},state,data,{__source:{fileName:_jsxFileName,lineNumber:155}}));};
 }
 var componentData={};
 
@@ -166,7 +170,7 @@ if(rightButtonImage||rightTitle||params.renderRightButton||onRight||navigationPa
 navigationParams.rightTitle||navigationParams.rightButtonImage||rightButtonTextStyle||
 (drawerImage||drawerIcon)&&drawerPosition==='right'){
 res.headerRight=getValue(navigationParams.right||navigationParams.rightButton||params.renderRightButton,_extends({},
-navigationParams,screenProps))||_react2.default.createElement(RightNavBarButton,_extends({},params,navigationParams,componentData,{__source:{fileName:_jsxFileName,lineNumber:169}}));
+navigationParams,screenProps))||_react2.default.createElement(RightNavBarButton,_extends({},params,navigationParams,componentData,{__source:{fileName:_jsxFileName,lineNumber:173}}));
 }
 
 if(leftButtonImage||backButtonImage||backTitle||leftTitle||params.renderLeftButton||leftButtonTextStyle||
@@ -174,12 +178,12 @@ backButtonTextStyle||onLeft||navigationParams.leftTitle||navigationParams.onLeft
 navigationParams.backButtonImage||navigationParams.backTitle||(drawerImage||drawerIcon)&&drawerPosition!=='right'){
 res.headerLeft=getValue(navigationParams.left||navigationParams.leftButton||params.renderLeftButton,_extends({},params,navigationParams,screenProps))||
 (onLeft&&(leftTitle||navigationParams.leftTitle||leftButtonImage||navigationParams.leftButtonImage)||drawerImage||drawerIcon)&&
-_react2.default.createElement(LeftNavBarButton,_extends({},params,navigationParams,componentData,{__source:{fileName:_jsxFileName,lineNumber:177}}))||(
-init?null:renderBackButton&&renderBackButton(state)||_react2.default.createElement(BackNavBarButton,_extends({},state,{__source:{fileName:_jsxFileName,lineNumber:178}})));
+_react2.default.createElement(LeftNavBarButton,_extends({},params,navigationParams,componentData,{__source:{fileName:_jsxFileName,lineNumber:181}}))||(
+init?null:renderBackButton&&renderBackButton(state)||_react2.default.createElement(BackNavBarButton,_extends({},state,{__source:{fileName:_jsxFileName,lineNumber:182}})));
 }
 
 if(back){
-res.headerLeft=renderBackButton&&renderBackButton(state)||_react2.default.createElement(BackNavBarButton,_extends({},state,{__source:{fileName:_jsxFileName,lineNumber:182}}));
+res.headerLeft=renderBackButton&&renderBackButton(state)||_react2.default.createElement(BackNavBarButton,_extends({},state,{__source:{fileName:_jsxFileName,lineNumber:186}}));
 }
 
 if(hideTabBar){
@@ -218,7 +222,7 @@ Wrapped=(_temp=_class=function(_React$Component){_inherits(Wrapped,_React$Compon
 
 {
 var navigation=this.props.navigation;
-if(this.ref){
+if(this.ref&&navigation.state.routeName){
 store.addRef(originalRouteName(navigation.state.routeName),this.ref);
 }
 }},{key:'componentWillUnmount',value:function componentWillUnmount()
@@ -229,7 +233,7 @@ store.deleteRef(originalRouteName(navigation.state.routeName));
 }},{key:'render',value:function render()
 {var _this2=this;
 var navigation=this.props.navigation;
-return _react2.default.createElement(Component,_extends({ref:function ref(_ref4){return _this2.ref=_ref4;}},this.props,navigation.state.params,{name:navigation.state.routeName,__source:{fileName:_jsxFileName,lineNumber:232}}));
+return _react2.default.createElement(Component,_extends({ref:function ref(_ref4){return _this2.ref=_ref4;}},this.props,navigation.state.params,{name:navigation.state.routeName,__source:{fileName:_jsxFileName,lineNumber:236}}));
 }}]);return Wrapped;}(_react2.default.Component),_class.propTypes={navigation:_propTypes2.default.object},_temp);
 
 return wrapper(Wrapped);
@@ -237,7 +241,7 @@ return wrapper(Wrapped);
 
 
 function StatelessWrapped(_ref5){var navigation=_ref5.navigation,props=_objectWithoutProperties(_ref5,['navigation']);
-return _react2.default.createElement(Component,_extends({},props,{navigation:navigation},navigation.state.params,{name:navigation.state.routeName,__source:{fileName:_jsxFileName,lineNumber:240}}));
+return _react2.default.createElement(Component,_extends({},props,{navigation:navigation},navigation.state.params,{name:navigation.state.routeName,__source:{fileName:_jsxFileName,lineNumber:244}}));
 }
 StatelessWrapped.propTypes={
 navigation:_propTypes2.default.object};
@@ -315,7 +319,7 @@ return null;
 var res={};
 var order=[];var _scene$props=
 scene.props,navigator=_scene$props.navigator,contentComponent=_scene$props.contentComponent,tabBarPosition=_scene$props.tabBarPosition,lazy=_scene$props.lazy,duration=_scene$props.duration,parentProps=_objectWithoutProperties(_scene$props,['navigator','contentComponent','tabBarPosition','lazy','duration']);var
-tabs=parentProps.tabs,modal=parentProps.modal,lightbox=parentProps.lightbox,drawer=parentProps.drawer,tabBarComponent=parentProps.tabBarComponent,transitionConfig=parentProps.transitionConfig;
+tabs=parentProps.tabs,modal=parentProps.modal,lightbox=parentProps.lightbox,overlay=parentProps.overlay,drawer=parentProps.drawer,tabBarComponent=parentProps.tabBarComponent,transitionConfig=parentProps.transitionConfig;
 if(scene.type===_Modal2.default){
 modal=true;
 }else if(scene.type===_Drawer2.default){
@@ -324,6 +328,8 @@ drawer=true;
 lightbox=true;
 }else if(scene.type===_Tabs2.default){
 tabs=true;
+}else if(scene.type===_Overlay2.default){
+overlay=true;
 }
 
 if(duration!==undefined&&!transitionConfig){
@@ -346,7 +352,7 @@ commonProps.drawerImage=commonProps.drawerImage||_menu_burger2.default;
 
 var children=!Array.isArray(parentProps.children)?[parentProps.children]:[].concat.apply([],parentProps.children);
 
-if(!drawer&&!tabs){
+if(!drawer&&!tabs&&!overlay){
 children.push.apply(children,_toConsumableArray(clones));
 }
 
@@ -427,13 +433,16 @@ if(lightbox){
 return(0,_LightboxNavigator2.default)(res,_extends({mode:mode,initialRouteParams:initialRouteParams,initialRouteName:initialRouteName},commonProps,{navigationOptions:createNavigationOptions(commonProps)}));
 }else if(tabs){
 if(!tabBarComponent){
-tabBarComponent=tabBarPosition==='top'?function(props){return _react2.default.createElement(_reactNavigation.TabBarTop,_extends({},props,commonProps,{__source:{fileName:_jsxFileName,lineNumber:430}}));}:
-function(props){return _react2.default.createElement(_reactNavigation.TabBarBottom,_extends({},props,commonProps,{__source:{fileName:_jsxFileName,lineNumber:431}}));};
+tabBarComponent=tabBarPosition==='top'?function(props){return _react2.default.createElement(_reactNavigation.TabBarTop,_extends({},props,commonProps,{__source:{fileName:_jsxFileName,lineNumber:436}}));}:
+function(props){return _react2.default.createElement(_reactNavigation.TabBarBottom,_extends({},props,commonProps,{__source:{fileName:_jsxFileName,lineNumber:437}}));};
 }
 return(0,_reactNavigation.TabNavigator)(res,_extends({lazy:lazy,initialRouteName:initialRouteName,initialRouteParams:initialRouteParams,order:order},commonProps,{
 tabBarOptions:createTabBarOptions(commonProps),navigationOptions:createNavigationOptions(commonProps)}));
 }else if(drawer){
 return(0,_reactNavigation.DrawerNavigator)(res,_extends({initialRouteName:initialRouteName,contentComponent:contentComponent,order:order},commonProps));
+}else if(overlay){
+return(0,_OverlayNavigator2.default)(res,_extends({lazy:lazy,initialRouteName:initialRouteName,initialRouteParams:initialRouteParams,order:order},commonProps,{
+tabBarOptions:createTabBarOptions(commonProps),navigationOptions:createNavigationOptions(commonProps)}));
 }
 return(0,_reactNavigation.StackNavigator)(res,_extends({mode:mode,initialRouteParams:initialRouteParams,initialRouteName:initialRouteName},commonProps,{transitionConfig:transitionConfig,navigationOptions:createNavigationOptions(commonProps)}));
 };this.
diff --git a/src/Overlay.js b/src/Overlay.js
new file mode 100644
index 000000000..cac8b838d
--- /dev/null
+++ b/src/Overlay.js
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2015-present, Pavel Aksonov
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export default () => null;
diff --git a/src/OverlayNavigator.js b/src/OverlayNavigator.js
new file mode 100644
index 000000000..5e60293e5
--- /dev/null
+++ b/src/OverlayNavigator.js
@@ -0,0 +1,50 @@
+/* @flow */
+
+import React from 'react';
+import { createNavigationContainer, createNavigator, TabRouter } from 'react-navigation';
+import { View } from 'react-native';
+
+const OverlayNavigator = (
+  routeConfigs,
+  tabsConfig = {}
+) => {
+  const router = TabRouter(routeConfigs, tabsConfig);
+
+  const navigator = createNavigator(
+    router,
+    routeConfigs,
+    tabsConfig,
+    'react-navigation/STACK'
+  )(({ navigation }) => {
+    const { state, dispatch } = navigation;
+    const { routes } = state;
+
+    // Figure out what to render based on the navigation state and the router:
+    const Component = routeConfigs[tabsConfig.initialRouteName].screen;
+    let initialIndex = 0;
+    for (let i = 0; i < routes.length; i++) {
+      const route = routes[i];
+      if (route.routeName === tabsConfig.initialRouteName) {
+        initialIndex = i;
+      }
+    }
+    const initialRouteName = tabsConfig.initialRouteName || routes[initialIndex].routeName;
+    const overlays = [];
+    for (let i = 0; i < tabsConfig.order.length; i++) {
+      const routeName = tabsConfig.order[i];
+      if (initialRouteName !== routeName) {
+        const Overlay = routeConfigs[routeName].screen;
+        overlays.push(<Overlay key={routeName} navigation={{ dispatch, state }} />);
+      }
+    }
+    const ContentComponent = tabsConfig.contentComponent || View;
+    return (<ContentComponent style={{ flex: 1 }}>
+      <Component navigation={{ dispatch, state: routes[initialIndex] }} />
+      {overlays}
+    </ContentComponent>);
+  });
+
+  return createNavigationContainer(navigator, tabsConfig.containerOptions);
+};
+
+export default OverlayNavigator;
diff --git a/src/index.js b/src/index.js
index 3d8ea58bb..bc45df1a4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,6 +8,7 @@ import Lightbox from './Lightbox';
 import Stack from './Stack';
 import Drawer from './Drawer';
 import Tabs from './Tabs';
+import Overlay from './Overlay';
 
 export {
   ActionConst,
@@ -20,4 +21,5 @@ export {
   Stack,
   Drawer,
   Tabs,
+  Overlay,
 };
diff --git a/src/navigationStore.js b/src/navigationStore.js
index 05256f950..3bfe4b21a 100644
--- a/src/navigationStore.js
+++ b/src/navigationStore.js
@@ -16,6 +16,8 @@ import Modal from './Modal';
 import Lightbox from './Lightbox';
 import Drawer from './Drawer';
 import Tabs from './Tabs';
+import Overlay from './Overlay';
+import OverlayNavigator from './OverlayNavigator';
 
 let RightNavBarButton;
 let LeftNavBarButton;
@@ -75,6 +77,8 @@ const dontInheritKeys = [
   'tabBarComponent',
   'modal',
   'drawer',
+  'lightbox',
+  'overlay',
   'tabs',
   'navigator',
   'children',
@@ -218,7 +222,7 @@ function createWrapper(Component, wrapBy, store: NavigationStore) {
       }
       componentDidMount() {
         const navigation = this.props.navigation;
-        if (this.ref) {
+        if (this.ref && navigation.state.routeName) {
           store.addRef(originalRouteName(navigation.state.routeName), this.ref);
         }
       }
@@ -315,7 +319,7 @@ class NavigationStore {
     const res = {};
     const order = [];
     const { navigator, contentComponent, tabBarPosition, lazy, duration, ...parentProps } = scene.props;
-    let { tabs, modal, lightbox, drawer, tabBarComponent, transitionConfig } = parentProps;
+    let { tabs, modal, lightbox, overlay, drawer, tabBarComponent, transitionConfig } = parentProps;
     if (scene.type === Modal) {
       modal = true;
     } else if (scene.type === Drawer) {
@@ -324,6 +328,8 @@ class NavigationStore {
       lightbox = true;
     } else if (scene.type === Tabs) {
       tabs = true;
+    } else if (scene.type === Overlay) {
+      overlay = true;
     }
 
     if (duration !== undefined && !transitionConfig) {
@@ -346,7 +352,7 @@ class NavigationStore {
 
     const children = !Array.isArray(parentProps.children) ? [parentProps.children] : [].concat.apply([], parentProps.children);
     // add clone scenes
-    if (!drawer && !tabs) {
+    if (!drawer && !tabs && !overlay) {
       children.push(...clones);
     }
     // add all clones
@@ -434,6 +440,9 @@ class NavigationStore {
         tabBarOptions: createTabBarOptions(commonProps), navigationOptions: createNavigationOptions(commonProps) });
     } else if (drawer) {
       return DrawerNavigator(res, { initialRouteName, contentComponent, order, ...commonProps });
+    } else if (overlay) {
+      return OverlayNavigator(res, { lazy, initialRouteName, initialRouteParams, order, ...commonProps,
+        tabBarOptions: createTabBarOptions(commonProps), navigationOptions: createNavigationOptions(commonProps) });
     }
     return StackNavigator(res, { mode, initialRouteParams, initialRouteName, ...commonProps, transitionConfig, navigationOptions: createNavigationOptions(commonProps) });
   };