Issue with Displaying Correct Icons in React Native using @expo/vector-icons, react-native-vector-icons and native base

Question

I'm facing a problem with displaying the correct icons in my React Native application. I have previously used the @expo/vector-icons package, and the icons were displayed correctly. However, in my new code, I'm using the react-native-vector-icons package, and the icons are not being rendered properly. Instead, they appear as symbols of an unknown language.

//package.json

"dependencies": {
"@expo/vector-icons": "^13.0.0",
"@react-aria/ssr": "^3.7.0",
"@react-native-async-storage/async-storage": "1.18.2",
"@react-native-community/masked-view": "^0.1.11",
"@react-navigation/native": "^6.1.7",
"@react-navigation/native-stack": "^6.9.13",
"@reduxjs/toolkit": "^1.9.5",
"expo": "^49.0.2",
"moment": "^2.29.4",
"native-base": "^3.4.28",
"react": "18.2.0",
"react-native": "^0.72.3",
"react-native-elements": "^3.4.3",
"react-native-extra-dimensions-android": "^1.2.5",
"react-native-gesture-handler": "^2.12.0",
"react-native-image-crop-picker": "^0.40.0",
"react-native-ionicons": "^4.6.5",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-reanimated": "~3.3.0",
"react-native-safe-area-context": "4.6.3",
"react-native-screens": "^3.22.1",
"react-native-svg": "13.9.0",
"react-native-uuid": "^2.0.1",
"react-native-vector-icons": "^9.2.0"

},

I am using expo on android app. I have also added this: apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" on this path(android/app/build.gradle)

Screenshot of my error Screenshot of what i got after implementing this

I have tried every step but it still shows nothing: here is code:

import EntypoIcon from 'react-native-vector-icons/Entypo'
import Ionicons from '@expo/vector-icons/Ionicons';
//rest of the code

<View style={[styles.inputContainer,{marginTop:10}]}>
                    <View style={styles.inputIconView}>
                      <Ionicons
                        name="ios-mail" size={32} color="white"
   
                      />
                    </View>
          <TextInput
            style={styles.inputs}
            value={email}
            placeholderTextColor={COLORS.liteBlack}
            underlineColorAndroid="transparent"
            onChangeText={onChangeEmail}
            keyboardType="number-pad"
            placeholder={'Enter Email'}
            
          />
          </View>
          

                  <View style={styles.inputContainer}>
                    <View style={styles.inputIconView}>
                      <EntypoIcon
                        name="add-to-list"
                        style={{
                          color: '#fff',
                          fontSize: 18,
                          textAlign: 'center',
                        }}
                      />
                    </View>
          <TextInput
            style={styles.inputs}
            value={password}
            onChangeText={onChangePassword}
            placeholder={'Enter Password'}
            placeholderTextColor={COLORS.liteBlack}
            underlineColorAndroid="transparent"
            keyboardType={'default'}
            secureTextEntry={true}
          />
          </View>



//Have also tried native base Icon

import { Icon } from 'native-base';
//rest of the code

<Icon
                style={{
                    // marginHorizontal: 15,
                    color: COLORS.white
                }}
                name="paper-plane-sharp"
                type="Ionicons"
            />

`