React native icon picker

React native implementation of icons.expo.fyi website. You can search and pick icons from a wide range of icons.

Package Includes:

• AntDesign
• Entypo
• EvilIcons
• Feather
• FontAwesome
• FontAwesome5
• Fontisto
• Foundation
• Ionicons
• MaterialCommunityIcons
• MaterialIcons
• Octicons
• SimpleLineIcons
• Zocial

Compatible only with expo and bare react native projects with expo unimodules installed.

Before installation make sure expo unimodules configured if it is bare react native project (For expo not required)

Installation

npm i @grassper/react-native-icon-picker or yarn add @grassper/react-native-icon-picker

Usage

import {IconPicker} from '@grassper/react-native-icon-picker'

Example

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { IconPicker } from '@grassper/react-native-icon-picker';

export default function App() {
  const handleSubmit = (id, iconName, iconSet, iconColor, backgroundColor) => {
    console.log({ id, iconName, iconSet, iconColor, backgroundColor });
  };

  return (
    <View style={styles.container}>
      <View style={styles.iconPickerContainer}>
        <IconPicker
          searchTitle={'Name'}
          iconsTitle="Icons"
          numColumns={6}
          iconSize={20}
          iconColor="#fff"
          backgroundColor='#121212'
          placeholderText="Search Food, shopping .."
          placeholderTextColor="#555"
          onClick={handleSubmit}
          iconContainerStyle={styles.iconContainer}
          flatListStyle={styles.flatList}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding:20,
    backgroundColor: '#000',
  },
  iconPickerContainer:{
    flex:1
  },
  iconContainer: {
    width: 50,
    height: 50,
    borderRadius: 50,
    margin: 5,
    justifyContent: 'center',
    marginTop: 20,
    alignItems: 'center',
    backgroundColor: '#121212',
  },
  flatList:{
    alignItems: 'center'
  }
});

Run it on snack 🚀

Props

Prop	Required	Type	Description
iconColor	✅	string	Color of Icons
iconSize	✅	number	Size of Icons
backgroundColor	✅	string	Background color of Icons
numColumns	✅	number	Number of columns in Flatlist
placeholderText	✅	string	Input field placeholder text
placeholderTextColor	✅	string	Color of placeholder text
searchTitle	(optional)	string	Search field title text
iconsTitle	(optional)	string	Icons title text
textInputStyle	(optional)	object	Text input styles
textStyle	(optional)	object	Text styles
flatListStyle	(optional)	object	FlatList styles
iconContainerStyle	(optional)	object	Icon container styles
onClick	✅	function	(id, searchText, iconName, iconSet,iconColor,backgroundColor) => void