react native project, react-native-vector-icons installed, does not display properly, shows "?

[iceycc]

Current behaviour

The installation documentation came step by step, without using Expo

mac pro ： Apple M2 Max

    "react": "18.2.0",
    "react-native": "0.73.6",
    "react-native-paper": "^5.12.3",
    "react-native-safe-area-context": "^4.9.0",
    "react-native-vector-icons": "^10.0.3"

Expected behaviour

How to reproduce?

Preview

What have you tried so far?

Your Environment

software	version
ios	x
android	x
react-native	0.73.6
react-native-paper	5.12.3
node	18.17.0
npm or yarn	yarn
expo sdk	x.x.x

[DevInnothoughts]

I have same issue with DataTable.Pagination.. Please solve this issue...

[seb-zabielski]

Hey @DevInnothoughts @iceycc
Are you sure you have followed all the steps required to install react-native-vector icons?
There are some platform-specific steps. You can read more in the documentation https://github.com/oblador/react-native-vector-icons#installation

[dannydj]

I have the same issue

[seb-zabielski]

@dannydj
Are you using Expo or react native cli?

[dannydj]

@seb-zabielski
I solved with this: #4295

[cristianoaloigiGB]

I have the same issue on iOS physical device. My project is build with vanilla React Native

{
  "name": "GBinWeb",
  "version": "2.0.0",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "android:development": "react-native run-android --mode=development",
    "android:clean": "cd android && gradlew clean && cd ..",
    "ios": "react-native run-ios",
    "ios:iphone16promax": "react-native run-ios --simulator 'iPhone 16 Pro Max'",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest",
    "postinstall": "npx patch-package",
    "version": "react-native-version --never-amend",
    "reset": "node script/resetMac.js"
  },
  "dependencies": {
    "@eva-design/eva": "^2.2.0",
    "@fortawesome/fontawesome-svg-core": "^6.7.2",
    "@fortawesome/free-solid-svg-icons": "^6.7.2",
    "@fortawesome/react-native-fontawesome": "^0.3.2",
    "@gorhom/bottom-sheet": "^5.1.1",
    "@haskkor/react-native-pincode": "^1.22.6",
    "@notifee/react-native": "^9.1.8",
    "@react-native-async-storage/async-storage": "^2.1.1",
    "@react-native-clipboard/clipboard": "^1.16.1",
    "@react-native-community/netinfo": "^11.4.1",
    "@react-native-documents/picker": "^10.1.1",
    "@react-native-documents/viewer": "^1.0.0",
    "@react-native-firebase/app": "^21.12.0",
    "@react-native-firebase/messaging": "^21.12.0",
    "@react-native-vector-icons/fontawesome6": "^12.0.0",
    "@react-native-vector-icons/material-design-icons": "^12.0.0",
    "@react-navigation/bottom-tabs": "^7.2.0",
    "@react-navigation/native": "^7.0.14",
    "@react-navigation/stack": "^7.1.1",
    "@types/react-native-snap-carousel": "^3.8.11",
    "@ui-kitten/components": "^5.3.1",
    "axios": "^1.7.9",
    "crypto-js": "^4.2.0",
    "lodash": "^4.17.21",
    "moment": "^2.30.1",
    "protobufjs": "^7.4.0",
    "react": "18.3.1",
    "react-native": "0.77.1",
    "react-native-base64": "^0.2.1",
    "react-native-biometrics": "^3.0.1",
    "react-native-blob-util": "^0.19.9",
    "react-native-bouncy-checkbox": "^4.1.2",
    "react-native-bouncy-checkbox-group": "^1.0.0",
    "react-native-circular-progress-indicator": "^4.4.2",
    "react-native-config": "^1.5.5",
    "react-native-crypto-js": "^1.0.0",
    "react-native-device-info": "^14.0.4",
    "react-native-dropdown-picker": "^5.4.6",
    "react-native-file-logger": "^0.6.0",
    "react-native-file-viewer": "^2.1.5",
    "react-native-gesture-handler": "^2.23.1",
    "react-native-image-picker": "^8.2.0",
    "react-native-keychain": "^9.2.3",
    "react-native-paper": "^5.14.5",
    "react-native-permissions": "^5.2.6",
    "react-native-pure-jwt": "^3.0.3",
    "react-native-qrcode-svg": "^6.3.15",
    "react-native-reanimated": "^3.17.0",
    "react-native-render-html": "^6.3.4",
    "react-native-safe-area-context": "^5.2.0",
    "react-native-screens": "^4.7.0",
    "react-native-share": "^12.0.9",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-svg": "^15.11.1",
    "react-native-svg-transformer": "^1.5.0",
    "react-native-vector-icons": "^10.2.0",
    "react-native-version-check": "^3.4.7",
    "react-native-vision-camera": "^4.6.4",
    "react-native-webview": "^13.13.2",
    "react-redux": "^9.2.0",
    "redux": "^5.0.1",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^3.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "15.0.1",
    "@react-native-community/cli-platform-android": "15.0.1",
    "@react-native-community/cli-platform-ios": "15.0.1",
    "@react-native/babel-preset": "0.77.1",
    "@react-native/eslint-config": "0.77.1",
    "@react-native/metro-config": "0.77.1",
    "@react-native/typescript-config": "0.77.1",
    "@types/crypto-js": "^4.2.2",
    "@types/jest": "^29.5.13",
    "@types/lodash": "^4.17.16",
    "@types/react": "^18.2.6",
    "@types/react-native-base64": "^0.2.2",
    "@types/react-native-crypto-js": "^1.0.3",
    "@types/react-native-version-check": "^3.4.8",
    "@types/react-test-renderer": "^18.0.0",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-native-url-polyfill": "^2.0.0",
    "react-native-version": "^4.0.0",
    "react-test-renderer": "18.3.1",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

import { ScrollView, StyleSheet, Text, TextInput, View } from 'react-native'
import React, { useEffect, useState } from 'react'
import BaseScreen from '../components/BaseScreen'
import { RootState, useGbDispatch } from '../redux/store/store'
import { AnagraficaClienteFornitore } from '../models/contatti'
import { useSelector } from 'react-redux'
import { Types } from '../redux/actionTypes/login'
import { loadAnagraficaAction, loadOpzioniAction } from '../redux/actions/contatti.actions'
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
import { faSearch } from '@fortawesome/free-solid-svg-icons'
import { Colors } from '../utils/color'
import { Font } from '../utils/font'
import { DataTable } from 'react-native-paper'

const ContattiScreen = () => {
    const dispatch = useGbDispatch();

    const ditta = useSelector((state: RootState) => state.userData.dittaSelezionata);
    const ditte = useSelector((state: RootState) => state.userData.ditte);
    const user = useSelector((state: RootState) => state.userData.loginResponse.user);
    const opzioni = useSelector((state: RootState) => state.contatti.opzioni);

    const [anagrafiche, setAnagrafiche] = useState<AnagraficaClienteFornitore[]>([]);
    const [textFilter, setTextFilter] = useState('');
    const [totaleAnagrafiche, setTotaleAnagrafiche] = useState(0);
    const [page, setPage] = useState(0);
    const [pages, setPages] = useState(1);
    const [to, setTo] = useState(100);
    const [from, setFrom] = useState(1);

    const itemsPerPage = 100;


    // const from = page * itemsPerPage;
    // const to = Math.min((page + 1) * itemsPerPage, anagrafiche.length);

    useEffect(() => {
        loadAnagrafiche();
        loadOpzioni();
    }, [ditta]);

    useEffect(() => {
        setFrom(page * itemsPerPage);
    }, [page]);

    useEffect(() => {
        console.log('to', Math.max((page + 1) * itemsPerPage, anagrafiche.length), (page + 1) * itemsPerPage, anagrafiche.length);
        setTo(Math.max((page + 1) * itemsPerPage, anagrafiche.length));
    }, [anagrafiche])

    useEffect(() => {
        setPages(Math.floor(totaleAnagrafiche / itemsPerPage));
    }, [totaleAnagrafiche])

    const loadAnagrafiche = async () => {
        const dittaSelezionata = ditte.find(d => d.dittaId === ditta);
        if (!dittaSelezionata) return;
        dispatch({ type: Types.IS_LOADING });
        // setPage(1);
        const anaCliForns = await dispatch(loadAnagraficaAction(dittaSelezionata.licenza, dittaSelezionata.dittaId, 1, '', itemsPerPage));
        if (anaCliForns.length > 0) {
            setTotaleAnagrafiche(anaCliForns[0].totaleRighe);
        }
        setAnagrafiche(anaCliForns);
        dispatch({ type: Types.IS_LOADING });
    }

    const loadOpzioni = async () => {
        const dittaSelezionata = ditte.find(d => d.dittaId === ditta);
        if (!dittaSelezionata) return;
        await dispatch(loadOpzioniAction(dittaSelezionata.dittaId));
    }

    const handlePageChange = async (newPage: number) => {
        console.log('newPage', newPage, Math.ceil(anagrafiche.length / totaleAnagrafiche), newPage < 0 || newPage >= Math.ceil(anagrafiche.length / itemsPerPage))
        // if (newPage < 0 || newPage >= Math.ceil(anagrafiche.length / totaleAnagrafiche)) return;
        const dittaSelezionata = ditte.find(d => d.dittaId === ditta);
        if (!dittaSelezionata) return;
        setPage(newPage);
        dispatch({ type: Types.IS_LOADING });
        const anaCliForns = await dispatch(loadAnagraficaAction(dittaSelezionata.licenza, dittaSelezionata.dittaId, newPage, textFilter, itemsPerPage));
        setAnagrafiche(anaCliForns);
        dispatch({ type: Types.IS_LOADING });
    }

    return (
        <BaseScreen>
            <View style={[styles.searchInput, { justifyContent: 'center', alignItems: 'center' }]}>
                <FontAwesomeIcon icon={faSearch} color={Colors.Nero} />
                <TextInput placeholder='Cerca' placeholderTextColor={Colors.Nero}
                    onChangeText={setTextFilter} value={textFilter}
                    style={{ width: '80%', marginLeft: 8, fontFamily: Font.RobotoRegular, color: Colors.Nero }}
                    editable={ditta !== ''} /*onEndEditing={e => handleEndFilterEditing(e.nativeEvent.text)}*/ />
            </View>
            <DataTable style={{ paddingBottom: 10, flex: 1, paddingHorizontal: 10, marginTop: 15 }}>
                <DataTable.Header style={{
                    backgroundColor: '#F8F9FA', alignItems: 'center', borderWidth: 1, borderColor: '#E9ECEF',
                    borderTopRightRadius: 5, borderTopLeftRadius: 5
                }}>
                    <DataTable.Title textStyle={{ color: Colors.Nero, fontFamily: Font.RobotoBold }}>Codice</DataTable.Title>
                    <DataTable.Title textStyle={{ color: Colors.Nero, fontFamily: Font.RobotoBold }} style={{ flex: 3 }}>Rag. Sociale/Cognome</DataTable.Title>
                    <DataTable.Title textStyle={{ color: Colors.Nero, fontFamily: Font.RobotoBold }} style={{ flex: 2 }}>Nome</DataTable.Title>
                </DataTable.Header>

                <ScrollView contentContainerStyle={{ paddingBottom: 10, backgroundColor: Colors.Bianco }}>
                    {anagrafiche.map((item, index) => (
                        <DataTable.Row key={index}>
                            <DataTable.Cell textStyle={{ color: Colors.Nero }}>{item.codCliForn}</DataTable.Cell>
                            <DataTable.Cell style={{ flex: 3 }} textStyle={{ color: Colors.Nero }}>{item.ragSocCognome}</DataTable.Cell>
                            <DataTable.Cell style={{ flex: 2 }} textStyle={{ color: Colors.Nero }}>{item.nome}</DataTable.Cell>
                        </DataTable.Row>
                    ))}
                </ScrollView>
                <DataTable.Pagination
                    page={page}
                    numberOfPages={pages}
                    onPageChange={(newPage) => handlePageChange(newPage)}
                    label={`${from + 1}-${to} di ${totaleAnagrafiche}`}
                    showFastPaginationControls
                    numberOfItemsPerPage={itemsPerPage}
                />
            </DataTable>
        </BaseScreen>
    )
}

export default ContattiScreen

const styles = StyleSheet.create({
    searchInput: {
        flexDirection: 'row',
        alignItems: 'center',
        borderBottomWidth: 1,
        // width: '80%',
        marginHorizontal: 10,
        backgroundColor: 'rgba(249,249,249,0.5)',
        borderRadius: 5,
        height: 50,
    },
})