React Native - Icons

This lesson is part of a series on React Native.

Step 10 - Expo Vector Icons

• Expo Vector Icons Documenation
• Ionicons Gallery
  • The gallery shows how to use the icons in a web page, not a react native app. But the next code sample shows how to use them in react native

Install vector icons (if the app is running stop it first):

npm install @expo/vector-icons

This is how you make use of the icons:

import {Ionicons} from '@expo/vector-icons'

// in the jsx, declare which icon to use (the name prop) and the size and color
<Ionicons name="checkmark-circle" size={32} color="green" />
<Ionicons name="add-circle-outline" size={40} color="blue" />
<Ionicons name="settings" size={25} color="gray" />

Many of the icons have variations, such as -outline

Update app/index.jsx to look like this:

import { StyleSheet, Text, View } from 'react-native'
import {Link} from 'expo-router'
import {Ionicons} from '@expo/vector-icons'  /////////////// import this
import {Colors} from '../Theme'              /////////////// import this 

const Home = () => {
  return (
    <View>
      <Text>Home</Text>

      // Add an Ionicons element like so:
      <Ionicons size={150} name="balloon-sharp" color={Colors.primary} />
      
      <Link href="/about">About</Link>
      <Link href="/contact">Contact</Link>
      <Link href="/news">News</Link>
      <Link href="/stocks">Stocks</Link>
    </View>
  )
}

export default Home

const styles = StyleSheet.create({})

Using Ionicons in a Tab bar

Update app/stocks/_layout.jsx to look like this:

import { Tabs } from "expo-router";
import {Ionicons} from '@expo/vector-icons'
import { Colors } from "../../Theme";

export default function StocksLayout(){
  return (
    <Tabs screenOptions={{headerShown: true}}>
      <Tabs.Screen 
        name="index" 
        options={{ 
          title: "STOCKS", 
          tabBarIcon: () => <Ionicons name="bar-chart" size={24} color={Colors.primary} />}}/>
      <Tabs.Screen 
        name="nasdaq" 
        options={{ 
          title: "NASDAQ", 
          tabBarIcon: () => <Ionicons name="bar-chart" size={24} color={Colors.primary} />}}/>
      <Tabs.Screen 
        name="nyse" 
        options={{ 
          title: "NYSE", 
          tabBarIcon: () => <Ionicons name="bar-chart" size={24} color={Colors.primary} />}}/>
    </Tabs>
  )
}

Note that we added a tabBarIcon prop to the options object , and set it to a function that returns the Ionicon element.

Run the app to see the icons in the tab bar

You can change the color of the selected tab by adding a (destructured) param and adding the focused property to it. This property will be true if the tab is 'active'. You can use this param to style the icon with a different color based on whether it's true or false (this code is message):

<Tabs.Screen 
  name="index" 
  options={{ 
    title: "STOCKS", 
    tabBarIcon: ({focused}) => 
      <Ionicons name="bar-chart" size={24} color={focused ? Colors.primary : Colors.secondary} />}}/>

You could also swap the variant of the icon with the same approach (getting even messier!):

 <Tabs.Screen 
  name="index" 
  options={{ 
    title: "STOCKS", 
    tabBarIcon: ({focused}) => 
      <Ionicons 
        name={focused ? "bar-chart" : "bar-chart-outline"} 
        size={24} 
        color={focused ? Colors.primary : Colors.secondary} />}}/>