Icon.ToolbarAndroid Example – React Native

Note this tutorial is not for projects created with Expo Framework. At the time of the writing of this article there are some problems with react-native-vector-icons and latest expo version. Learn how to create a React Native application without expo here.

If you are interested in a toolbar using an Expo Project see this

Creating the project for our Icon.ToolbarAndroid example

Let’s create a new React Native project.

react-native init toolbar

Go inside the newly created folder (toolbar) and type this to install the react-native-vector-icons library. We are using --save flag to add this library to our package.json. Otherwise, it will install it in our node_modules folder but next time we will do npm install it won’t download it automatically.

npm install --save react-native-vector-icons

Last but not least we need to link this library before using it. Read more about it here.

react-native link

Coding our Icon.ToolbarAndroid example

The react-native-vector-icons’ Icon.ToolbarAndroid is just a wrapper over the default ToolbarAndroid component. But instead of using the default one and loading icons ourselves we can use the ones provided in react-native-vector-icons and just specify the icon name in the props. Leave the library worry about the rest :).

import React, {Component} from 'react';
import {StyleSheet, View, Text, StatusBar} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

export default class App extends Component<Props> {
  render() {
    return (
      <View>
		<StatusBar backgroundColor="#c62726" barStyle="light-content"/>
        <Icon.ToolbarAndroid style={styles.toolbar} title="superglobals.net" titleColor="white"
          navIconName="md-menu"
          actions={[
            { title: 'Settings', iconName: 'md-save', iconSize: 30, show: 'always' },
            { title: 'About', iconName: 'md-help', iconSize:30, show: 'never' },
          ]}
          overflowIconName="md-more" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  toolbar: {
    backgroundColor: '#db4b3f',
    height: 56
  }
});

Watch how simply we just added the icon name to the props like “md-menu” or “md-save”. For example I used the Ionicons package but react-native-vector-icons has many more.
You can check here other icon names. Don’t forget to set a style that specifies the toolbar size otherwise it might not be displayed.

I also added a StatusBar to make it look prettier but it’s not necessary. End result:
Icon.ToolbarAndroid example

FacebookTwitterLinkedin