@grassper/react-native-icon-picker v1.0.8

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

Props