Tabbar Item onPress

Example/Example.js

@@ -4,6 +4,7 @@ import Launch from './components/Launch'
 import Register from './components/Register'
 import Login from './components/Login'
 import Login2 from './components/Login2'
+import Login3 from './components/Login3'
 import {Scene, Reducer, Router, Switch, TabBar, Modal, Schema, Actions} from 'react-native-router-flux'
 import Error from './components/Error'
 import Home from './components/Home'
@@ -108,6 +109,7 @@ export default class Example extends React.Component {
                     <Scene key="login" direction="vertical"  >
                         <Scene key="loginModal" direction="vertical" component={Login} title="Login"/>
                         <Scene key="loginModal2" hideNavBar={true} component={Login2} title="Login2" panHandlers={null} duration={1}/>
+                        <Scene key="loginModal3" hideNavBar={true} component={Login3} title="Login3" panHandlers={null} duration={1}/>
                     </Scene>
                     <Scene key="tabbar" component={NavigationDrawer}>
                         <Scene key="main" tabs={true} >
@@ -117,7 +119,7 @@ export default class Example extends React.Component {
                             </Scene>
                             <Scene key="tab2" initial={true} title="Tab #2" icon={TabIcon}>
                                 <Scene key="tab2_1" component={TabView} title="Tab #2_1" renderRightButton={()=><Right/>} />
-                                <Scene key="tab2_2" component={TabView} title="Tab #2_2" onLeft={()=>alert("Left button!")} leftTitle="Left" duration={1} panHandlers={null}/>
+                                <Scene key="tab2_2" component={TabView} title="Tab #2_2" hideBackImage onBack={()=>alert("Left button!")} backTitle="Left" duration={1} panHandlers={null}/>
                             </Scene>
                             <Scene key="tab3" component={TabView} title="Tab #3" hideTabBar={true} icon={TabIcon}/>
                             <Scene key="tab4" component={TabView} title="Tab #4" hideNavBar={true} icon={TabIcon}/>

Example/components/Login2.js

@@ -12,14 +12,13 @@ const styles = StyleSheet.create({
     },
 });
 
-
 export default class extends React.Component {
     render(){
-
         return (
             <View style={styles.container}>
                 <Text>Login2 page: {this.props.data}</Text>
                 <Button onPress={Actions.pop}>Back</Button>
+                <Button onPress={Actions.loginModal3}>Login 3</Button>
             </View>
         );
     }

Example/components/Login3.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import {View, Text, StyleSheet} from "react-native";
+import Button from "react-native-button";
+import {Actions} from "react-native-router-flux";
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: "#F5FCFF",
+    },
+});
+
+const popToRoot = () => {
+  Actions.popTo("root");
+}
+
+const popToLogin1 = () => {
+  Actions.popTo("loginModal");
+}
+
+const popToLogin2 = () => {
+  Actions.popTo("loginModal2");
+}
+
+export default class extends React.Component {
+    render(){
+        return (
+            <View style={styles.container}>
+                <Text>Login2 page: {this.props.data}</Text>
+                <Button onPress={Actions.pop}>Back</Button>
+                <Button onPress={popToLogin1}>To Login</Button>
+                <Button onPress={popToLogin2}>To Login2</Button>
+                <Button onPress={popToRoot}>To Root</Button>
+            </View>
+        );
+    }
+}

Example/components/NavigationDrawer.js

@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react';
 import Drawer from 'react-native-drawer';
-import { DefaultRenderer } from 'react-native-router-flux';
+import { DefaultRenderer, Actions } from 'react-native-router-flux';
 
 import TabView from './TabView';
 
@@ -10,11 +10,14 @@ const propTypes = {
 
 class NavigationDrawer extends React.Component {
   render() {
-    const children = this.props.navigationState.children;
+    const state = this.props.navigationState;
+    const children = state.children;
     return (
       <Drawer
         ref="navigation"
         type="displace"
+        onOpen={() => Actions.refresh({ key: state.key, open: true })}
+        onClose={() => Actions.refresh({ key: state.key, open: false })}
         content={<TabView />}
         tapToClose
         openDrawerOffset={0.2}

Example/package.json

@@ -7,11 +7,11 @@
     "sync-rnrf": "rm -rf ./node_modules/react-native-router-flux; sane '/usr/bin/rsync -v -a --exclude .git --exclude Example --exclude node_modules ../ ./node_modules/react-native-router-flux/' .. --glob='{**/*.json,**/*.js}'"
   },
   "dependencies": {
-    "react": "15.0.2",
-    "react-native": "0.26.x",
+    "clamp": "^1.0.1",
+    "react": "^15.1.0",
+    "react-native": "^0.27.0",
     "react-native-button": "github:ide/react-native-button",
     "react-native-drawer": "^2.2.2",
-    "react-native-modalbox": "^1.3.3",
     "react-native-router-flux": "file:../"
   },
   "devDependencies": {

ISSUE_TEMPLATE.md

@@ -1,5 +1,5 @@
 ### Version
-Tell us which versions you are using (react native 0.26 is required for v3): 
+Tell us which versions you are using: 
 
 - react-native-router-flux v3.?.?
 - react-native v0.?.?

README.md

@@ -1,4 +1,4 @@
-# React Native Router [![react-native-router-flux](http://img.shields.io/npm/dm/react-native-router-flux.svg)](https://www.npmjs.org/package/react-native-router-flux) [![Join the chat at https://gitter.im/aksonov/react-native-router-flux](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/aksonov/react-native-router-flux?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![Codacy Badge](https://api.codacy.com/project/badge/grade/c6d869e2367a4fb491efc9de228c5ac6)](https://www.codacy.com/app/aksonov-github/react-native-router-flux) [![npm version](https://badge.fury.io/js/react-native-router-flux.svg)](http://badge.fury.io/js/react-native-router-flux)
+# React Native Router [![Join the chat at https://gitter.im/aksonov/react-native-router-flux](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/aksonov/react-native-router-flux?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![Codacy Badge](https://api.codacy.com/project/badge/grade/c6d869e2367a4fb491efc9de228c5ac6)](https://www.codacy.com/app/aksonov-github/react-native-router-flux) [![npm version](https://badge.fury.io/js/react-native-router-flux.svg)](http://badge.fury.io/js/react-native-router-flux)
 
 Router for React Native based on new React Native Navigation API.
 
@@ -28,7 +28,7 @@ Router for React Native based on new React Native Navigation API.
 
 - Define scene transitions in one central location
 - Without having to pass navigator objects around, and allow you to
-- Call transitions anywhere in your code with a simple syntax (e.g. `Actions.login()`).
+- Call transitions anywhere in your code with a simple syntax (e.g. `Actions.login({username, password})` or `Actions.profile({profile})` or even `Actions.profile(123)` - all params will be part of `this.props` for given Scene component).
 
 ### New Features and Highlights
 
@@ -44,7 +44,7 @@ Router for React Native based on new React Native Navigation API.
 
 - **Bring Your Own Reducer** for navigation state.
 
-- **Reset History Stack** - The new `reset` Action for clearing the history stack and eliminates the navbar back button.
+- **Reset History Stack** - The new [`reset`](docs/API_CONFIGURATION.md#scene)type for clearing the history stack and eliminating the navbar back button.
 
 - **More Powerful State Control** - Support for having different states while on the same screen. For example, "View My Account" could allow in-place editing of fields and "Save", "Cancel" navigation bar buttons should appear.
 
@@ -54,14 +54,9 @@ Check out the [mini-tutorial](docs/MINI_TUTORIAL.md) for a quick walkthrough of
 
 ## Supported configurations
 
-Before instaling please refer to the following table for supported react native series
-
-| React Native - Series | React Native Router Flux - Series | Notes |
-| --- | --- | --- |
-| v0.22.x | v3.22.x |  |
-| v0.23.x,  v0.24.x & v0.25.x | **Not supported** | Please refer to [#636](https://github.com/aksonov/react-native-router-flux/issues/636) for details   |
-| v0.26.x | v3.26.x |  |
-| v0.27.x *Release Candidate* | TBD | Work in progress, currently not supported   |
+While ExperimentalNavigation API is not stable, RNRF uses separated fork of ExperimentalNavigation API to avoid dependency from React Native version.
+So 3.30 version of RNRF doesn't depend from React Native version, but from that fork (now it is based on 0.26 API).
+You could use this component with RN0.26+
 
 ## Installation
 ```

docs/API_CONFIGURATION.md

@@ -67,6 +67,7 @@
 | getTitle | `function` | optional | Optionally closure to return a value of the title based on state |
 | renderTitle | `function` | optional | Optionally closure to render the title |
 | titleStyle | [`Text style`](https://facebook.github.io/react-native/docs/text.html#style) |  | optional style override for the title element |
+| titleOpacity | `string` | optional | Set opacity for the title in navigation bar |
 
 #### Navigation Bar: Back button
 | Property | Type | Default | Description |
@@ -75,6 +76,8 @@
 | renderBackButton | `function` | | optional closure to render back text or button if this route happens to be the previous route |
 | backButtonImage | [`Image source`](https://facebook.github.io/react-native/docs/image.html#source) | `'./back_chevron.png'` | Simple way to override the back button in the navBar |
 | backButtonTextStyle | [`Text style`](https://facebook.github.io/react-native/docs/text.html#style) | | optional style override for the back title element |
+| hideBackImage | `boolean` | false | no default back button image will be displayed |
+| onBack | `function` | Actions.pop | actions for back button |
 
 #### Navigation Bar: Left button
 | Property | Type | Default | Description |

docs/CHANGELOG.md

@@ -1,8 +1,12 @@
 # Change log
+- 3.26.22 Pass DefaultRenderer props to underlying scene component
+- 3.26.21 Added onBack, hideBackImage properties
+- 3.26.20 Support for 'modifier' functions inside Refresh actions, like `Actions.refresh({ key: 'drawer', open: value=>!value })`
+- 3.26.0 Support for React Native 0.26
 - 3.22.20 fix more ESLint errors, fix passing leftButtonStyle property for back button
 - 3.22.18 fix some ESLint errors and ignore pop for root scene
 - 3.22.17 allow jump & push together - now you could call Actions.tab2_2() (`tab2_2` is next scene after `tab2`) even if `tab2` is not active
 - 3.22.16 simplified syntax for sub-states
 - 3.22.15 introduces support for different states inside the same screen.
 - 3.22.10 simplifies customization of own NavBar. From now you could import built-in NavBar from the component and customize it. You could set it globally to all scenes by setting `navBar` property for `Router` component.
-For all other scenes you may pass rightButton, leftButton for custom buttons or rightTitle & onRight, leftTitle & onLeft for text buttons.
+For all other scenes you may pass rightButton, leftButton for custom buttons or rightTitle & onRight, leftTitle & onLeft for text buttons.

docs/OTHER_INFO.md

@@ -52,20 +52,25 @@ module.exports = <Scene key="tabbar" tabs={true}>
 ```
 
 ## Drawer (side menu) integration
-Example of Drawer custom renderer based on react-native-drawer. Note that the build-in NavBar component supports toggling of drawer. The Drawer implementation just needs to have a function: toggle();
+Example of Drawer custom renderer based on react-native-drawer. Note that the build-in NavBar component supports toggling of drawer. The Drawer implementation just needs to have a function: toggle()
+With DefaultRenderer you may build own drawer 'renderer' that transforms current navigation state into drawer. Drawer could check own state (open/close) from navigation state:
 
 ```jsx
 import React from 'react-native';
 import Drawer from 'react-native-drawer';
 import SideMenu from './SideMenu';
-import {DefaultRenderer} from 'react-native-router-flux';
+import {Actions, DefaultRenderer} from 'react-native-router-flux';
 
 export default class extends Component {
     render(){
-        const children = this.props.navigationState.children;
+        const state = this.props.navigationState;
+        const children = state.children;
         return (
             <Drawer
                 ref="navigation"
+                open={state.open}
+                onOpen={()=>Actions.refresh({key:state.key, open: true})
+                onClose={()=>Actions.refresh({key:state.key, open: false})
                 type="displace"
                 content={<TabView />}
                 tapToClose={true}
@@ -82,12 +87,14 @@ export default class extends Component {
 }
 
 /// then wrap your tabs scene with Drawer:
-            <Scene key="drawer" component={Drawer}>
+            <Scene key="drawer" component={Drawer} open={false} >
                 <Scene key="main" tabs={true} >
                         ....
                 </Scene>
             </Scene>
 
+// then you could open/hide/toggle drawer anywhere using 'refresh' modifiers:
+          Actions.refresh({key: 'drawer', open: value => !value };
 ```
 ## Sub-scenes support
 You could create 'sub-scene' actions by putting them as children for needed 'base' scene without `component` prop and call such action anywhere - 'base' Scene will be updated accordingly.

index.d.ts

@@ -18,7 +18,7 @@ declare namespace RNRF {
     /**
      * Set to true if this is the initial scene
      */
-    initial: boolean,
+    initial?: boolean,
     /**
      * Defines how the new screen is added to the navigator stack. One of push, jump, replace, reset. If parent container is tabbar (tabs=true), jump will be automatically set.
      */
@@ -196,7 +196,10 @@ declare namespace RNRF {
      * optional style override for the right title element
      */
     rightButtonTextStyle?: React.TextStyle,
-
+    /**
+     * optional wrappert
+     */
+    wrapBy?: ()=>any,
   }
 
   /**
@@ -212,7 +215,47 @@ declare namespace RNRF {
     reducer?: Function,
     createReducer?: Function,
     scenes?: any,
-    getSceneStyle?: Function
+    getSceneStyle?: Function,
+    /**
+     * optional Scene's props that can be used in Router
+     */
+    type?: 'push' | 'jump' | string,
+    clone?: boolean,
+    passProps?: boolean,
+    duration?: number,
+    direction?: 'vertical' | 'horizontal',
+    applyAnimation?: Function,
+    sceneStyle?: React.ViewStyle,
+    getSceneStyle?: Function,
+    tabs?: boolean,
+    tabBarStyle?: React.ViewStyle,
+    hideTabBar?: boolean,
+    hideNavBar?: boolean,
+    navigationBarStyle?: React.ViewStyle,
+    navBar?: React.ReactNode,
+    drawerImage?: React.Image,
+    title?: string,
+    getTitle?: Function,
+    renderTitle?: Function,
+    titleStyle?: React.TextStyle,
+    backTitle?: string,
+    renderBackButton?: Function,
+    backButtonImage?: React.Image,
+    backButtonTextStyle?: React.TextStyle,
+    leftTitle?: string,
+    renderLeftButton?: Function,
+    onLeft?: Function,
+    leftButtonImage?: React.Image,
+    leftButtonIconStyle?: React.ViewStyle,
+    leftButtonStyle?: React.ViewStyle,
+    leftButtonTextStyle?: React.TextStyle,
+    rightTitle?: string,
+    renderRightButton?: Function,
+    onRight?: Function,
+    rightButtonImage?: React.Image,
+    rightButtonIconStyle?: React.ViewStyle,
+    rightButtonStyle?: React.ViewStyle,
+    rightButtonTextStyle?: React.TextStyle
   }
   export class Router extends React.Component<RouterProps, {}>{ }
 
@@ -226,7 +269,7 @@ declare namespace RNRF {
   type props = Object;
 
   interface RNRFActions {
-    pop(props: props): void,
+    pop(props?: props): void,
     jump(props: props): void,
     refresh(props: props): void,
     focus(props: props): void,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-router-flux",
-  "version": "3.26.16",
+  "version": "3.30.0",
   "description": "React Native Router using Flux architecture",
   "repository": {
     "type": "git",
@@ -37,6 +37,7 @@
     }
   ],
   "dependencies": {
+    "react-native-experimental-navigation": "0.26.x",
     "react-native-tabs": "1.0.7",
     "react-static-container": "1.0.1"
   },