Nativebase: Icons not working (showing ? instead)

Created on 30 Jul 2019 · 24Comments · Source: GeekyAnts/NativeBase

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.

Source

grean

Most helpful comment

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.

grean on 30 Jul 2019

👍2

All 24 comments

grean on 30 Jul 2019

👍2

Similar issue, but ionicons not loading for me.

stevesweets on 31 Jul 2019

Resolved with this comment: https://github.com/GeekyAnts/NativeBase/issues/2806#issuecomment-515674149

stevesweets on 31 Jul 2019

@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

grean on 31 Jul 2019

👍1

Something after this merge #2804 broken the default behaviour

danieloprado on 6 Aug 2019

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 on 7 Aug 2019

Please refer to this. Hope this solves the issue.

PlabanJr on 7 Aug 2019

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.

grean on 7 Aug 2019

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.
https://github.com/GeekyAnts/NativeBase/commit/805577d43092296b73924360c2bfc988630c5444#commitcomment-34672919

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

Open file node_modulesnative-basedistsrcbasicIconNB.js and remove all text code.
Copy to the file code from the node_modulesnative-basesrcbasicIconNB.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.

nismaxim82 on 13 Aug 2019

version 2.13.5, componentDidUpdate method is using wrong param. https://github.com/GeekyAnts/NativeBase/issues/2806#issuecomment-524788295

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

r0b0t3d on 26 Aug 2019

Fixed in 2.13.8

sankhadeeproy007 on 11 Sep 2019

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.

craftzdog on 13 Sep 2019

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 :(

grean on 13 Sep 2019

I confirm, it is back in 2.13.8

jpolo on 16 Sep 2019

rodriguezmanu on 21 Sep 2019

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

NativeBase-Icons

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?

MarcosOmineJr on 28 Sep 2019

👍1

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", },

bullantt on 4 Feb 2020

also confirming not fixed in 2.13.8

jknight12882 on 8 Feb 2020

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"

kharbandaashu on 22 Feb 2020

what about workin expo

mufaddalhamidofficial on 24 Feb 2020

😄1

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"