Add default style to renderLeftButton and renderRightButton (#1054)

* add default style to renderLeftButton and renderRightButton #994 * fix Example
aksonov · Aug 16, 2016 · 85f4717 · 85f4717
1 parent 0ef1f7a
commit 85f4717
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 20 deletions.
diff --git a/Example/Example.js b/Example/Example.js
@@ -28,19 +28,6 @@ import EchoView from './components/EchoView';
 import NavigationDrawer from './components/NavigationDrawer';
 import Button from 'react-native-button';
 
-const Right = () => (
-  <Text
-    style={{
-      width: 80,
-      height: 37,
-      position: 'absolute',
-      bottom: 4,
-      right: 2,
-      padding: 8,
-    }}
-  >Right</Text>
-);
-
 const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: 'transparent', justifyContent: 'center',
     alignItems: 'center',
@@ -186,7 +173,7 @@ class Example extends Component {
                     key="tab2_1"
                     component={TabView}
                     title="Tab #2_1"
-                    renderRightButton={() => <Right />}
+                    renderRightButton={() => <Text>Right</Text>}
                   />
                   <Scene
                     key="tab2_2"

diff --git a/src/NavBar.js b/src/NavBar.js
@@ -450,14 +450,23 @@ class NavBar extends React.Component {
       selected = selected.children[selected.index];
     }
     const navProps = { ...this.props, ...selected };
-    const renderLeftButton = selected.renderLeftButton ||
-      selected.component.renderLeftButton ||
+
+    const wrapByStyle = (component, wrapStyle) => {
+      if (!component) { return null; }
+      return (props) => <View style={wrapStyle}>{component(props)}</View>;
+    };
+
+    const leftButtonStyle = [styles.leftButton, { alignItems: 'flex-start' }];
+    const rightButtonStyle = [styles.rightButton, { alignItems: 'flex-end' }];
+
+    const renderLeftButton = wrapByStyle(selected.renderLeftButton, leftButtonStyle) ||
+      wrapByStyle(selected.component.renderLeftButton, leftButtonStyle) ||
       this.renderLeftButton;
-    const renderRightButton = selected.renderRightButton ||
-      selected.component.renderRightButton ||
+    const renderRightButton = wrapByStyle(selected.renderRightButton, rightButtonStyle) ||
+      wrapByStyle(selected.component.renderRightButton, rightButtonStyle) ||
       this.renderRightButton;
-    const renderBackButton = selected.renderBackButton ||
-      selected.component.renderBackButton ||
+    const renderBackButton = wrapByStyle(selected.renderBackButton, leftButtonStyle) ||
+      wrapByStyle(selected.component.renderBackButton, leftButtonStyle) ||
       this.renderBackButton;
     const renderTitle = selected.renderTitle ||
       selected.component.renderTitle ||