Make it possible to style children

nabn · May 10, 2017 · 4436281 · 4436281
1 parent 098b796
commit 4436281
Showing 1 changed file with 23 additions and 12 deletions.
diff --git a/index.js b/index.js
@@ -59,18 +59,29 @@ class Tabs extends Component {
             });
         }
         return (
-            <View style={[styles.tabbarView, this.props.style, this.state.keyboardUp && styles.hidden]}>
-                {React.Children.map(this.props.children.filter(c=>c),(el)=>
-                    <TouchableOpacity key={el.props.name+"touch"}
-                       testID={el.props.testID}
-                       style={[styles.iconView, this.props.iconStyle, (el.props.name || el.key) == selected ? this.props.selectedIconStyle || el.props.selectedIconStyle || {} : {} ]}
-                       onPress={()=>!self.props.locked && self.onSelect(el)}
-                       onLongPress={()=>self.onSelect(el)}
-                       activeOpacity={el.props.pressOpacity}>
-                         {selected == (el.props.name || el.key) ? React.cloneElement(el, {selected: true, style: [el.props.style, this.props.selectedStyle, el.props.selectedStyle]}) : el}
-                    </TouchableOpacity>
-                )}
-            </View>
+          <View style={[styles.tabbarView, this.props.style, this.state.keyboardUp && styles.hidden]}>
+            {React.Children.map(this.props.children.filter(c=>c),(el)=>
+              <TouchableOpacity key={el.props.key}
+                testID={el.props.testID}
+                style={[ styles.iconView,
+                  this.props.iconStyle,
+                  (el.props.name || el.key) == selected
+                  ? this.props.selectedIconStyle || el.props.selectedIconStyle || {}
+                  : {} ]}
+                  onPress={()=>!self.props.locked && self.onSelect(el)}
+                  onLongPress={()=>self.onSelect(el)}
+                  activeOpacity={el.props.pressOpacity}>
+                  {el.props.children.map(c => (
+                    selected == (el.props.name || el.key)
+                    ? React.cloneElement(c,
+                      { selected: true,
+                        style: [ c.props.style,
+                          this.props.selectedStyle,
+                          c.props.selectedStyle ]})
+                    : c ))}
+                  </TouchableOpacity>
+            )}
+          </View>
         );
     }
 }