React Native Vector Icons - Setup: IOS and Android (2024)

hello guys welcome back once again in the  new video of react native and in this video   I would like to show you that how we can add  react native Vector icons so first of all we   go inside the browser and type here Vector icons  react native so we just click on the first link   so actually this is the official document of the  react native Vector icons so if you want to show   icons in your react native app so you can use this  so for installing we just so we can read all the   instructions given here so first of all we just  need to add this for installing the package so we   just go inside the project and type here and just  enter so it will take few second so package is   installed so we can check in the package.json so  you can check that here package is installed so we   go inside the package again and check the other  instructions here for the iOS we need to follow   few other steps like we go inside the node module  and inside the react native Vector icons we drag   and drop the fonts folder first of all we need  to open the Xcode and in the X code we just added   for the iOS so we just open this folder reveal in  finder and here enter so we just need to open this file yeah so xcode is now open so  the next step is that we go inside   the project and here go inside the node  modules and find here react native Vector icons yeah so here is the folder of the retive  vector icon so we just find this reveal in finder   and here we just open it and here so according to  the instructions here go inside the node module   and inside the fonts we just drag and drop it  inside the Xcode so we just open the fonts so   actually this is all the font is exist inside  the fonts folder so we need to open the Xcode   here and just drag and drop so when we are drag  and drop so we need to remember the few steps   so we make sure that app is checked under the  add to targets if adding the whole folders so   check the create groups so I am adding here the  whole folder folder so open the Xcode go inside   the fonts folder so just I am drag and drop the  whole folder so like this and here we need to   check this add to targets because inside the  setup here one line is mentioned your app is   checked under the add to targets so we need  to check this and second we are dragging the   whole folders so we need to select here create  groups and just finish it so when I am dragging   the whole folder so you can check that all the  font is showing here and inside the build face   you can check your fonts will be show here so  again go inside the browser and the next point   is that inside the info.Plist we will add the  fonts so we need to add here all these fonts   inside the info.Plist so we just copy all  the fonts here so go inside the info.Plist   and here just open it as a source code and  here we need to paste all the font so we just so I am just pasting here and removing  the space and now we check the property list   in this view so here we will check fonts  provided by the application will be show   all the font here yeah so now this point  yeah so this step is also completed and now   go inside the package and check the other  steps so the next step is that we need to   create a file create react config.js so we just  copy this and go inside the project and we need   to create this file so one thing we should be  remember that this file will be create at the   root of the react native project so we just  click here and here we'll just create a file   and just name it react native config.js so  file is created here and this code we will   add here like this yeah so now all the steps we  have completed for the iOS so first we just run   it on the iOS now go inside the terminal and  go inside iOS and just run here Pod install yeah so now Pod is completed and run the  application again go inside the root of   the project and run here npx react native run iOS so it will take few second we  just wait for it a few moments later package is not creating any  issue so we need to show the icon   so for this we go inside the package  and check here how we can show the icon yeah so we just can copy this and we  can use it inside our application now   directly so for just testing we are  using it and want to show any icon so   suppose I want to show this icon so  I can copy this and directly we can use this is the forget password and I want to show  here any icon so I am using here so color we   can give here green color and just save it  yeah so finally you can check that the icon   is showing here so you can show any icon you  want suppose you want to any other icon so we   need to go inside the directory of the vector  icons so here we can just open this link and   check the icons list here yeah so all the icons  is given here suppose you want to show any icons   from here so we are using here the type of  the icon is here font so so suppose you want   to show any icon so we just type the header  of the icon like Ant design and just we copy here and design and you can choose any icon  suppose you want to show Cloud upload so we   just copy this icon and we can use here suppose  we are using here rocket so we can now use cloud   upload and we can commenting you can use it also  with the other name but now we are using icon so   we can change it and we can save it yeah so now  this icon will be show here so you can give here   any color you want we are using suppose here  green color we can use here any color suppose   we are using here black color so the black icon  will be show here like this so like this we can   use the icon in our iOS application so the next  step is that we will use the icon in the Android application so for the Android we need to  add few other extra steps like we will read   here all the instructions for the Android so for  the Android we will go inside the Android build.   Gradle and here we will add this line so one  thing we should be remember remember here we   go inside the app.gradle so in the Android we  have the two gradle files one is the outside   from the app and one is inside of the app so we  will go inside app and click here build. gradle   and in the gradle we just need to add this file  so the vector icons we will add here so it is   just for the customization and if you want to  take few categories but this is only just for   the customization but we are using here for  the all type of icons so we need not to use   this so we will just use this line and now  we will save it and now the application we   will run on the Android so first we just remove  this node and we'll run the application for the   Android so if you want to run your application on  the Android so one thing you should be remember   that you are environment for the Android  application must be set so if you did not   set your environment for the Android application  so I have given the link in the description box   so you can follow all the instructions and  you can set your environment for the Android   application also so I am just running here for  the Android so we just need to add this and just enter a few moments later yeah so you can check that the icon is  showing in the Android and iOS in the   both application because we are showing the  same icon in the Android as well as in the   iOS so like this you can use the vector  icons in your application so I hope this   video is very helpful for understanding  the vector icons and how we can use in   our application so if you like this video  please like share and subscribe the channel

Channel: Coding Gyaan

Views: 2,501

Keywords: What is Xcode ? How use Xcode ?, coding gyaan, technology gyaan, programming technology, coding gyan, Technical Guruji, technical guruji, technicalguruji, What is react native, need of react native, components kya hote hai, props, props kya hai, react native props, difference between state and props, @state, why use state in react native, flexbox, coding gyaan app, mobile app setup, gyaan, code, login signup navigation, React Native Vector Icons, Vector Icons, Icons, icons setup

Id: VKDkYe7gEMo

Length: 12min 26sec (746 seconds)

Published: Fri Mar 22 2024