Version: Next

react-native-vector-icons

react-native-vector-icons is a very popular library for using SVG icons in react-native, which keeps large static images out of your app while providing crisp icons. Using this library with React Native Navigation is not difficult, but does take a few extra steps..

Using SVG icons in BottomTabs or TopBarButtons#

In the example below we will detail a simple app that pre-loads several icons from react-native-vector-icons to be used in our navigation. The example assumes you have worked through the installation and optional steps to support custom fonts according to the react-native-vector-icons project.

Step 1 - Choose icons and load image source.#

The core issue here is that React Native Navigation wants 'images' for its icons while react-native-vector-icon typically works as a component. However, there is a way around this, by using the getImageSourceSync method exposed by react-native-vector-icons.

You can use this directly when specifying an icon in an react-native-navigation option, or you can group them all together into a central object like so:

import { forEach, keys, map } from 'lodash';

import MyIcon from './MyIcon';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { Icon } from 'react-native-vector-icons/Icon';

const iconsMap: {
  [key: string]: number;
} = {
  book: MyIcon.getImageSourceSync('book', 30, '#888'),
  gear: MyIcon.getImageSourceSync('gear', 30, '#888'),
  'arrow-back': MaterialIcons.getImageSourceSync('arrow-back', 24, '#888'),
  add: MaterialIcons.getImageSourceSync('add', 28, '#888'),
};

export {
  iconsMap,
};

Step 2 - Launching the app.#

We now launch our app in the usual fashion.

import { Navigation } from 'react-native-navigation';

import { iconsMap } from './NavIcons';

Navigation.events().registerAppLaunchedListener(() => {
  registerScreens();
  const firstTab = {
    component: {
      name: 'MyFirstTab',
      options: {
        topBar: {
          title: {
            text: 'First Tab',
          },
          rightButtons: [{
            icon: iconsMap.add,
            id: 'add',
            color: 'blue',
            accessibilityLabel: 'Add item',
          }],
        },
      },
    },
  };
  const secondTab = {
    component: {
      name: 'MySecondTab',
      options: {
        topBar: {
          title: {
            text: 'Second Tab',
          },
        },
      },
    },
  };
  Navigation.setRoot({
    root: {
      bottomTabs: {
        children: [{
          stack: {
            children: [firstTab],
            bottomTab: {
              text: 'First',
              icon: iconsMap.book,
            },
          },
        },
        {
          stack: {
            children: [secondTab],
            bottomTab: {
              text: 'Second',
              icon: iconsMap.gear,
            },
          },
        }],
      },
    },
  });
});

Step 3 - Using NavIcons in components.#

One of the nice features of React Native Navigation is that it is possible to specify the navigation 'options' on each individual component. This still works with NavIcons framework we have setup:

import React from 'react';
import { Text, View } from 'react-native';

import { iconsMap } from './NavIcons';
interface Props {
  // ... my props
}

function ExampleComponent({ }: Props) {
  return (
    <View>
      <Text>An example component</Text>
    </View>
  )
}

ExampleComponent.options = () => {
  return {
    topBar: {
      title: {
        text: 'Example Component',
      },
      leftButtons: [{
        icon: iconsMap.add,
        color: '#888',
        accessibilityLabel: 'Add',
      }],
    },
  };
};

export default ExampleComponent;