react-native-vector-icons | Customizable Icons for React Native | Icon library

 by   oblador JavaScript Version: 10.0.3 License: MIT

kandi X-RAY | react-native-vector-icons Summary

kandi X-RAY | react-native-vector-icons Summary

react-native-vector-icons is a JavaScript library typically used in Telecommunications, Media, Media, Entertainment, User Interface, Icon, React Native, React applications. react-native-vector-icons has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i universal-vector-icons' or download it from GitHub, npm.

Perfect for buttons, logos and nav/tab bars. Easy to extend, style and integrate into your project. If you want to use .svg files natively – try react-native-vector-image.

            kandi-support Support

              react-native-vector-icons has a medium active ecosystem.
              It has 16699 star(s) with 2136 fork(s). There are 212 watchers for this library.
              There were 3 major release(s) in the last 6 months.
              There are 379 open issues and 778 have been closed. On average issues are closed in 112 days. There are 30 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of react-native-vector-icons is 10.0.3

            kandi-Quality Quality

              react-native-vector-icons has 0 bugs and 0 code smells.

            kandi-Security Security

              react-native-vector-icons has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              react-native-vector-icons code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              react-native-vector-icons is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              react-native-vector-icons releases are available to install and integrate.
              Deployable package is available in npm.
              Installation instructions, examples and code snippets are available.

            Top functions reviewed by kandi - BETA

            kandi has reviewed react-native-vector-icons and discovered the below as its top functions. This is intended to give you an instant insight into react-native-vector-icons implemented functionality, and help decide if they suit your requirements.
            • Creates a font - iconizer based on the metadata given .
            • Extracts glyphmap from CSS
            • Returns an image source for a given glyph
            • Get an image icon for a given font name
            • Creates an Icon class .
            • Create fontAwesome style for given font file
            • This app shows the route map .
            • Gets the icon style for a given props object .
            • Get glyphmap from file name
            • Generate icon set of icons from css template .
            Get all kandi verified functions for this library.

            react-native-vector-icons Key Features

            No Key Features are available at this moment for react-native-vector-icons.

            react-native-vector-icons Examples and Code Snippets

            React Native iOS build issues while installing react-native-vector-icons
            Lines of Code : 6dot img1License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            npm unlink --no-save react-native-vector-icons
            pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
            npm install & pod install
            copy iconCopy
            npm install react-native-vector-icons -save
            "dependencies": {
                "react-native-vector-icons": "^6.1.0",
            how to nest createDrawerNavigator createStackNavigator createBottomTabNavigator
            Lines of Code : 73dot img3License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            import HomeScreen from './src/component/Home/homescreen';
            const AuthStack = createStackNavigator({
            Home : {
                   screen: HomeActivity,
                      navigationOptions: {
            Navigating to a new view
            Lines of Code : 53dot img4License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            const TopNavTabs = TabNavigator(
               General: { screen: General },
                  Help: { screen: Help },
                  Tips: { screen: Tips },
                navigationOptions: ({ navigation }) => ({
                  tabBarIcon: ({ focused, tintColor }) => {
            copy iconCopy
            const TabsBar = TabNavigator(
               Home: {screen: HomeScreen},
               Profile: {screen: ProfileScreen},
                navigationOptions: ({ navigation }) => ({
                  tabBarIcon: ({ focused, tintColor }) => {
                    const { route

            Community Discussions


            Menu bar is inside search bar
            Asked 2022-Mar-29 at 08:49

            I am building a ecommerce App using React-Native; I was trying to add Drawer Navigation but there few errorsimage1 with drawer inside the search bar

            As you can see in the image it is inside the search bar, I want it beside search bar And second error is It's open inside the search bar as shown in the image belowimage2 with drawer opened inside the search bar

            Expected Behavior :

            I want Menu beside search bar on blue header and I want to hide Home name displaced beside Menu icon

            My Code:



            Answered 2022-Mar-29 at 08:49

            It's because you have your Menu component inside of your View with the white background, just take it outside and that would fix the button placement.



            Debugging Jest with Chrome stops in Jest but not on test debugger statement, how to make it stop in the test?
            Asked 2022-Mar-11 at 16:58

            I've gotten Jest debugging up and running many times. For some reason in this repo (that I'm new to) the debugger will stop in jest.js:

            but won't stop in the test itself. The test:



            Answered 2022-Mar-11 at 16:58

            Not really an answer but I want to share what ended up working: I did the debugging with Webstorm. Worked on the first try after following the Jest / Webstorm debugging guide. I set a breakpoint in the test, started the debugging in Webstorm and voila it hit the breakpoint.



            Drawer Navigation position right
            Asked 2022-Mar-11 at 14:16

            Drawer Navigation position right gives odd behavior. Here's the behavior of drawer when position is set to right

            I am not sure why is it giving this behavior, because it should be working like it works in default for left. Here is my code



            Answered 2022-Mar-11 at 14:16



            Undefined error while trying to map over array of objects React Native
            Asked 2022-Mar-01 at 15:09

            I've been trying to map an array of items which is passed from my Home Component to another but I'm always getting the error is Undefined. I fetch the data from Yelp and store it in a State(Home Component), then I pass this to another component, retrieve it through props and try to map through it(RestaurantItems Component). Please help. I have attached the code of my two components..

            Home Component



            Answered 2022-Mar-01 at 15:09

            This has been asked so many times! Your state is not initialized, so at first render, when your datas are not loaded yet, you have an error. So initiliaze your state with an empty array



            Update screen title to that of selected tab navigation
            Asked 2022-Feb-23 at 00:00

            I am in the process of implementing drawer navigation with nested tab navigation within my app.

            At present I have two issues that I cannot work out so far and am looking for pointers. I am using React Navigation v6.

            1. Upon clicking any of my tab navigator links I notice that my screen title is always set to "Home". Can this be updated to the current selected tab?

            2. The last clicked tab appears to keep its state when using the drawer links, the journey would look like

            • Start on home page (Renders home screen fine)
            • click userprofile tab (Renders user profile page fine)
            • then click "Book New Class" from within the Drawer, (Renders New Class page fine)
            • then click "Home" from within the Drawer (This renders the user profile screen)

            I have created a snack that will hopefully show the issues I'm facing




            Answered 2022-Feb-21 at 16:53

            You are nesting a Tab.Navigator inside a Drawer.Navigator. Compare this with the following code snippet from your snack.



            React native buld failed with the following message Failed to list versions for com.facebook.react:react-native
            Asked 2022-Jan-16 at 14:55

            I am using ReactNative version 0.62.2 and when i try to run the application using the command

            react-native run-android the build gets failed with the following error message



            Answered 2021-Dec-26 at 08:42

            Bintray service is down and the only way to fix this is to migrate to React Native 0.65, where this repo is no longer used.



            React Native App crashes when trying to debug remotely and does not work again unless re-installed
            Asked 2022-Jan-13 at 08:40

            The Application was working fine until the installation of React-native-Reanimated library but has started to crash post installation when trying to debug remotely. It wouldn't even start again unless re-installed and shows this error:

            Attempt to invoke interface method 'java.lang.String com.facebook.react.bridge.CatalystInstance.getSourceURL()' on a null object reference

            The app was not starting but following the installation instructions in the React Reanimated docs got it to work but it now crashes every time I try to connect to a remote debugger.



            Answered 2022-Jan-13 at 06:25

            Okay so it seems like Remote Debugging is not possible after installation of reanimated 2, using Flipper for debugging instead



            What causes the typescript Module has no exported member .ts(2305) error and how do you fix it?
            Asked 2021-Dec-06 at 22:33

            This is my first time using typescript with React and I'm have a tremendous amount of trouble with the typescript Module has no exported member .ts(2305) error. Here are 2 examples of this happening:



            Answered 2021-Aug-23 at 22:18

            well for instans react-router-dom version 5 the one in your package json does not have Routes, version 6 is the one with Routes. here you can find more info



            RCT-FOLLY - Thread-local storage is not supported for the current target
            Asked 2021-Nov-18 at 13:29

            When I try to build my react-native project in Xcode I get this error from RCT-Folly:

            {path}/App/ios/Pods/RCT-Folly/folly/container/detail/F14Table.cpp:41:10: Thread-local storage is not supported for the current target

            {path}/App/ios/Pods/RCT-Folly/folly/container/detail/F14Table.cpp:56:10: Thread-local storage is not supported for the current target

            I'm not really sure what is going on so im not sure what information I need to provide but here is my Podfile:



            Answered 2021-Nov-18 at 13:29


            How to remove bottom taskbar on a certain screen in React Native?
            Asked 2021-Nov-03 at 16:23

            I have added a chat to my app with react-native-gifted-chat and I want to remove the taskbar (tabBar) on the specific chat screen, to offer more space and a better user experience.

            This happens on iOS and Android

            But I can't hide it, despite trying different ways to do it:

            • Add tabBarVisible: false,

            • I have added my function

              const getTabBarVisibility = (route) => { const routeName = route.state ? route.state.routes [route.state.index] .name : '';



            Answered 2021-Nov-03 at 16:23
            import {getFocusedRouteNameFromRoute} from '@react-navigation/native';  
            function getTabVisible(route) {
                const routeName = getFocusedRouteNameFromRoute(route) ?? 'Chat';
              if (routeName === 'Chat') {
                return 'none';
              return 'flex';
                     tabBarStyle: {display: getTabVisible(route)},


            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install react-native-vector-icons

            Run: $ npm install --save react-native-vector-icons
            For each platform (iOS/Android/Windows) you plan to use, follow one of the options for the corresponding platform.
            If you intend to use FontAwesome 5, check out this guide to get you started.


            Both npm and android file hierarchies tend to get very deep and even worse when you combine them. Since Windows file system has a max length, long file name addresses will result in numerous errors including Execution failed for task ':react-native-vector-icons:processReleaseResources'. So try to keep the path to your project folder as short as possible. You probably didn't update the font files linked to your native project after upgrading. However, this only applies to Android targets since iOS bundles the fonts when building the app (try to clean your build from Xcode if the problem exists). On android you can relink the project or you manually update the fonts. To have them automatically synced use the gradle approach. Sometimes vendors decides to remove some icons from newer releases, this has nothing to do with this package. If you depend on an older version of a font you can add it as a custom font.
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • npm

            npm i react-native-vector-icons

          • CLONE
          • HTTPS


          • CLI

            gh repo clone oblador/react-native-vector-icons

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link