Ionicons are not being rendered

Question

I’ve been building an app that uses Ionicon icons. Only when I implement in my app, simply does not render, just appears this rectangle with x crossed:

I have already searched in several forums, I have put some commands to install some things only that the problem persists, I have also followed the documentation of expo/vector-icon in : https://docs.expo.io/guides/icons/ and nothing to fix.

I assumed that it must have something to do with the creation of the project, I did this using expo init and for some reason I must not have imported the vector images, but it is only a hypothese pq just started in React-Active. Has anyone there ever come across this problem? How did you find the solution to this problem????

If you want to know how I am trying to put the icons on my screen, follow the code of the picture screen down here:

import React, { useState, useRef , useEffect} from 'react';
import { View, Text, StyleSheet,Alert } from 'react-native';
import DefaultStyles from '../Constants/default-styles';

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



import NumberContainer from '../components/NumberContainer';
import Card from '../components/Card';
import MainButton from '../components/MainButton';

const generateRandomBetween = (min, max, exclude) => {
  min = Math.ceil(min);
  max = Math.floor(max);
  const rndNum = Math.floor(Math.random() * (max - min)) + min;
  if (rndNum === exclude) {
    return generateRandomBetween(min, max, exclude);
  } else {
    return rndNum;
  }
};

const GameScreen = props => {
  const [currentGuess, setCurrentGuess] = useState(
    generateRandomBetween(1, 100, props.userChoice)
  );
  const  [rounds,setRounds]= useState(0);
  const currentLow = useRef(1);
  const currentHigh = useRef(100);
  const {userChoice,onGameOver}= props;


  useEffect(()=>{

      if(currentGuess == props.userChoice){
        props.onGameOver(rounds);
      }
  },[currentGuess, userChoice, onGameOver]);
  
    const nextGuessHandler=direction=>{
      if((direction === 'lower' && currentGuess < props.userChoice) || 
      (direction ==='greater' && currentGuess>props.userChoice)){
        Alert.alert('Don\'t lie!', 'you know that this is wrong...',[
          {text:'Sorry!', style:'cancel'}
        ]);
        return;

      }
      if(direction ==='lower'){
        currentHigh.current = currentGuess
      }
      else{
        currentLow.current = currentGuess;
      }
      const nextNumber = generateRandomBetween(currentLow.current,currentHigh.current, currentGuess);
      setCurrentGuess(nextNumber);
      setRounds(currentRound=> currentRound +1);

    }


    console.log(DefaultStyles);
  return (
    <View style={styles.screen}>


      <Text  style={DefaultStyles.title}>Opponent's Guess</Text>
      <NumberContainer>{currentGuess}</NumberContainer>
      <Card >
        <View style={styles.buttonContainer}>
        <Ionicons name="downcircle" size={24} color="black" />
          <MainButton   onPress={nextGuessHandler.bind(this,'lower')}>
          <Ionicons name="md-remove" size={24} color="white" />
          </MainButton>
         
          <MainButton   onPress={nextGuessHandler.bind(this,'greater')}>
          
          <Ionicons name="md-checkmark-circle" size={24} color="black" />
          </MainButton>
        </View>
      </Card>
    </View>
  );
};

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    padding: 10,
    alignItems: 'center'
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems:'center',
    marginTop: 20,
    marginHorizontal:-40,
    width: 400,
    maxWidth: '80%'
  },
  button:{
    width: '100%',
    marginHorizontal:5,
    marginVertical:20,
    alignItems:'center'
  }
});

export default GameScreen;

Answer 1

Put at the end of android/app/build.Radle

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf','Ionicons.ttf' ] // Nome dos arquivos de fonte que você deseja copiar
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

After that add this down the import:

import Ionicons from 'react-native-vector-icons/Ionicons'

Ionicons.loadFont();//Esse aqui

Now just wheel again that will work.