Added 'titleNumberOfLines' prop to control the truncating of title text

Example/Example.js

@@ -10,6 +10,7 @@ import Home from './components/Home'
 import TabView from './components/TabView'
 import EchoView from './components/EchoView'
 import NavigationDrawer from './components/NavigationDrawer'
+import Title from './components/Title';
 
 class TabIcon extends React.Component {
     render(){
@@ -70,7 +71,10 @@ export default class Example extends React.Component {
                     <Scene key="register2" component={Register} title="Register2" duration={1}/>
                     <Scene key="home" component={Home} title="Replace" type="replace"/>
                     <Scene key="launch" component={Launch} title="Launch" initial={true} />
-                    <Scene key="login" direction="vertical"  >
+                    <Scene key="title">
+                        <Scene key="titlepage" component={Title} title="Hello world!" titleNumberOfLines={1}/>
+                    </Scene>
+                    <Scene key="login" direction="vertical">
                         <Scene key="loginModal" component={Login} title="Login"/>
                         <Scene key="loginModal2" hideNavBar={true} component={Login2} title="Login2" panHandlers={null} duration={1}/>
                     </Scene>

Example/components/Launch.js

@@ -22,6 +22,7 @@ class Launch extends React.Component {
         <Button onPress={Actions.register2}>Go to Register page without animation</Button>
         <Button onPress={()=>Actions.error("Error message")}>Popup error</Button>
         <Button onPress={Actions.tabbar}>Go to TabBar page</Button>
+        <Button onPress={Actions.title}>Go to Title page</Button>
         <Button onPress={Actions.pop}>back</Button>
       </View>
     );

Example/components/Title.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import {View, Text, StyleSheet} from "react-native";
+import Button from "react-native-button";
+import {Actions} from "react-native-router-flux";
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: "#F5FCFF",
+    },
+    welcome: {
+        fontSize: 20,
+        textAlign: "center",
+        margin: 10,
+    },
+    instructions: {
+        textAlign: "center",
+        color: "#333333",
+        marginBottom: 5,
+    },
+});
+
+export default class extends React.Component {
+    constructor() {
+        super();
+        this.title = "Hello world!";
+
+        this.increaseTitleLength = this.increaseTitleLength.bind(this);
+        this.decreaseTitleLength = this.decreaseTitleLength.bind(this);
+        this.setNumberOfLines = this.setNumberOfLines.bind(this);
+        this.unsetNumberOfLines = this.unsetNumberOfLines.bind(this);
+    }
+
+    render(){
+        return (
+            <View style={[styles.container, this.props.style]}>
+                <Text>Title page</Text>
+                <Button onPress={this.increaseTitleLength}>Increase title length</Button>
+                <Button onPress={this.decreaseTitleLength}>Decrease title length</Button>
+                <View style={{ height: 16 }}/>
+                <Button onPress={this.unsetNumberOfLines}>Unset numberOfLines</Button>
+                <Button onPress={()=>this.setNumberOfLines(1)}>Set numberOfLines to 1</Button>
+                <Button onPress={Actions.pop}>Back</Button>
+            </View>
+        );
+    }
+
+    increaseTitleLength() {
+        this.title += "Hello World!";
+
+        Actions.refresh({title: this.title});
+    }
+
+    decreaseTitleLength() {
+        if(this.title.length > 12) {
+            this.title = this.title.slice(0, -12);
+        }
+
+        Actions.refresh({title: this.title});
+    }
+
+    unsetNumberOfLines() {
+        Actions.refresh({titleNumberOfLines: null});
+    }
+
+    setNumberOfLines(numberOfLines) {
+        Actions.refresh({titleNumberOfLines: numberOfLines});
+    }
+}

README.md

@@ -110,4 +110,4 @@ And then:
 + Epic Fail Videos ([iOS](https://itunes.apple.com/us/app/epic-fail-videos-best-fail/id1115219339), [Android](https://play.google.com/store/apps/details?id=com.hazuu.epicfailvideos)) - The best Fail Videos Collection, never miss a laugh with your friends!
 
 ## Support
-Thanks to all who submitted PRs to 2.x release. If you like the component and want to support it, feel free to donate any amount or help with issues.
+Thanks to all who submitted PRs to 2.x release. If you like the component and want to support it, feel free to donate any amount or help with issues.

README2.md

@@ -49,6 +49,7 @@ npm i react-native-router-flux --save
 | hideTabBar | bool | false | hides tab bar for this route (if built-in TabBar component is used as footer for parent Router, check Example)|
 | navigationBarStyle | View style |  | optional style override for the navigation bar |
 | titleStyle | Text style |  | optional style override for the title element |
+| titleNumberOfLines | `number` | optional | Number of lines the title should wrap before truncating with an ellipsis | 
 | renderTitle | Closure | | optional closure to render the title element |
 | barButtonIconStyle | Image style |  | optional style override for icon buttons (e.g. back icon) |
 | leftTitle | string | | optional string to display on the left if the previous route does not provide `renderBackButton` prop. `renderBackButton` > `leftTitle` > <previous route's `title`> |

docs/API_CONFIGURATION.md

@@ -67,6 +67,7 @@
 | getTitle | `function` | optional | Optionally closure to return a value of the title based on state |
 | renderTitle | `function` | optional | Optionally closure to render the title |
 | titleStyle | [`Text style`](https://facebook.github.io/react-native/docs/text.html#style) |  | optional style override for the title element |
+| titleNumberOfLines | `number` | optional | Number of lines the title should wrap before truncating with an ellipsis |
 
 #### Navigation Bar: Back button
 | Property | Type | Default | Description |

src/NavBar.js

@@ -120,6 +120,7 @@ const propTypes = {
   leftButtonIconStyle: Image.propTypes.style,
   getTitle: PropTypes.func,
   titleStyle: Text.propTypes.style,
+  titleNumberOfLines: PropTypes.number,
   position: PropTypes.object,
   navigationBarStyle: View.propTypes.style,
   renderTitle: PropTypes.any,
@@ -324,29 +325,44 @@ class NavBar extends React.Component {
 
   renderTitle(childState, index:number) {
     const title = this.props.getTitle ? this.props.getTitle(childState) : childState.title;
+    const titleNumberOfLines = this.props.titleNumberOfLines;
+    const style = [
+      styles.title,
+      this.props.titleStyle,
+      this.props.navigationState.titleStyle,
+      childState.titleStyle,
+      {
+        opacity: this.props.position.interpolate({
+          inputRange: [index - 1, index, index + 1],
+          outputRange: [0, 1, 0],
+        }),
+        left: this.props.position.interpolate({
+          inputRange: [index - 1, index + 1],
+          outputRange: [200, -200],
+        }),
+        right: this.props.position.interpolate({
+          inputRange: [index - 1, index + 1],
+          outputRange: [-200, 200],
+        }),
+      },
+    ];
+
+    if (Number.isInteger(titleNumberOfLines) && titleNumberOfLines >= 1) {
+      return (
+        <Animated.Text
+          key={childState.key}
+          style={style}
+          numberOfLines={titleNumberOfLines}
+        >
+          {title}
+        </Animated.Text>
+      );
+    }
+
     return (
       <Animated.Text
         key={childState.key}
-        style={[
-          styles.title,
-          this.props.titleStyle,
-          this.props.navigationState.titleStyle,
-          childState.titleStyle,
-          {
-            opacity: this.props.position.interpolate({
-              inputRange: [index - 1, index, index + 1],
-              outputRange: [0, 1, 0],
-            }),
-            left: this.props.position.interpolate({
-              inputRange: [index - 1, index + 1],
-              outputRange: [200, -200],
-            }),
-            right: this.props.position.interpolate({
-              inputRange: [index - 1, index + 1],
-              outputRange: [-200, 200],
-            }),
-          },
-        ]}
+        style={style}
       >
         {title}
       </Animated.Text>