Feat/ New Icon Component

demo/src/index.js

@@ -66,6 +66,9 @@ module.exports = {
       get HintsScreen() {
         return require('./screens/componentScreens/HintsScreen').default;
       },
+      get IconScreen() {
+        return require('./screens/componentScreens/IconScreen').default;
+      },
       get ImageScreen() {
         return require('./screens/componentScreens/ImageScreen').default;
       },

demo/src/screens/MenuStructure.js

@@ -33,6 +33,7 @@ export const navigationData = {
       {title: 'Connection Status Bar', tags: 'connection status bar', screen: 'unicorn.components.ConnectionStatusBar'},
       {title: 'Chip', tags: 'chip', screen: 'unicorn.components.ChipScreen'},
       {title: 'ExpandableSection', tags: 'expandable section', screen: 'unicorn.components.ExpandableSectionScreen'},
+      {title: 'Icon', tags: 'image icon assets', screen: 'unicorn.components.IconScreen'},
       // {title: 'Overlays', tags: 'overlay image', screen: 'unicorn.components.OverlaysScreen'},
       {title: 'Page Control', tags: 'page', screen: 'unicorn.components.PageControlScreen'},
       {title: 'ProgressBar', tags: 'progress bar animated', screen: 'unicorn.animations.ProgressBarScreen'},

demo/src/screens/componentScreens/IconScreen.tsx

@@ -0,0 +1,43 @@
+import React, {useState} from 'react';
+import {Assets, View, Icon, Text, Slider, Switch, GradientSlider} from 'react-native-ui-lib';
+
+const IconScreen = () => {
+  const [size, setSize] = useState(24);
+  const [customSize, setCustomSize] = useState(false);
+  const [color, setColor] = useState<string | number>();
+  const [customColor, setCustomColor] = useState(false);
+
+  return (
+    <View padding-page>
+      <Text h1 marginB-s4>
+        Icon Screen
+      </Text>
+      <View center>
+        <Icon
+          margin-30
+          size={customSize ? size : undefined}
+          tintColor={customColor ? color as string : undefined}
+          source={Assets.icons.search}
+        />
+      </View>
+
+      <View marginB-s3 row>
+        <Text marginR-s2>Custom Size</Text>
+        <Switch value={customSize} onValueChange={setCustomSize}/>
+      </View>
+      <Slider maximumValue={100} value={24} step={1} onValueChange={setSize}/>
+      <Text marginB-50 marginT-s2>
+        Custom size: {size}
+      </Text>
+
+      <View marginB-s3 row>
+        <Text marginR-s2>Custom Color</Text>
+        <Switch value={customColor} onValueChange={setCustomColor}/>
+      </View>
+      <GradientSlider type={GradientSlider.types.HUE} color={color as string} onValueChange={setColor}/>
+      <Text marginT-s2>Custom color: {color || '#000000'}</Text>
+    </View>
+  );
+};
+
+export default IconScreen;

demo/src/screens/componentScreens/index.js

@@ -20,6 +20,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.ChipsInputScreen', () => require('./ChipsInputScreen').default);
   registrar('unicorn.components.HapticScreen', () => require('./HapticScreen').default);
   registrar('unicorn.components.HintsScreen', () => require('./HintsScreen').default);
+  registrar('unicorn.components.IconScreen', () => require('./IconScreen').default);
   registrar('unicorn.components.ImageScreen', () => require('./ImageScreen').default);
   registrar('unicorn.components.ProgressiveImageScreen', () => require('./ProgressiveImageScreen').default);
   registrar('unicorn.components.KeyboardAwareScrollViewScreen', () => require('./KeyboardAwareScrollViewScreen').default);

generatedTypes/index.d.ts

@@ -48,6 +48,7 @@ export {default as FloatingButton, FloatingButtonProps} from './src/components/f
 export {default as GridListItem, GridListItemProps} from './src/components/gridListItem';
 export {default as GridView, GridViewProps} from './src/components/gridView';
 export {default as Hint, HintProps} from './src/components/hint';
+export {default as Icon, IconProps} from './src/components/icon';
 export {default as Image, ImageProps} from './src/components/image';
 export {default as Overlay, OverlayTypes} from './src/components/overlay';
 export {default as RadioButton, RadioButtonProps} from './src/components/radioButton';

generatedTypes/src/components/icon/index.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ImageProps } from 'react-native';
+import { BaseComponentInjectedProps, MarginModifiers } from '../../commons/new';
+export declare type IconProps = ImageProps & MarginModifiers & {
+    /**
+     * the icon tint
+     */
+    tintColor?: string;
+    /**
+     * the icon size
+     */
+    size?: number;
+};
+/**
+ * @description: Icon component
+ * @extends: Image
+ * @extendsLink: https://reactnative.dev/docs/image
+ */
+declare type Props = IconProps & BaseComponentInjectedProps;
+declare const _default: React.ComponentClass<ImageProps & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
+    /**
+     * the icon tint
+     */
+    tintColor?: string | undefined;
+    /**
+     * the icon size
+     */
+    size?: number | undefined;
+} & {
+    useCustomTheme?: boolean | undefined;
+}, any> & React.NamedExoticComponent<ImageProps & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
+    /**
+     * the icon tint
+     */
+    tintColor?: string | undefined;
+    /**
+     * the icon size
+     */
+    size?: number | undefined;
+} & BaseComponentInjectedProps> & {
+    readonly type: (props: Props) => JSX.Element;
+};
+export default _default;

src/components/icon/index.tsx

@@ -0,0 +1,34 @@
+import React, {memo} from 'react';
+import {Image, ImageProps} from 'react-native';
+import {asBaseComponent, BaseComponentInjectedProps, MarginModifiers} from '../../commons/new';
+
+export type IconProps = ImageProps &
+  MarginModifiers & {
+    /**
+     * the icon tint
+     */
+    tintColor?: string;
+    /**
+     * the icon size
+     */
+    size?: number;
+  };
+
+/**
+ * @description: Icon component
+ * @extends: Image
+ * @extendsLink: https://reactnative.dev/docs/image
+ */
+
+type Props = IconProps & BaseComponentInjectedProps;
+
+const Icon = memo((props: Props) => {
+  const {size, tintColor, style, modifiers, ...others} = props;
+  const {margins} = modifiers;
+  const iconSize = size ? {width: size, height: size} : undefined;
+
+  return <Image {...others} style={[style, margins, iconSize, {tintColor}]}/>;
+});
+
+Icon.displayName = 'Icon';
+export default asBaseComponent<IconProps, typeof Icon>(Icon);

src/index.js

@@ -75,6 +75,9 @@ export default {
   get Hint() {
     return require('./components/hint').default;
   },
+  get Icon() {
+    return require('./components/icon').default;
+  },
   get Image() {
     return require('./components/image').default;
   },

src/index.ts

@@ -41,6 +41,7 @@ export {default as ColorSwatch, ColorSwatchProps} from './components/colorPicker
 export {default as FloatingButton, FloatingButtonProps} from './components/floatingButton';
 export {default as GridListItem, GridListItemProps} from './components/gridListItem';
 export {default as GridView, GridViewProps} from './components/gridView';
+export {default as Icon, IconProps} from './components/icon';
 export {default as Image, ImageProps} from './components/image';
 export {default as Overlay, OverlayTypes} from './components/overlay';
 export {default as RadioButton, RadioButtonProps} from './components/radioButton';