ikualo-ui-kit-mobile 0.8.2 → 0.8.4

package/assets/styles/elements/buttons.ts

@@ -128,6 +128,10 @@ const getStylesBtnLightSmall = (theme: ITheme) => StyleSheet.create({
   'btn-light-small--primary': {
     backgroundColor: theme.colors.background_focus,
     borderColor: theme.colors.icon,
+  },
+  'btn-light-small--transparent': {
+    backgroundColor: theme.colors.transparent,
+    borderColor: theme.colors.icon,
   }
   ,
   'btn-light-small-content': {

package/assets/styles/elements/pages.ts

@@ -28,15 +28,16 @@ export const getStyleNavbar = (theme: ITheme) => StyleSheet.create({
     paddingHorizontal: 16,
     alignItems: 'flex-start',
     borderTopWidth: 1,
-    height: 50,
+    height: 55,
     width: '100%',
     borderColor: theme.colors.border,
     backgroundColor: theme.colors.background_card,
   },
   'navbar-item': {
     width: 50,
+    alignSelf: 'center',
     alignItems: 'center',
-    marginTop: 4
+    marginTop: 5
   },
   'navbar-bar': {
     width: 50,
@@ -47,3 +48,6 @@ export const getStyleNavbar = (theme: ITheme) => StyleSheet.create({
   }
 })
 
+
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ikualo-ui-kit-mobile",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "main": "src/index.ts",
   "scripts": {
     "start": "expo start",

package/src/elements/buttons/BtnLightSmall.tsx

@@ -12,7 +12,7 @@ export const BtnLightSmall = (props: IBtnLightSmall) => {
   const theme = useStore().theme;
   const stylesBtnLightSmall = getStylesBtnLightSmall(theme);
 
-  const { onPress, icon, disabled = false, active, isLoading, text } = props;
+  const { onPress, icon, disabled = false, active, isLoading, text, transparent } = props;
   const color = active ?
     stylesBtnLightSmall['btn-light-small--active'].borderColor :
     disabled ? theme.colors.border_disabled : stylesBtnLightSmall['btn-light-small--primary'].borderColor
@@ -24,7 +24,7 @@ export const BtnLightSmall = (props: IBtnLightSmall) => {
           stylesBtnLightSmall['btn-light-small'],
           active && stylesBtnLightSmall['btn-light-small--active'],
           disabled && stylesBtnLightSmall['btn-light-small--disabled'],
-          !active && !disabled && stylesBtnLightSmall['btn-light-small--primary'],
+          !active && !disabled && stylesBtnLightSmall[`btn-light-small--${transparent ? 'transparent' : 'primary'}`],
         ]}
         contentStyle={stylesBtnLightSmall['btn-light-small-content']}
         labelStyle={[

package/src/elements/navbar/Navbar.tsx

@@ -1,15 +1,19 @@
 import { TouchableHighlight, View } from "react-native";
 import useStore from "../../store";
-import { cloneElement, useState } from "react";
+import { cloneElement, useEffect, useState } from "react";
 import { Text } from "../../";
 import { getStyleNavbar } from "../../../assets/styles/elements/pages";
 import { INavbar } from "../../models";
 
 export const Navbar = (props: INavbar) => {
-    const { items, onChange, style } = props;
+    const { items, onChange, style, itemSelected } = props;
     const theme = useStore().theme;
     const stylesNavbar = getStyleNavbar(theme);
-    const [selected, setSelected] = useState<string>(items[0].value);
+    const [selected, setSelected] = useState<string>();
+
+    useEffect(() => {
+        setSelected(itemSelected);
+    }, [itemSelected]);
 
     return (
         <View style={[stylesNavbar['navbar'], style]}>

package/src/elements/views/Others.tsx

@@ -12,6 +12,8 @@ export const Others = () => {
         { icon: <Test />, label: 'Crypto', value: '3' },
         { icon: <Test />, label: 'Perfil', value: '4' },
     ]
+    const itemSelected = items3[0].value
+
     return (
         <View style={{ gap: 24 }} >
             <Text
@@ -35,7 +37,7 @@ export const Others = () => {
                 fontWeight="MontserratSemiBold600"
                 fontSize={18}
             >Navbar</Text>
-            <Navbar items={items3} onChange={(value) => { console.log(value) }} />
+            <Navbar itemSelected={itemSelected} items={items3} onChange={(value) => { console.log(value) }} />
             <Text
                 fontWeight="MontserratSemiBold600"
                 fontSize={18}

package/src/models/interfaces.models.ts

@@ -51,6 +51,7 @@ export interface IBtnLightSmall {
   isLoading?: boolean;
   active?: boolean;
   text?: string;
+  transparent?: boolean;
 }
 export interface IBtnOutlined {
   color?: TypeBtnColors;
@@ -287,6 +288,7 @@ export interface IFTimer {
 }
 export interface INavbar {
   items: { icon: ReactElement, label: string, value: string }[],
+  itemSelected: string;
   onChange: (value: string) => void
   style?: object;
 }