improve TabBar, support initial prop for Routes

Author: Pavlo Aksonov

Example/Example.js

@@ -90,7 +90,7 @@ export default class Example extends React.Component {
                                     <Route name="tab1_2" component={TabView} title="Tab #1_2" />
                                 </Router>
                             </Route>
-                            <Route name="tab2" schema="tab" title="Tab #2" hideNavBar={true}>
+                            <Route name="tab2" schema="tab" title="Tab #2" hideNavBar={true} initial={true}>
                                 <Router onPop={()=>{console.log("onPop is called!"); return true} }>
                                     <Route name="tab2_1" component={TabView} title="Tab #2_1" />
                                     <Route name="tab2_2" component={TabView} title="Tab #2_2" />

Example/package.json

@@ -6,9 +6,9 @@
     "start": "node_modules/react-native/packager/packager.sh"
   },
   "dependencies": {
-    "react-native": "^0.19.0",
+    "react-native": "^0.20.0",
     "react-native-button": "^1.2.1",
-    "react-native-router-flux": "^2.2.7",
+    "react-native-router-flux": "^2.3.0",
     "react-native-modalbox": "^1.3.0",
     "react-redux": "^4.4.0",
     "redux": "^3.3.1"

TabBar.js

@@ -4,67 +4,37 @@ import Tabs from 'react-native-tabs';
 
 import Actions from './Actions';
 export default class TabBar extends React.Component {
-    constructor(props){
-        super(props);
-    }
     onSelect(el){
         if (!Actions[el.props.name]){
             throw new Error("No action is defined for name="+el.props.name+" actions:"+JSON.stringify(Object.keys(Actions)));
         }
-        if (el.props.selected && Actions[el.props.defaultRoute]) {
-          Actions[el.props.defaultRoute]({hideTabBar: el.props.hideTabBar});
-        } else {
-          Actions[el.props.name]({hideTabBar: el.props.hideTabBar});
-        }
-        InteractionManager.runAfterInteractions(() =>
-            this.setState({hideTabBar: el.props.hideTabBar}));
-        return {selected: true};
-    }
-    getChildrenState(selectedRoute){
-        var self = this;
-        let selected = false;
-        var children = [];
-        React.Children.forEach(this.props.children, function(el, index){
-            const schema = self.props.router && self.props.router.schemas[el.props.schema] ? self.props.router.schemas[el.props.schema] : {};
-            let props = {...schema, ...el.props};
-            if (!el.props.name)
-                console.error("No name is defined for element");
-            if (selectedRoute){
-                if (selectedRoute == el.props.name){
-                    props.selected = true;
-                } else {
-                    props.selected = false;
-                }
-            }
-
-            var Icon = props.icon || console.error("No icon class is defined for "+el.name);
-            children.push(<Icon key={el.props.name} {...props}/>);
-            if (props.selected || index === 0){
-                selected = el;
-            }
-        });
-        return {children, hideTabBar: selected.props.hideTabBar};
-    }
-    componentWillMount(){
-        if (!this.props.children){
-            return;
-        }
-        this.state = this.getChildrenState(this.props.selected);
-
-    }
+        Actions[el.props.name]({hideTabBar: el.props.hideTabBar});
 
-    componentWillReceiveProps({selected}){
-        //console.log("TABBAR "+selected);
-        InteractionManager.runAfterInteractions(() =>
-            this.setState(this.getChildrenState(selected)));
     }
     render(){
-        if (this.state.hideTabBar){
+        if (this.props.hideTabBar){
             return <View/>
         }
+        // choose initial route
+        let selected = this.props.selected
+        if (!selected){
+            React.Children.forEach(this.props.children, el=>{
+                if (!selected || el.props.initial){
+                    selected = el.props.name;
+                }
+            });
+        }
         return (
-            <Tabs style={[{backgroundColor:'white'}, this.props.tabBarStyle]} onSelect={this.onSelect.bind(this)} {...this.props}>
-                {this.state.children}
+            <Tabs style={[{backgroundColor:'white'}, this.props.tabBarStyle]} onSelect={this.onSelect.bind(this)} {...this.props} selected={selected}>
+                {React.Children.map(this.props.children, el=>{
+                    const schema = this.props.router && this.props.router.schemas[el.props.schema] ? this.props.router.schemas[el.props.schema] : {};
+                    let props = {...schema, ...el.props};
+                    if (!el.props.name)
+                        console.error("No name is defined for element");
+
+                    var Icon = props.icon || console.error("No icon class is defined for "+el.name);
+                    return <Icon key={el.props.name} {...props}/>;
+                })}
             </Tabs>
         );
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-router-flux",
-  "version": "2.2.7",
+  "version": "2.3.0",
   "description": "React Native Router using Flux architecture",
   "repository": {
     "type": "git",
@@ -36,6 +36,6 @@
   "dependencies": {
     "@exponent/react-native-action-sheet": "^0.1.2",
     "@exponent/react-native-navigator": "^0.3.5",
-    "react-native-tabs": "^0.1.8"
+    "react-native-tabs": "^1.0.2"
   }
 }