udev_ultime_native

Librería de componentes UI optimizada para React Native que ofrece una colección completa de elementos de interfaz listos para usar: botones personalizables con múltiples tipos de interacción, campos de texto avanzados con soporte para iconos y validación, áreas de texto multilínea, campos de contraseña con visibilidad controlada, menús desplegables dinámicos, barras de progreso configurables, tarjetas simples y botones flotantes con animaciones. Diseñada con TypeScript para mejor tipado y rendimiento optimizado.

Installation

npm install udev_ultime_native react-native-reanimated react-native-safe-area-context

Versión Actual: 3.8.0

Cambios Recientes (v3.8.0)

• ✅ RadioButton: Componente de botón de opción con selección única y estilos personalizables
• ✅ ButtonBar: Barra de botones con múltiples tipos de interacción (Pressable, TouchableOpacity, TouchableHighlight)
• ✅ TabPanel: Sistema de pestañas horizontal con descripción dinámica y navegación por scroll
• ✅ Mejoras de exportación: Todos los componentes nuevos exportados desde el índice principal
• ✅ TypeScript completo: Tipado fuerte para todos los componentes nuevos

Cambios Anteriores (v3.7.0)

• ✅ LayoutScreen System: Sistema completo de layouts para estructurar pantallas con topBar, bottomBar y bodyScreen
• ✅ Tres tipos de BottomBar: Default, Bar_Floating, y BarWithFloatingButton con estilos predefinidos
• ✅ SafeAreaProvider Integration: Manejo automático de áreas seguras en dispositivos con notch o barras de estado
• ✅ Navegación Configurable: Sistema de botones de navegación con iconos activos/inactivos y estados personalizables
• ✅ Body Types: Soporte para ScrollView y View como contenedores del contenido principal
• ✅ Floating Button Support: Integración nativa de botones flotantes en el layout con positioning automático
• ✅ TypeScript completo: Tipado fuerte para todas las props del sistema de layout
• ✅ Documentación detallada: Guías completas de implementación y ejemplos de uso

Componentes

Esta librería incluye los siguientes componentes:

Button

Componente de botón personalizable que soporta diferentes tipos de interacción con estilos por defecto.

import { Button } from 'udev_ultime_native';

<button title="Mi Botón"> console.log('Presionado')}
  style_button={{ backgroundColor: 'blue', padding: 10 }}
  style_text={{ color: 'white' }}
  iconLeft={}
  iconRight={}
/&gt;

Props:

• title (string): Texto del botón
• type_button ('TouchableOpacity' | 'Pressable' | 'TouchableHighlight', opcional): Tipo de componente de botón
• onPress (function, opcional): Función ejecutada al presionar
• onLongPress (function, opcional): Función ejecutada al presionar prolongadamente
• onPressIn (function, opcional): Función ejecutada al iniciar presión
• onPressOut (function, opcional): Función ejecutada al finalizar presión
• onShowUnderlay (function, opcional): Función ejecutada al mostrar underlay (TouchableHighlight)
• onHideUnderlay (function, opcional): Función ejecutada al ocultar underlay (TouchableHighlight)
• onAccessibilityAction (function, opcional): Función para acciones de accesibilidad
• onAccessibilityEscape (function, opcional): Función para escape de accesibilidad
• onAccessibilityTap (function, opcional): Función para tap de accesibilidad
• onBlur (function, opcional): Función ejecutada al perder foco
• onFocus (function, opcional): Función ejecutada al ganar foco
• onLayout (function, opcional): Función ejecutada al cambiar layout
• onMagicTap (function, opcional): Función para magic tap de accesibilidad
• style_button (StyleProp, opcional): Estilos del contenedor del botón (tiene estilos por defecto)
• style_text (StyleProp, opcional): Estilos del texto (tiene estilos por defecto)
• iconLeft (JSX.Element, opcional): Icono a la izquierda del texto
• iconRight (JSX.Element, opcional): Icono a la derecha del texto

InputText

Campo de texto con funcionalidades avanzadas como iconos, modo contraseña y estilos por defecto.

import { InputText } from 'udev_ultime_native';

}
  iconPasswordShow={}
  iconPasswordHide={}
  setShowPassword={setShowPassword}
  ShowPassword={showPassword}
  label={}
/>

Props:

• value (string, opcional): Valor del campo de texto
• onChangeText (function, opcional): Función ejecutada al cambiar el texto
• placeholder (string, opcional): Texto de placeholder
• keyboardType ('default' | 'numeric' | 'email-address' | 'phone-pad', opcional): Tipo de teclado
• secureTextEntry (boolean, opcional): Modo contraseña
• editable (boolean, opcional): Si el campo es editable
• multiline (boolean, opcional): Soporte para múltiples líneas
• numberOfLines (number, opcional): Número de líneas para el input
• readOnly (boolean, opcional): Campo de solo lectura
• clearTextOnFocus (boolean, opcional): Limpiar texto al enfocar
• selectTextOnFocus (boolean, opcional): Seleccionar texto al enfocar
• showSoftInputOnFocus (boolean, opcional): Mostrar teclado al enfocar
• style_input (StyleProp, opcional): Estilos del input (tiene estilos por defecto)
• style_container (StyleProp, opcional): Estilos del contenedor (tiene estilos por defecto)
• placeholderTextColor (string, opcional): Color del placeholder (por defecto 'gray')
• iconLeft (JSX.Element, opcional): Icono a la izquierda
• iconRight (JSX.Element, opcional): Icono a la derecha
• iconPasswordShow (JSX.Element, opcional): Icono para mostrar contraseña
• iconPasswordHide (JSX.Element, opcional): Icono para ocultar contraseña
• setShowPassword (function, opcional): Función para controlar visibilidad de contraseña
• ShowPassword (boolean, opcional): Estado de visibilidad de contraseña
• label (JSX.Element, opcional): Etiqueta o label del campo
• onFocus (function, opcional): Función ejecutada al ganar foco
• onBlur (function, opcional): Función ejecutada al perder foco
• onLayout (function, opcional): Función ejecutada al cambiar layout
• onSubmitEditing (function, opcional): Función ejecutada al enviar
• onKeyPress (function, opcional): Función ejecutada al presionar tecla
• onChange (function, opcional): Función ejecutada al cambiar
• onContentSizeChange (function, opcional): Función ejecutada al cambiar tamaño del contenido
• onEndEditing (function, opcional): Función ejecutada al terminar edición
• onSelectionChange (function, opcional): Función ejecutada al cambiar selección
• onTextInput (function, opcional): Función ejecutada en input de texto
• onPress (function, opcional): Función ejecutada al presionar
• onPressIn (function, opcional): Función ejecutada al iniciar presión
• onPressOut (function, opcional): Función ejecutada al finalizar presión
• onAccessibilityAction (function, opcional): Función para acciones de accesibilidad
• onAccessibilityEscape (function, opcional): Función para escape de accesibilidad
• onAccessibilityTap (function, opcional): Función para tap de accesibilidad
• onMagicTap (function, opcional): Función para magic tap de accesibilidad

InputPassword

Campo de entrada específico para contraseñas con funcionalidad de mostrar/ocultar y manejo interno del estado.

import { InputPassword } from 'udev_ultime_native';

}
  iconPasswordHide={}
  style_container={{ borderWidth: 1, borderColor: 'gray', padding: 10 }}
  style_input={{ fontSize: 16 }}
  placeholderTextColor="gray"
/>

Props:

• value (string, opcional): Valor del campo de contraseña
• onChangeText (function, opcional): Función ejecutada al cambiar el texto
• placeholder (string, opcional): Texto de placeholder
• placeholderTextColor (string, opcional): Color del placeholder (por defecto 'gray')
• style_input (StyleProp, opcional): Estilos del input (tiene estilos por defecto)
• style_container (StyleProp, opcional): Estilos del contenedor (tiene estilos por defecto con flexDirection row)
• iconPasswordShow (JSX.Element, opcional): Icono para mostrar contraseña
• iconPasswordHide (JSX.Element, opcional): Icono para ocultar contraseña
• Todos los eventos de accesibilidad y interacción disponibles

Nota: El estado de visibilidad de contraseña (ShowPassword) se maneja internamente por el componente.

InputTextarea

Campo de texto multilínea optimizado para entradas de texto extensas con soporte completo para eventos y personalización.

import { InputTextarea } from 'udev_ultime_native';

}
  iconRight={}
/>

Props:

• value (string, opcional): Valor del campo de texto
• onChangeText (function, opcional): Función ejecutada al cambiar el texto
• placeholder (string, opcional): Texto de placeholder
• placeholderTextColor (string, opcional): Color del placeholder (por defecto 'gray')
• style_input (StyleProp, opcional): Estilos del input (tiene estilos por defecto)
• style_container (StyleProp, opcional): Estilos del contenedor (tiene estilos por defecto)
• iconLeft (JSX.Element, opcional): Icono a la izquierda
• iconRight (JSX.Element, opcional): Icono a la derecha
• numberOfLines (number, opcional): Número de líneas para el textarea
• Todos los eventos de interacción y accesibilidad disponibles

Nota: El componente está optimizado para texto multilínea con multiline={true} habilitado por defecto.

DropDown

Componente de menú desplegable personalizable con opciones dinámicas y estilos configurables.

import { DropDown } from 'udev_ultime_native';

}
/>

Props:

• style_container (StyleProp, opcional): Estilos del contenedor principal (tiene estilos por defecto)
• style_container_option (StyleProp, opcional): Estilos del contenedor de opciones
• style_button_option (StyleProp, opcional): Estilos de cada botón de opción
• style_text_option (StyleProp, opcional): Estilos del texto de opciones
• style_text_placeholder (StyleProp, opcional): Estilos del texto placeholder
• style_text_selected (StyleProp, opcional): Estilos del texto de la opción seleccionada
• style_buttonOpen_option (StyleProp, opcional): Estilos del botón para abrir opciones
• setValue (function, opcional): Función para establecer el valor seleccionado
• Value (string | number | undefined, opcional): Valor actualmente seleccionado
• data_option (array, opcional): Array de objetos con label y value para las opciones
• placeholder (string, opcional): Texto mostrado cuando no hay selección
• icon (JSX.Element, opcional): Icono mostrado junto al texto del botón

ProgressBar

Barra de progreso altamente personalizable con soporte para iconos, porcentajes y estados coloreados.

import { ProgressBar } from 'udev_ultime_native';

}
  iconRight={}
/>

Props:

• progress (number, requerido): Porcentaje de progreso (0-100)
• height_bar (number, opcional): Altura de la barra (por defecto 30)
• bg_color_progress (string, opcional): Color de la barra de progreso
• bg_container_bar (string, opcional): Color del contenedor de la barra (por defecto '#f8f9fa')
• style_container (StyleProp, opcional): Estilos del contenedor principal
• style_progress_bar (StyleProp, opcional): Estilos de la barra de progreso
• show_percentage (boolean, opcional): Mostrar el porcentaje como texto
• text_style_percentage (StyleProp, opcional): Estilos del texto de porcentaje
• text_percentage (JSX.Element, opcional): Elemento personalizado para mostrar el porcentaje
• iconRight (JSX.Element, opcional): Icono a la derecha del porcentaje
• iconLeft (JSX.Element, opcional): Icono a la izquierda del porcentaje
• status_bar (array, opcional): Array de objetos con color, status y progress para estados coloreados

Card_Simple

Tarjeta simple y elegante con imagen, título, descripción y botón personalizable. Optimizada para React Native con sombras nativas.

import { Card_Simple } from 'udev_ultime_native';

Props:

• title (string, opcional): Título de la tarjeta (por defecto 'Title Simple')
• description (string, opcional): Descripción de la tarjeta (tiene texto por defecto)
• imageUri (string, opcional): URL de la imagen (tiene imagen por defecto)
• text_button (string, opcional): Texto del botón (por defecto 'Click Me')
• style_title (StyleProp, opcional): Estilos del título
• style_description (StyleProp, opcional): Estilos de la descripción
• style_container (StyleProp, opcional): Estilos del contenedor principal (ancho fijo 300px por defecto)
• style_image (StyleProp, opcional): Estilos de la imagen (200px altura por defecto)
• style_button (StyleProp, opcional): Estilos del botón
• style_text_button (StyleProp, opcional): Estilos del texto del botón
• style_container_button (StyleProp, opcional): Estilos del contenedor del botón
• Button (JSX.Element, opcional): Botón personalizado para reemplazar el por defecto

Nota: La tarjeta usa un Pressable interno con estilos optimizados. El título se trunca automáticamente después de 25 caracteres. Las sombras están optimizadas para iOS (shadowColor, shadowOffset, shadowOpacity, shadowRadius) y Android (elevation).

FloatingButton

Botón flotante con opciones expandibles y animaciones suaves usando react-native-reanimated.

import { FloatingButton } from 'udev_ultime_native';

}
  icon_show={}
  Data_Button={[
    {
      icon: ,
      onPress: () => console.log('Home pressed'),
      style_button: { backgroundColor: 'blue' }
    },
    {
      icon: ,
      onPress: () => console.log('Settings pressed'),
      style_button: { backgroundColor: 'green' }
    }
  ]}
  SelectFun_onPress="Data_Button"
  SelectFun_onLongPress="onLongPress"
  timing_animation_buttons={400}
/>

Props:

• icon_hide (ReactNode, requerido): Icono mostrado cuando el menú está cerrado
• icon_show (ReactNode, opcional): Icono mostrado cuando el menú está abierto
• Data_Button (array, opcional): Array de objetos con icon, onPress, style_button y onLongPress para las opciones
• timing_animation_buttons (number, opcional): Duración de las animaciones en milisegundos (por defecto 500ms para mostrar, 300ms para ocultar)
• style_floating_button (StyleProp, opcional): Estilos del botón principal (tiene estilos por defecto)
• style_container_button (StyleProp, opcional): Estilos del contenedor de opciones
• style_main_container (StyleProp, opcional): Estilos del contenedor principal
• onPress (function, opcional): Función ejecutada al presionar el botón principal
• onLongPress (function, opcional): Función ejecutada al presionar prolongadamente el botón principal
• SelectFun_onPress ('onPress' | 'Data_Button', requerido): Selecciona qué función ejecutar al presionar (función personalizada o mostrar/ocultar opciones)

Nota: El componente utiliza react-native-reanimated para animaciones suaves de opacidad y escala. Las opciones aparecen con animación desde el botón principal hacia arriba.

RadioButton

Componente de botón de opción para selección única con diseño personalizable y manejo de estado externo.

import { RadioButton } from 'udev_ultime_native';

Props:

• value (string, opcional): Valor único del botón de opción
• value_selected (string | undefined, requerido): Valor actualmente seleccionado
• label (string, opcional): Texto de la etiqueta del botón
• setValue (Dispatch>, requerido): Función para actualizar el valor seleccionado
• style_container (object, opcional): Estilos del contenedor principal (con flexDirection row por defecto)
• style_label (object, opcional): Estilos del texto de la etiqueta
• style_radio (object, opcional): Estilos del círculo del botón (20x20px por defecto)
• style_point_radio (object, opcional): Estilos del punto interior cuando está seleccionado (10x10px por defecto)

Nota: El componente requiere manejo de estado externo para el valor seleccionado. El diseño incluye un círculo con borde y un punto interior que aparece cuando está seleccionado.

ButtonBar

Barra de botones que permite elegir entre diferentes tipos de componentes táctiles con estilos unificados.

import { ButtonBar } from 'udev_ultime_native';

 console.log('Pressed')}
  style_button={{ backgroundColor: '#007bff' }}
/>

Props:

• type_button ('Pressable' | 'Button' | 'TouchableOpacity' | 'TouchableHighlight', requerido): Tipo de botón a renderizar
• onPress (function, opcional): Función ejecutada al presionar el botón
• onLongPress (function, opcional): Función ejecutada al presionar prolongadamente
• style_button (StyleProp, opcional): Estilos del contenedor del botón (con flex: 1 por defecto)
• style_text (StyleProp, opcional): Estilos del texto del botón

Tipos disponibles:

• Pressable: Botón moderno con texto "Pressable"
• Button: Botón nativo de React Native con título "Button"
• TouchableOpacity: Botón con efecto de opacidad y texto "TouchableOpacity"
• TouchableHighlight: Botón con efecto de resaltado y texto "TouchableHighlight"

Nota: El contenedor tiene flexDirection: 'row' y justifyContent: 'space-between' por defecto. Cada botón ocupa el espacio disponible con flex: 1.

TabPanel

Sistema de pestañas horizontal con navegación por scroll y contenido dinámico basado en la pestaña seleccionada.

import { TabPanel } from 'udev_ultime_native';

Props:

• Data_Tabs (array, opcional): Array de objetos con configuración de pestañas
  • label (string, requerido): Texto mostrado en la pestaña
  • description (string | undefined, opcional): Contenido mostrado al seleccionar la pestaña
  • value (string, requerido): Identificador único de la pestaña
  • style_description (StyleProp, opcional): Estilos específicos para la descripción de esta pestaña
• style_container (object, opcional): Estilos del contenedor principal (con borde y padding por defecto)
• style_tab_container (object, opcional): Estilos del contenedor de pestañas (con borde inferior por defecto)
• style_text_tab (object, opcional): Estilos del texto de las pestañas
• style_description (object, opcional): Estilos globales de la descripción
• border_tab_selected (string, opcional): Color del borde y texto de la pestaña seleccionada (por defecto '#000000')
• border_tab_unselected (string, opcional): Color del borde y texto de pestañas no seleccionadas (por defecto '#ffffff' y 'gray')

Características:

• Navegación horizontal con scroll automático
• Selección automática de la primera pestaña al cargar
• Indicador visual con borde inferior en la pestaña activa
• Contenido dinámico que cambia según la pestaña seleccionada
• Soporte para scroll horizontal cuando hay muchas pestañas

Nota: El componente maneja internamente el estado de la pestaña seleccionada y actualiza automáticamente el contenido mostrado. El diseño es responsivo con scroll horizontal para pestañas que excedan el ancho de la pantalla.

LayoutScreen

Sistema de layout completo para estructurar pantallas con topBar, bottomBar y bodyScreen personalizables.

import { LayoutScreen } from 'udev_ultime_native';


      
    
  }
  type_BottomBar="Bar_Floating"
  Data_BottomBar={[
    {
      label: "Home",
      onPress: () => console.log("Home Pressed"),
      icon_in: ,
      icon_out: ,
      isInScreen: true,
    },
    {
      label: "Settings",
      onPress: () => console.log("Settings Pressed"),
      icon_in: ,
      icon_out: ,
      isInScreen: false,
    }
  ]}
  floating_button={
    
      
    
  }
  bodyScreen={
    
  }
/>

Props:

• topBar (ReactNode, opcional): Componente personalizado para la barra superior
• bottomBar (ReactNode, opcional): Componente personalizado para la barra inferior
• type_BottomBar ('Default' | 'Bar_Floating' | 'BarWithFloatingButton', opcional): Tipo de barra inferior predefinida
• style_bottomBar (StyleProp, opcional): Estilos personalizados para la barra inferior
• bodyScreen (ReactNode, requerido): Contenido principal de la pantalla
• type_Body ('ScrollView' | 'View', opcional): Tipo de contenedor para el cuerpo de la pantalla
• Data_BottomBar (array, opcional): Array de objetos para configurar los botones de la barra inferior
• floating_button (ReactNode, opcional): Botón flotante personalizado (usado con 'BarWithFloatingButton')
• style_container_floating_button (StyleProp, opcional): Estilos del contenedor del botón flotante

Estructura de Data_BottomBar:

• label (string, opcional): Texto del botón
• onPress (function, requerido): Función ejecutada al presionar
• icon_in (ReactNode, requerido): Icono cuando está activo/en pantalla
• icon_out (ReactNode, opcional): Icono cuando está inactivo
• isInScreen (boolean, opcional): Indica si es la pantalla actual (para mostrar icon_in o icon_out)
• style_text (StyleProp, opcional): Estilos del texto del botón
• style_button (StyleProp, opcional): Estilos del contenedor del botón
• onLongPress (function, opcional): Función ejecutada al presionar prolongadamente

Tipos de BottomBar:

• Default: Barra inferior estándar con botones distribuidos uniformemente
• Bar_Floating: Barra flotante centrada con bordes redondeados
• BarWithFloatingButton: Barra estándar con un botón flotante posicionado arriba

Nota: El componente utiliza SafeAreaProvider de react-native-safe-area-context para manejar áreas seguras en dispositivos con notch o barras de estado.

Instalación de Dependencias

npm install udev_ultime_native react-native-reanimated react-native-safe-area-context

Importante:

• Para usar FloatingButton, es necesario instalar y configurar react-native-reanimated siguiendo la documentación oficial.
• Para usar LayoutScreen, es necesario instalar react-native-safe-area-context siguiendo la documentación oficial.
• Para proyectos Expo: Crear babel.config.js en la raíz del proyecto:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

Compatibilidad

• react-native-reanimated: >=3.0.0
• React: >=18.0.0
• React Native: >=0.70.0
• Expo: >=49.0.0

Uso

import {
  Button,
  InputText,
  InputPassword,
  InputTextarea,
  DropDown,
  ProgressBar,
  Card_Simple,
  FloatingButton,
  LayoutScreen
} from 'udev_ultime_native';

// Usar cualquiera de los componentes en tu aplicación
</button><button title="Mi Botón"> console.log('Presionado')} /&gt;

}
  Data_Button={[...]}
  SelectFun_onPress="Data_Button"
  SelectFun_onLongPress="onLongPress"
/&gt;

Ejemplo de uso completo

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import { 
  Button, 
  InputText, 
  InputPassword, 
  InputTextarea, 
  DropDown, 
  ProgressBar,
  Card_Simple,
  FloatingButton,
  LayoutScreen
} from 'udev_ultime_native';

export default function App() {
  const [text, setText] = useState('');
  const [password, setPassword] = useState('');
  const [message, setMessage] = useState('');
  const [selectedValue, setSelectedValue] = useState('');
  const [progress, setProgress] = useState(65);

  const options = [
    { label: 'Opción 1', value: 'option1' },
    { label: 'Opción 2', value: 'option2' },
    { label: 'Opción 3', value: 'option3' },
  ];

  const floatingOptions = [
    {
      icon: ,
      onPress: () => console.log('Home pressed'),
      style_button: { backgroundColor: 'blue' }
    },
    {
      icon: ,
      onPress: () => console.log('Settings pressed'),
      style_button: { backgroundColor: 'green' }
    }
  ];

  return (
    </button><button title="Enviar"> console.log('Datos enviados')}
        style_button={{ backgroundColor: 'blue', padding: 15, borderRadius: 5 }}
        style_text={{ color: 'white', textAlign: 'center' }}
      /&gt;

      +}
        icon_show={}
        Data_Button={floatingOptions}
        SelectFun_onPress="Data_Button"
        SelectFun_onLongPress="onLongPress"
        style_main_container={{ position: 'absolute', bottom: 20, right: 20 }}
      /&gt;
    
  );
}

Solución de Problemas

Error: TurboModule method "installTurboModule" called with 0 arguments

Este error suele ocurrir cuando react-native-reanimated no está configurado correctamente.

Solución:

1. Asegúrate de tener react-native-reanimated instalado:

   npm install react-native-reanimated
   

2. Configura babel.config.js:

   module.exports = function (api) {
     api.cache(true);
     return {
       presets: ['babel-preset-expo'], // o ['@react-native/babel-preset'] para RN CLI
       plugins: ['react-native-reanimated/plugin'], // DEBE ser el último plugin
     };
   };
   

3. Limpia la caché y reinicia:

   npx expo start --clear  # Para Expo
   # o
   npx react-native start --reset-cache  # Para RN CLI
   

Error: Route "./index.tsx" is missing the required default export

Solución: Asegúrate de exportar tu componente como default:

export default function Index() {
  // tu código
}

Error: Invalid prop style supplied to React.Fragment

Este error está solucionado en la versión 3.6.1. Si persiste:

1. Actualiza a la versión más reciente: npm install udev_ultime_native@latest
2. Limpia node_modules: rm -rf node_modules && npm install

Incompatibilidad de versiones

Si experimentas problemas de compatibilidad, verifica las versiones:

• react-native-reanimated: >=3.0.0
• react: >=18.0.0
• react-native: >=0.70.0

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT

---

Made with ❤️ by UrpirioDev