Merge pull request #26 from taskrabbit/auto_scale_text

Auto scale text in navigation title

Author: bleonard

App/Components/AutoScaleText.js

@@ -0,0 +1,80 @@
+import React from 'react';
+
+import ReactNative, {
+  NativeModules,
+} from 'react-native';
+
+const UIManager = NativeModules.UIManager;
+
+import Text from './Text';
+
+class AutoScaleText extends React.Component {
+  static propTypes = {
+    ...Text.propTypes,
+    maxFontSize: React.PropTypes.number.isRequired,
+    maxHeight: React.PropTypes.number.isRequired,
+    color: React.PropTypes.string,
+    style: React.PropTypes.oneOfType([
+      Text.propTypes.style,
+      React.PropTypes.shape({
+        width: React.PropTypes.number,
+      }),
+    ]).isRequired,
+  };
+
+  static defaultProps = {
+    color: 'black',
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      fontSize: props.maxFontSize,
+      finished: false,
+    };
+
+    this.visible = true;
+  }
+
+  determineFontSize = () => {
+    UIManager.measure(ReactNative.findNodeHandle(this.refs.textView), (x, y, w, h, px, py) => {
+      if (!this.visible) return;
+
+      if (h > this.props.maxHeight) {
+        this.setState({
+          fontSize: this.state.fontSize - 0.5,
+        });
+        this.determineFontSize();
+      }
+      else {
+        this.setState({finished: true});
+      }
+    });
+  };
+
+  componentWillUnmount() {
+    this.visible = false;
+  }
+
+  render() {
+    return (
+      <Text
+        ref='textView'
+        onLayout={this.determineFontSize}
+        {...this.props}
+        style={[
+          this.props.style,
+          {
+            fontSize: this.state.fontSize,
+            color: this.state.finished ? this.props.color : 'transparent',
+          },
+        ]}
+      >
+        {this.props.children}
+      </Text>
+    );
+  }
+}
+
+export default AutoScaleText;

App/Navigation/NavigationBar.js

@@ -41,6 +41,8 @@ var Container = React.createClass({
   }
 });
 
+const routeMapper = new NavigationBarRouteMapper();
+
 var NavigationBar = {
   getInitialState: function() {
     return {};
@@ -120,7 +122,7 @@ var NavigationBar = {
 
     return (
       <Navigator.NavigationBar
-        routeMapper={new NavigationBarRouteMapper()}
+        routeMapper={routeMapper}
         style={styles.navBar}
       />
     );
@@ -131,7 +133,6 @@ var NavigationBar = {
       <View style={styles.appContainer}>
         <Navigator
           ref="navigator"
-          debugOverlay={false}
           renderScene={this.renderScene}
           navBarHidden={this.props.navBarHidden}
           initialRouteStack={this.props.routeStack.path}

App/Navigation/NavigationTitle.js

@@ -1,15 +1,19 @@
 import React from 'react';
 import {
   View,
-  StyleSheet
+  StyleSheet,
+  Dimensions,
+  Platform,
 } from 'react-native';
 
+const { width } = Dimensions.get('window');
+
 import cssVar from '../Lib/cssVar';
 
 import DispatcherListener from '../Mixins/DispatcherListener';
 import AppConstants from '../Constants/AppConstants';
 
-import Text from '../Components/Text';
+import AutoScaleText from '../Components/AutoScaleText';
 
 var NavigationTitle = React.createClass({
   mixins: [DispatcherListener],
@@ -28,24 +32,54 @@ var NavigationTitle = React.createClass({
     }
   },
 
+  getButtonPadding() {
+    const { route } = this.props;
+
+    // for some reason 70 is the magic number for Android
+    if (Platform.OS === 'android') {
+      return 70;
+    }
+    // if navRight is a text return 70
+    if (route.navRight && route.navRight.label) {
+      return 70;
+    }
+    // if navLeft is a text return 70
+    if (route.navLeft && route.navLeft.label) {
+      return 70;
+    }
+
+    if (route.navBack && route.navBack.label) {
+      return 70;
+    }
+
+    return 40;
+  },
+
   render: function() {
     var title = this.state.updatedTitle || this.props.route.title;
     return (
-      <Text style={styles.navBarTitleText}>
+      <AutoScaleText
+        style={[styles.navBarTitleText, {width: width - this.getButtonPadding() * 2}]}
+        allowFontScaling={false}
+        maxFontSize={20}
+        maxHeight={50}
+        color='white'
+      >
         {title}
-      </Text>
+      </AutoScaleText>
     );
   }
 });
 
+const marginVertical = Platform.OS === 'ios' ? 8 : 15;
 var styles = StyleSheet.create({
   navBarTitleText: {
-    fontSize: 20,
     fontFamily: cssVar('fontRegular'),
-    color: 'white',
     fontWeight: '500',
-    marginVertical: 9,
-  }
+    marginVertical: marginVertical,
+    textAlign: 'center',
+    paddingBottom: 6,
+  },
 });
 
 export default NavigationTitle;