Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
wants to merge 12 commits into from
Closed

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
23ace30
Added 'titleNumberOfLine' prop to control the truncating of title text
andrenanninga May 13, 2016
65439d1
Updated navbar to check for number isnt of just falsy value
andrenanninga May 17, 2016
3a141cd
ensured all lines of code are less than 100 chars
andrenanninga May 18, 2016
fc84301
removed 'Integer.isNumber' and added falsy check for 'titleNumerOfLines'
andrenanninga May 18, 2016
9669bbf
added example for itleNumberOfLines prop
andrenanninga May 25, 2016
e5ff803
improved handling of invalid or undefined itleNumberOfProps attribute
andrenanninga May 25, 2016
27ec98d
fixed linting issues
andrenanninga May 25, 2016
6f288c5
merge
andrenanninga May 25, 2016
6b4a3cf
added itleNumberOfLines to API_CONFIGURATION
andrenanninga May 25, 2016
a4ff35b
remove console.log
andrenanninga May 25, 2016
cf0c730
improved attribute addition for 'numberOfLines' in navbar
andrenanninga May 30, 2016
a0295bb
merge
andrenanninga May 30, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,7 @@ class App extends React.Component {
| 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** |
| backTitle | `string` | | optional string to display with back button |
| renderBackButton | `function` | | optional closure to render back text or button if this route happens to be the previous route |
Expand Down
1 change: 1 addition & 0 deletions README2.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`> |
Expand Down
3 changes: 3 additions & 0 deletions src/NavBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ const propTypes = {
leftButtonIconStyle: PropTypes.string,
getTitle: PropTypes.func,
titleStyle: PropTypes.object,
titleNumberOfLines: PropTypes.number,
position: PropTypes.object,
navigationBarStyle: PropTypes.object,
renderTitle: PropTypes.any,
Expand Down Expand Up @@ -324,9 +325,11 @@ class NavBar extends React.Component {

renderTitle(childState, index:number) {
const title = this.props.getTitle ? this.props.getTitle(childState) : childState.title;
const numberOfLines = this.props.titleNumberOfLines ? this.props.titleNumberOfLines : -1;
Copy link
Collaborator

@charpeni charpeni May 13, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In Javascript false == 0, so if this.props.titleNumberofLines is defined to 0, it will be defaulted to -1 by this line.

In case that's what you want, I suggest this defaulting instead :

const numberOfLines = this.props.titleNumberOfLines || -1;

Otherwise :

const numberOfLines = Number.isInteger(this.props.titleNumberOfLines) ? this.props.titleNumberOfLines : -1;

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nicely spotted, I checked it out and when numberOfLines is set to 0 no text will be shown in the header. When set to -1 it will just ignore the numberOfLines property.

Using Number.isInteger is cleaner imo but I don't have any strong preference for either.

return (
<Animated.Text
key={childState.key}
numberOfLines={numberOfLines}
style={[
styles.title,
this.props.titleStyle,
Expand Down