How to do it...

1. We'll begin by opening App.js and importing the dependencies that we need to build the app:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { FontAwesome, Ionicons } from '@expo/vector-icons';

1. Next, we can add the shell of the application, where we will display the icons:

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
      </View>
    );
  }
}

1. Inside of the View element, let's add two more View elements for holding icons from each icon set:

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.iconRow}>

        </View>
        <View style={styles.iconRow}>

        </View>
      </View>
    );
  }
}

1. Now, let's add the styles for each of our declared elements. As we've seen in previous recipes, the container styles fill the screen with flex: 1 and center the items with alignItems and justifyContent set to center. The iconRow property sets the flexDirection to row so that our icons will be lined up in a row:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  iconRow: {
    flexDirection: 'row',
  },
});

1. Now that the basic structure of our app is in place, let's add our icons. In the first row of icons, we'll use four FontAwesome components to display four icons from the FontAwesome font library. The name property determines which icon should be used, the size property sets the size of the icon in pixels, and the color sets what color the icon should be:

<View style={styles.iconRow}>
  <FontAwesome style={styles.iconPadding} name="glass" size={48} color="green" />
  <FontAwesome style={styles.iconPadding} name="beer" size={48} color="red" />
  <FontAwesome style={styles.iconPadding} name="music" size={48} color="blue" />
  <FontAwesome style={styles.iconPadding} name="taxi" size={48} color="#1CB5AD" />
</View>

1. In the next View element, we'll add icons from the Ionicons font library. As you can see, the Ionicons element takes the same properties as the FontAwesome elements used in the previous step:

<View style={styles.iconRow}>
  <Ionicons style={styles.iconPadding} name="md-pizza" size={48} color="orange" />
  <Ionicons style={styles.iconPadding} name="md-tennisball" size={48} color="maroon" />
  <Ionicons style={styles.iconPadding} name="ios-thunderstorm" size={48} color="purple" />
  <Ionicons style={styles.iconPadding} name="ios-happy" size={48} color="#DF7977" />
</View>

1. The last step in this recipe is to add the remaining style, iconPadding, which just adds some padding to evenly space out each of our icons:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  iconRow: {
    flexDirection: 'row',
  },
  iconPadding: {
    padding: 8,
  }
});

1. That's all it takes! When we check out our app, there will be two rows of icons, each row showcasing icons from FontAwesome and Ionicons respectively: