React Native App Icon Picker

Native App Icon Picker is a React Native component that allows you to select icons from various icon libraries.

Installation

You can install the "native-app-icon-picker" package using npm:

npm install native-app-icon-picker

or using Yarn:

npm yarn add native-app-icon-picker

Usage

Import the IconPicker component from the "native-app-icon-picker" package:

import IconPicker from 'native-app-icon-picker';

// Your code...

Render the IconPicker component in your desired location:

For more detailed usage and available props, please refer to the documentation.

Example

Here's an example of how to use the IconPicker component:

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import IconPicker from 'native-app-icon-picker';

const App = () => {
  const [showIconPicker, setShowIconPicker] = useState(false);
  const [selectedIcon, setSelectedIcon] = useState(null);

  const toggleIconPicker = () => {
    setShowIconPicker(!showIconPicker);
  };

  const handleIconSelect = (icon) => {
    setSelectedIcon(icon);
    setShowIconPicker(false);
  };

  const iconDetails = [
    {
      family: 'FontAwesome',
      color: '#999999',
      icons: ['heart', 'star', 'circle', 'check'],
    },
    {
      family: 'MaterialIcons',
      color: '#999999',
      icons: ['home', 'account', 'settings', 'notifications'],
    },
  ];

  return (
    <View style={styles.container}>
      <Text style={styles.title}>IconPicker Example</Text>
      <IconPicker
        headerTitle="Select an Icon"
        showIconPicker={showIconPicker}
        onSelect={handleIconSelect}
        toggleIconPicker={toggleIconPicker}
        iconDetails={iconDetails}
        selectedIcon={selectedIcon}
        selectedIconContainerStyle={styles.selectedIconContainer}
        content={<Text style={styles.openPickerText} onPress={toggleIconPicker}>
        Open Icon Pickers
      </Text>}
      />
      <Text style={styles.selectedIconText}>
        Selected Icon: {selectedIcon ? selectedIcon.icon : 'None'}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 16,
  },
  selectedIconContainer: {
    backgroundColor: '#ffcc00',
    borderRadius: 8,
  },
  selectedIconText: {
    fontSize: 18,
    marginTop: 16,
  },
  openPickerText: {
    fontSize: 18,
    marginTop: 16,
    color: 'blue',
    textDecorationLine: 'underline',
  },
});

export default App;

Props

The IconPicker component accepts the following props:

Prop	Type	Description
headerTitle	string	The title displayed in the header of the icon picker modal.
showIconPicker	boolean	Determines whether the icon picker modal is visible.
onSelect	function	Callback function invoked when an icon is selected.
toggleIconPicker	function	Callback function invoked to toggle the visibility of the icon picker modal.
iconDetails	array of IconDetail objects	An array of icon details containing the icon families and icons to be displayed.
selectedIcon	SelectedIcon object	The currently selected icon.
selectedIconContainerStyle	object or StyleProp<ViewStyle>	Custom styles applied to the selected icon container.
content	ReactNode	Custom content displayed when the icon picker is closed.

Documentation

For detailed documentation and examples, please refer to the GitHub repository.

License

This project is licensed under the MIT License.