React-Native with icon libraries

This assumes that you are NOT using Android Studio

In my case, I added in two extra libraries:

import LinearGradient from 'react-native-linear-gradient';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

Nothing odd there and their npm or package.JSON requirements are very simple:

"native-base": "^2.4.1",
"react-native-linear-gradient": "^2.4.0",
"react-native-vector-icons": "^4.5.0"

I happen to use Nativebase as a very good UI framework [https://docs.nativebase.io] but there are others. The important point here is that after you have installed these with npm [or yarn] and carry on with your development, you’ll probably find that the icons don’t show up – albeit no errors though !

You need to rebuild your base development .apk

So,  uninstall your development app from your emulator and back at the root package command prompt c:\…\app-name>

react-native link

npm run bundle-android

npm run build

and then re-upload your new .apk to the emulator from app-name/android/app/build/outputs/apk. As you have just now linked in all the required libraries, you should see your icons and any other un-linked libs will also work; these might have thrown some errors.

Note: react-native link does a lot behind the scenes changing some quite subtle files in the /android folder, but there are some posts on the .net for those of you who want to do it manually ?

 

 

 

Leave a reply:

Your email address will not be published.

Site Footer