remove state from this component for simplicity

Author: Pavlo Aksonov

Example/index.ios.js

@@ -16,19 +16,19 @@ var Tabs = require('react-native-tabs');
 class Example extends React.Component {
   constructor(props){
     super(props);
-    this.state = {};
+    this.state = {page:'second'};
   }
   render() {
     var self = this;
     return (
       <View style={styles.container}>
-        <Tabs selected="second" style={{backgroundColor:'white'}}
+        <Tabs selected={this.state.page} style={{backgroundColor:'white'}}
               selectedStyle={{color:'red'}} onSelect={el=>this.setState({page:el.props.name})}>
             <Text name="first">First</Text>
             <Text name="second" selectedIconStyle={{borderTopWidth:2,borderTopColor:'red'}}>Second</Text>
             <Text name="third">Third</Text>
             <Text name="fourth" selectedStyle={{color:'green'}}>Fourth</Text>
-            <Text name="fifth" onSelect={()=>false}>Fifth</Text>
+            <Text name="fifth">Fifth</Text>
         </Tabs>
           <Text style={styles.welcome}>
               Welcome to React Native

Example/package.json

@@ -7,6 +7,6 @@
   },
   "dependencies": {
     "react-native": "^0.20.0",
-    "react-native-tabs": "^1.0.0"
+    "react-native-tabs": "^1.0.1"
   }
 }

README.md

@@ -12,7 +12,7 @@ React Native platform-independent tabs. Could be used for bottom tab bars as wel
 Component just iterates over all its children and makes them touchable ('name' is only required attribute of each child).
 selectedStyle property represents style should be applied for selected tabs. This property could be set for all tabs or for individual tab.
 selectedIconStyle represents style applied for selected tab.
-The same, onSelect handler could be set globally for all tabs or/and for individual tab. If handler returns false, tab will not be changed.
+The same, onSelect handler could be set globally for all tabs or/and for individual tab.
 You can lock tab buttons (require user to use long press to actuate the button) by passing prop {locked: true}.
 
 ## Example
@@ -34,26 +34,26 @@ var Tabs = require('react-native-tabs');
 class Example extends React.Component {
   constructor(props){
     super(props);
-    this.state = {};
+    this.state = {page:'second'};
   }
   render() {
     var self = this;
     return (
       <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          Selected page: {this.state.page}
-        </Text>
-        <Tabs selected="second" style={{backgroundColor:'white'}}
+        <Tabs selected={this.state.page} style={{backgroundColor:'white'}}
               selectedStyle={{color:'red'}} onSelect={el=>this.setState({page:el.props.name})}>
             <Text name="first">First</Text>
-            <Text name="second">Second</Text>
+            <Text name="second" selectedIconStyle={{borderTopWidth:2,borderTopColor:'red'}}>Second</Text>
             <Text name="third">Third</Text>
             <Text name="fourth" selectedStyle={{color:'green'}}>Fourth</Text>
-            <Text name="fifth" onSelect={()=>false}>Fifth</Text>
+            <Text name="fifth">Fifth</Text>
         </Tabs>
+          <Text style={styles.welcome}>
+              Welcome to React Native
+          </Text>
+          <Text style={styles.instructions}>
+              Selected page: {this.state.page}
+          </Text>
       </View>
     );
   }

index.js

@@ -10,48 +10,12 @@ var {
 } = React;
 
 class Tabs extends Component {
-
-    getSelectedElement(props, selected){
-        let result = null;
-        React.Children.forEach(props.children, el => {
-            if (selected == el.props.name || result == null) {
-                result = el;
-            }
-        });
-        return result;
-    }
-
-
-    constructor(props){
-        super(props);
-        this.state = {selected : props.selected};
-        this.onSelect = this.onSelect.bind(this);
-    }
-
-    componentWillMount(){
-        this.onSelect(this.getSelectedElement(this.props, this.props.selected));
-    }
-
-    componentDidUpdate({selected}){
-        // change selected state if selected is new value
-        if (selected && selected != this.props.selected && selected != this.state.selected){
-            this.onSelect(this.getSelectedElement(this.props, selected));
-        }
-    }
-
     onSelect(el){
-        if (el.props.onSelect){
-            if (el.props.onSelect(el)===false){
-                return;
-            }
-        }
-        if (this.props.onSelect){
-            if (this.props.onSelect(el)===false){
-                return;
-            }
+        if (el.props.onSelect) {
+            el.props.onSelect(el);
         }
-        if (this.state.selected != el.props.name){
-            this.setState({selected: el.props.name});
+        if (this.props.onSelect) {
+            this.props.onSelect(el);
         }
     }
 
@@ -61,10 +25,10 @@ class Tabs extends Component {
             <View style={[styles.tabbarView, this.props.style]}>
                 {this.props.children.map((el)=>
                     <TouchableOpacity key={el.props.name+"touch"} 
-                       style={[styles.iconView, this.props.iconStyle, el.props.name == this.state.selected ? this.props.selectedIconStyle || el.props.selectedIconStyle || {} : {} ]}
+                       style={[styles.iconView, this.props.iconStyle, el.props.name == this.props.selected ? this.props.selectedIconStyle || el.props.selectedIconStyle || {} : {} ]}
                        onPress={()=>!self.props.locked && self.onSelect(el)}
                        onLongPress={()=>self.props.locked && self.onSelect(el)}>
-                         {self.state.selected == el.props.name ? React.cloneElement(el, {style: {...el.props.style, ...this.props.selectedStyle, ...el.props.selectedStyle}}) : el}
+                         {self.props.selected == el.props.name ? React.cloneElement(el, {style: {...el.props.style, ...this.props.selectedStyle, ...el.props.selectedStyle}}) : el}
                     </TouchableOpacity>
                 )}
             </View>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-tabs",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "React Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons)",
   "main": "index.js",
   "scripts": {