Working with Custom Fonts and Icons

// 1. Add font files to your project
// Place font files in: assets/fonts/

// 2. Update your app.json (for Expo projects)
{
  "expo": {
    "fonts": [
      "assets/fonts/MyCustomFont-Regular.ttf",
      "assets/fonts/MyCustomFont-Bold.ttf"
    ]
  }
}

// 3. For bare React Native projects, update Info.plist (iOS)
<key>UIAppFonts</key>
<array>
  <string>assets/fonts/MyCustomFont-Regular.ttf</string>
  <string>assets/fonts/MyCustomFont-Bold.ttf</string>
</array>

// 4. Use the font in your component
import { Text } from 'react-native';

<Text style={{ fontFamily: 'MyCustomFont-Regular' }}>
  This text uses a custom font
</Text>

import { Font } from 'expo-font';
import { useEffect, useState } from 'react';

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  useEffect(() => {
    loadFonts();
  }, []);

  const loadFonts = async () => {
    await Font.loadAsync({
      'custom-font': require('./assets/fonts/CustomFont.ttf'),
    });
    setFontsLoaded(true);
  };

  if (!fontsLoaded) return <AppLoading />;

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontFamily: 'custom-font' }}>Hello World!</Text>
    </View>
  );
}

{'import React from &#x27;react&#x27;;\nimport { Text, StyleSheet } from &#x27;react-native&#x27;;\n\nconst CustomFontText = () => {\n  return (\n    <Text style={styles.customFont}>\n      Hello, Custom Font!\n    </Text>\n  );\n};\n\nconst styles = StyleSheet.create({\n  customFont: {\n    fontFamily: &#x27;Roboto&#x27;,\n    fontSize: 18,\n    fontWeight: &#x27;bold&#x27;\n  }\n});\n\nexport default CustomFontText;'}

npm install react-native-vector-icons

import Icon from 'react-native-vector-icons/MaterialIcons';

<Icon name="home" size={30} color="#000" />

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

const CustomIcon = ({ name, size = 24, color = '#000' }) => {
  return (
    <View style={{ width: size, height: size }}>
      <Text style={{ fontSize: size, color }}>{name}</Text>
    </View>
  );
};

export default CustomIcon;`}

{`import React from 'react';
import { View } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

const IconExample = () => {
  return (
    <View style={{ flexDirection: 'row', padding: 10 }}>
      <Icon name="home" size={30} color="#000" />
      <Icon name="favorite" size={30} color="#f00" />
      <Icon name="settings" size={30} color="#00f" />
    </View>
  );
};

export default IconExample;`}

<Icon
  name="home"
  color="#007AFF"
  size={30}
  style={{
    margin: 10,
  }}
/>

<Icon
  name="heart"
  color="red"
  size={24}
/>

import { Button } from 'react-native-elements';
import Icon from 'react-native-vector-icons/MaterialIcons';

<Button
  title="Home"
  icon={
    <Icon
      name="home"
      size={20}
      color="white"
    />
  }
  iconRight
/>

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/MaterialIcons';

const Tab = createBottomTabNavigator();

<Tab.Navigator
  screenOptions={({ route }) => ({
    tabBarIcon: ({ focused, color, size }) => {
      let iconName;
      if (route.name === 'Home') {
        iconName = focused ? 'home' : 'home-outline';
      } else if (route.name === 'Profile') {
        iconName = focused ? 'person' : 'person-outline';
      }
      return <Icon name={iconName} size={size} color={color} />;
    },
  })}
>
  <Tab.Screen name="Home" component={HomeScreen} />
  <Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>

// Install react-native-vector-icons
npm install react-native-vector-icons

// For iOS, run:
cd ios && pod install

// For Android, no additional setup needed

import Icon from 'react-native-vector-icons/FontAwesome';

const MyComponent = () => {
  return (
    <View>
      <Icon name="heart" size={30} color="#f00" />
      <Icon name="star" size={25} color="#ff0" />
    </View>
  );
};

import Icon from 'react-native-vector-icons/MaterialIcons';

const CustomIcon = () => {
  return (
    <Icon
      name="favorite"
      size={40}
      color="#ff5722"
      onPress={() => console.log('Favorite tapped')}
    />
  );
};

import { Font } from 'expo-font';
import { useEffect, useState } from 'react';

const App = () => {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  useEffect(() => {
    const loadFonts = async () => {
      await Font.loadAsync({
        'Roboto-Bold': require('./assets/fonts/Roboto-Bold.ttf'),
        'Roboto-Regular': require('./assets/fonts/Roboto-Regular.ttf'),
      });
      setFontsLoaded(true);
    };

    loadFonts();
  }, []);

  if (!fontsLoaded) return <Text>Loading fonts...</Text>;
  return <Text style={{ fontFamily: 'Roboto-Bold' }}>Hello World</Text>;
};