native-app-icon-picker
v1.0.3
Published
Native App Icon Picker is a React Native component that allows you to select icons from various icon libraries.
Downloads
12
Maintainers
Readme
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}
/>
<Text style={styles.selectedIconText}>
Selected Icon: {selectedIcon ? selectedIcon.icon : 'None'}
</Text>
<Text style={styles.openPickerText} onPress={toggleIconPicker}>
Open Icon Picker
</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.