react-native-action-bar v2.0.5

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

<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

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