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.