App.js

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { style } from './assets/style';
import { FontAwesome } from '@expo/vector-icons';
<FontAwesome name="home" size={24} color="black" />

function App() {
  return (
    <View style={style.container}>
      <Text style={style.header}>Menu Utama</Text>

      <View style={style.menuWrapper}>
        <TouchableOpacity style={style.menuItem}>
          <Icon name="home" size={20} color="#000" />
          <Text style={style.menuText}> Beranda</Text>
        </TouchableOpacity>

        <TouchableOpacity style={style.menuItem}>
          <Icon name="user" size={20} color="#000" />
          <Text style={style.menuText}> Profil</Text>
        </TouchableOpacity>

        <TouchableOpacity style={style.menuItem}>
          <Icon name="cog" size={20} color="#000" />
          <Text style={style.menuText}> Pengaturan</Text>
        </TouchableOpacity>

        <TouchableOpacity style={style.menuItem}>
          <Icon name="question-circle" size={20} color="#000" />
          <Text style={style.menuText}> Bantuan</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

export default App;
//============================ Style
import { StyleSheet } from 'react-native';

export const style = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f0f0f0',
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
  menuWrapper: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  menuItem: {
    width: '48%',
    backgroundColor: '#4CAF50',
    padding: 20,
    borderRadius: 10,
    marginBottom: 15,
    alignItems: 'center',
  },
  menuText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '500',
  },
});