react-native-action-bar

An Android-like action bar for react-native

For react-native v0.39+

:warning: 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