react-native-action-bar
An Android-like action bar for react-native
For react-native v0.39+
⚠️ Breaking change for versions < 2.*
The component has been redone so it hasn't much in common.
Check that README for versions lower than 2.*
Example
| iOS | Android |
|---|---|
 |  |
<ActionBar containerStyle={styles.bar} title={'React-native-action-bar Example'} rightText={'Hello'} leftIconName={'menu'} leftBadge={''} onLeftPress={() => console.log('Left!')} onTitlePress={() => console.log('Title!')} rightIcons={[ { name: 'star', badge: '1', onPress: () => console.log('Right Star !'), }, { name: 'phone', badge: '1', onPress: () => console.log('Right Phone !'), isBadgeLeft: true, }, { name: 'plus', onPress: () => console.log('Right Plus !'), }, { name: 'flag', badge: '1', onPress: () => console.log('Right Flag !'), }, { image: require('my-custom-image.png'), // To use a custom image badge: '1', onPress: () => console.log('Right Custom image !'), }, ]} />Are you looking for React-native's ToolbarAndroid?
To allow more customization, I do not use ToolbarAndroid, however, this might be what you are looking for instead of my package.
react-native-action-bar is here to provide a similar top screen bar but that looks the same on Android and iOS.
Properties
| Property Name | Type | Comment |
|---|---|---|
| allowFontScaling | React.PropTypes.bool | If you want to allow font scaling on the title and the right text (false by default) |
| backgroundColor | React.PropTypes.string | The background color of the Bar |
| badgeColor | Badge.propTypes.backgroundColor | The color of all badges |
| badgeTextColor | Badge.propTypes.color | The color of the text of the badges |
| containerStyle | ViewPropTypes.style | Style of the container of the bar (has the backgroundColor) |
| disableShadows | React.PropTypes.bool | If you want the ActionBar to drop a shadow or not (The default is false) |
| disableStatusBarHandling | React.PropTypes.bool | If you want the ActionBar to set the color/style of the StatusBar (The default is false) |
| elevation | React.PropTypes.number | On Android, to 'control' the Shadow dropped by the bar (default is 2) |
| iconContainerStyle | ViewPropTypes.style | See the Icon component (applies to all Icons (left and right) |
| iconImageStyle | Image.propTypes.style | See the Icon component (applies to all Icons (left and right) |
| isLeftBadgeLeft | React.PropTypes.bool | Position of the badge on the left Icon |
| leftBadge | Badge.propTypes.content | Text of the badge on the left Icon ('' is a valid value, it will display an empty badge. undefined is needed to not have the badge displayed) |
| leftIconContainerStyle | Icon.propTypes.containerStyle | See the Icon component |
| leftIconImage | Icon.propTypes.source | An image to use as Icon (require()). Don't use remote images ({ uri: ... }) as it will have bad performance, but I guess you can |
| leftIconImageStyle | Icon.propTypes.imageStyle | See the Icon component |
| leftIconName | Icon.propTypes.name | The name of one of the predefined Icons (see List of predefined Icons) |
| leftTouchableChildStyle | ViewPropTypes.style | The style of the View inside the TouchableWithoutFeedback element for the left Icon |
| leftZoneContentContainerStyle | ViewPropTypes.style | The style of the View around the TouchableWithoutFeedback element for the left Icon |
| onLeftPress | React.PropTypes.func | The function to execute onPress for the left Icon |
| onRightTextPress | React.PropTypes.func | The function to execute onPress for the Text that you can display on the right of the Title |
| onTitlePress | React.PropTypes.func | The function to execute onPress for the Title |
| renderLeftSide | React.PropTypes.func | A function to override the rendering of the part left of the Title |
| renderRightSide | React.PropTypes.func | A function to override the rendering of the part right of the Title |
| rightIconContainerStyle | Icon.propTypes.containerStyle | See the Icon component |
| rightIconImageStyle | Icon.propTypes.imageStyle | See the Icon component |
| rightIcons | React.PropTypes.arrayOf( React.PropTypes.shape({ ...Icon.propTypes, badge: Badge.propTypes.content, onPress: React.PropTypes.func.isRequired, }), ) | See below |
| rightText | React.PropTypes.string | The text to display on the right |
| rightTextStyle | Text.propTypes.style | Style of the text to display on the right |
| rightTouchableChildStyle | ViewPropTypes.style | The style of the View inside the TouchableWithoutFeedback element for all the Icons on the right |
| rightZoneContentContainerStyle | ViewPropTypes.style | The style of the View around all the Icons + Text on the right |
| throttleDelay | React.PropTypes.number | The delay to throttle the presses on the Icons (The default is 750ms) |
| title | React.PropTypes.string | The Text of the Title |
| titleContainerStyle | ViewPropTypes.style | The style of the View containing the Text element for the Title |
| titleStyle | Text.propTypes.style | The style of the Text element for the Title |
rightIcons elements example
{ name: 'phone', badge: '1', onPress: () => console.log('Right Phone !'), isBadgeLeft: true, } Predefined Icons
Right now the following Icons are defined:
back
flag
loading
location
menu
phone
plus
star
star-outline
Example
See an implementation example in the Example folder
