Icons not working (showing ? instead) #2832

grean · 2019-07-30T12:14:35Z

Hello,

With those versions on windows 10 64bits:
"native-base": "2.12.2",
"react-native": "0.60.4",
"react-native-vector-icons": "6.6.0" -> (i know that this is not the dev-depedencie 6.1.0 but it works with NB 2.12.1)

Icons are displayed with '?' instead of the good one (fontAwesome for my case)
If i downgrade to "native-base": "2.12.1" it works well..

What about NativeBase working with RN 0.60.x and the fact that linking process is no longer needed with RN 0.60.x ?

I've replaced my custom theme with the native-base one (using node node_modules/native-base/ejectTheme.js) without changing a line but it does'nt solve my isssue.

grean · 2019-07-30T13:13:30Z

I finally get my icon but why do i have to add an option (type="FontAwesome") in the native base Icon component whereas it was not needed/required in NB 2.12.1
I don't see that in changelog too of the 2.12.2 version.. maybe default behavior is broken and always fallback to ionicons when there is no type prop in NB Icon component.

stevesweets · 2019-07-31T12:26:46Z

Similar issue, but ionicons not loading for me.

stevesweets · 2019-07-31T12:37:11Z

Resolved with this comment: #2806 (comment)

grean · 2019-07-31T16:51:21Z

@stevesweets i'm not sure it's the same issue.
For me fonts are presents and loaded but NativeBase don't use the one i've specified in the theme iconFontFamily variable. Thus i have '?' instead because the icon's name that i used are not present in the font that is loaded. When there is are Square with a cross inside, it means that the font was not found at all i believe.
I repeat that, now, it's working for me because i'va added the 'type' prop in icon component that i had not to do before 2.12.2 O_o

danieloprado · 2019-08-06T19:13:45Z

Something after this merge #2804 broken the default behaviour

PlabanJr · 2019-08-07T06:02:00Z

Something after this merge #2804 broken the default behaviour

Can you please share some more details about the broken behaviour, preferably screenshots and snacks to reproduce.

PlabanJr · 2019-08-07T06:03:03Z

Please refer to this. Hope this solves the issue.

grean · 2019-08-07T08:29:17Z

This is not a 'linking' problem.
The problem is that the variable that store the icon's type in your ejected theme file for the whole project in no more taken into account.

From my theme file 'platform.js'

 // Icon
    iconFamily: 'FontAwesome',

Now, i have to add the prop 'type="FontAwesome"' to each component in order to make it work. Before this was not the case. If you don't provide the 'type' prop to your Icon's component they try to display icon's from a default font (ionicons i think) So icons appear with a '?' instead and not with a 'cross' like this X. If i try with a name that exist in ionicons font it's displaying good.

nismaxim82 · 2019-08-13T13:11:57Z

This is not a 'linking' problem.
The problem is that the variable that store the icon's type in your ejected theme file for the whole project in no more taken into account.

From my theme file 'platform.js'
 // Icon
    iconFamily: 'FontAwesome',
Now, i have to add the prop 'type="FontAwesome"' to each component in order to make it work. Before this was not the case. If you don't provide the 'type' prop to your Icon's component they try to display icon's from a default font (ionicons i think) So icons appear with a '?' instead and not with a 'cross' like this X. If i try with a name that exist in ionicons font it's displaying good.

It's a bug. Here is i'm write a comment on that.
805577d#commitcomment-34672919

You can fix it by your self until the next version fixes this:

Open file node_modules\native-base\dist\src\basic\IconNB.js and remove all text code.
Copy to the file code from the node_modules\native-base\src\basic\IconNB.js
Add lifecycle function code:
componentWillMount() { this.setIcon(this.props.type); }
Run your app and check it.

P.S. You can add this function to the file in the second step and run npm command compile to recompile library.

r0b0t3d · 2019-08-26T09:45:24Z

version 2.13.5, componentDidUpdate method is using wrong param. #2806 (comment)

In IconNB.js

componentDidUpdate(nextProps) {
    if (nextProps.type && this.props.type !== nextProps.type) {
      this.setIcon(nextProps.type);
    }
  }

should be

componentDidUpdate(prevProps) {
    if (prevProps.type && this.props.type !== prevProps.type) {
      this.setIcon(this.props.type);
    }
  }

For now, I have to back to 2.13.4

sankhadeeproy007 · 2019-09-11T17:39:34Z

Fixed in 2.13.8

craftzdog · 2019-09-13T08:01:51Z

Seems like componentWillMount() { this.setIcon(this.props.type); } is still needed in 2.13.8.
Maybe that's because this.context is always undefined in constructor method, so theme is not loaded properly.

`this.context` is always `undefined` in `constructor` method. Refer `context` argument instead. fix GeekyAnts#2832

grean · 2019-09-13T08:24:32Z

I've tested the lastest version (2.13.8) and i've removed the 'type' prop in an 'Icon' component to test if it's always required and it shows me a '?' instead of the correct icon. So, i think that the problem still exist in this version :(

jpolo · 2019-09-16T09:32:39Z

I confirm, it is back in 2.13.8

rodriguezmanu · 2019-09-20T22:50:41Z

+1

MarcosOmineJr · 2019-09-28T15:48:35Z

Mine is not even showing the '?', it just doesn't load:

The icon on the left is a test to see if <Icon /> works, and apparently, it doesn't.

The Icons code:

<Container style={styles.checkBoxContainer}>
    <Icon type='FontAwesome' name='check' style={{color: palette.default.mainColor}} /> //Test Icon
    <CheckBox
        color={palette.default.mainColor}
        style={styles.check}
        checked={this.state.persistConnection}
        onPress={()=>{
            let s = this.state;
            s.persistConnection = s.persistConnection?false:true;
            this.setState(s);
        }}
    />

    <Text style={styles.checkLabel}>Manter-se conectado</Text>
</Container>

My dependencies in package.json:

{
"@react-native-community/async-storage": "^1.6.2",
    "native-base": "^2.13.8",
    "react": "16.8.3",
    "react-native": "0.59.3",
    "react-native-gesture-handler": "^1.4.1",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-reanimated": "^1.3.0",
    "react-native-screens": "1.0.0-alpha.23",
    "react-native-splash-screen": "3.0.6",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "^1.9.0"
}

am I doing something wrong?

bullantt · 2020-02-04T05:38:07Z

Fixed in 2.13.8

This still not fixed thank you nismaxim82 i had been looking everywhere for a solution after upgrading this worked after adding componentWillMount() { this.setIcon(this.props.type); }

"dependencies": { "native-base": "^2.13.8", "prop-types": "^15.7.2", "react": "^16.12.0", "react-art": "^16.3.2", "react-dom": "^16.3.2", "react-native": "^0.61.5", "react-native-code-push": "^6.0.0", "react-native-device-info": "^5.4.3", },

jknight12882 · 2020-02-08T06:29:27Z

also confirming not fixed in 2.13.8

kharbandaashu · 2020-02-22T19:25:18Z

also confirming not fixed in 2.13.8

This one Worked for me for following configuration.

"native-base": "^2.13.8",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-vector-icons": "^6.6.0"

mufaddalhamidofficial · 2020-02-24T12:42:00Z

what about workin expo

bearkfear · 2020-03-18T05:41:19Z

I fix this problem in my project importing the fontFamiliy that i want: https://expo.github.io/vector-icons/

Follow the code:

const Index = () => {
  const [ready, setReady] = useState(false);
  if (!ready)
    return (
      <AppLoading
        startAsync={async () =>
          await Font.loadAsync({
            Ionicons: require("native-base/Fonts/Ionicons.ttf")
          })
        }
        onFinish={() => setReady(true)}
      ></AppLoading>
    );
  return (
    <StyleProvider style={getTheme(platform)}>
      <NavigationContainer>
        <Routes></Routes>
      </NavigationContainer>
    </StyleProvider>
  );
};

in the folder Fonts on the native-base you find more:

My dependencies:

"@expo/vector-icons": "^10.0.6",
"@react-native-community/masked-view": "0.1.5",
"@react-navigation/bottom-tabs": "^5.1.1",
"@react-navigation/native": "^5.0.9",
"@react-navigation/stack": "^5.1.1",
"expo": "^36.0.2",
"expo-font": "^8.0.0",
"native-base": "^2.13.12",
"react": "16.9.0",
"react-dom": "16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
"react-native-gesture-handler": "~1.5.0",
"react-native-reanimated": "~1.4.0",
"react-native-safe-area-context": "0.6.0",
"react-native-screens": "2.0.0-alpha.12",
"react-native-web": "^0.11.7"

Pat-Gekoski · 2020-05-18T21:13:39Z

I ran yarn add @expo/vector-icons and rebuilt the project. Fixed it for me

kenken023 · 2020-09-26T10:21:30Z

Issue still persists on "native-base": "2.13.14"
But for me, the play displays a wrong icon and others are question mark for Ionicons

DGeoWils · 2020-10-08T17:00:52Z

I had the same issue. I don't use expo.

"react-native": "0.60.4", "native-base": "^2.13.14",

ran yarn add react-native-vector-icons.

I then had to remove the fonts from the "Copy Bundle Resources" phase in xcode in order to build for ios.

Mazhar-khan · 2021-06-21T12:34:33Z

I have same issue icon not working.
Back button is not working.

badalsaibo · 2024-01-08T04:13:21Z

If you're using the latest react-native-vector-icons, follow the steps mentioned in the docs for Android setup.

Edit android/app/build.gradle (NOT android/build.gradle) and add:
apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

https://github.com/oblador/react-native-vector-icons?tab=readme-ov-file#android-setup

nismaxim82 referenced this issue Aug 13, 2019

Fixes Icon (#2804)

805577d

danieloprado mentioned this issue Aug 13, 2019

React Hooks Update #2857

Closed

6 tasks

sankhadeeproy007 closed this as completed Sep 11, 2019

craftzdog added a commit to craftzdog/NativeBase that referenced this issue Sep 13, 2019

fix(icon): icons with theme not showing

cc7c20a

`this.context` is always `undefined` in `constructor` method. Refer `context` argument instead. fix GeekyAnts#2832

craftzdog mentioned this issue Sep 13, 2019

fix(icon): icons with theme not showing #2924

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Icons not working (showing ? instead) #2832

Icons not working (showing ? instead) #2832

grean commented Jul 30, 2019

grean commented Jul 30, 2019

stevesweets commented Jul 31, 2019

stevesweets commented Jul 31, 2019

grean commented Jul 31, 2019

danieloprado commented Aug 6, 2019

PlabanJr commented Aug 7, 2019

PlabanJr commented Aug 7, 2019

grean commented Aug 7, 2019

nismaxim82 commented Aug 13, 2019

r0b0t3d commented Aug 26, 2019

sankhadeeproy007 commented Sep 11, 2019

craftzdog commented Sep 13, 2019 •

edited

Loading

grean commented Sep 13, 2019

jpolo commented Sep 16, 2019

rodriguezmanu commented Sep 20, 2019

MarcosOmineJr commented Sep 28, 2019

bullantt commented Feb 4, 2020 •

edited

Loading

jknight12882 commented Feb 8, 2020

kharbandaashu commented Feb 22, 2020

mufaddalhamidofficial commented Feb 24, 2020

bearkfear commented Mar 18, 2020 •

edited

Loading

Pat-Gekoski commented May 18, 2020

kenken023 commented Sep 26, 2020

DGeoWils commented Oct 8, 2020

Mazhar-khan commented Jun 21, 2021

badalsaibo commented Jan 8, 2024

Icons not working (showing ? instead) #2832

Icons not working (showing ? instead) #2832

Comments

grean commented Jul 30, 2019

grean commented Jul 30, 2019

stevesweets commented Jul 31, 2019

stevesweets commented Jul 31, 2019

grean commented Jul 31, 2019

danieloprado commented Aug 6, 2019

PlabanJr commented Aug 7, 2019

PlabanJr commented Aug 7, 2019

grean commented Aug 7, 2019

nismaxim82 commented Aug 13, 2019

r0b0t3d commented Aug 26, 2019

sankhadeeproy007 commented Sep 11, 2019

craftzdog commented Sep 13, 2019 • edited Loading

grean commented Sep 13, 2019

jpolo commented Sep 16, 2019

rodriguezmanu commented Sep 20, 2019

MarcosOmineJr commented Sep 28, 2019

bullantt commented Feb 4, 2020 • edited Loading

jknight12882 commented Feb 8, 2020

kharbandaashu commented Feb 22, 2020

mufaddalhamidofficial commented Feb 24, 2020

bearkfear commented Mar 18, 2020 • edited Loading

Pat-Gekoski commented May 18, 2020

kenken023 commented Sep 26, 2020

DGeoWils commented Oct 8, 2020

Mazhar-khan commented Jun 21, 2021

badalsaibo commented Jan 8, 2024

craftzdog commented Sep 13, 2019 •

edited

Loading

bullantt commented Feb 4, 2020 •

edited

Loading

bearkfear commented Mar 18, 2020 •

edited

Loading