@nova-ui-native/core 🚀

Un kit de componentes nativos profesionales, intuitivos y altamente optimizados para aplicaciones de React Native y Expo. Diseñado con un enfoque moderno, limpio y totalmente personalizable.

📦 Instalación

Instala el paquete en tu proyecto.

npm

npm install @nova-ui-native/core

Yarn

yarn add @nova-ui-native/core

pnpm

pnpm add @nova-ui-native/core

📑 CustomModernModal & useModal()

Un sistema integrado de Diálogos, Bottom Sheets y Pantallas Completas, impulsado por animaciones fluidas y gestos nativos, controlado desde un único hook.

✨ Características

• 🎭 Soporta variantes bottom, center y fullscreen.
• 🕹️ Configuración completa desde useModal().
• 🫳 Swipe Down para cerrar (deshabilitado automáticamente en diálogos).
• 🎨 Animaciones slide, scale y slide-right.
• 📱 Compatible con React Native y Expo.

📋 Props de CustomModernModal

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | visible | boolean | ✅ | false | Estado del modal. | | onClose | () => void | ✅ | — | Callback al cerrar. | | variant | 'bottom' \| 'center' \| 'fullscreen' | ❌ | 'bottom' | Tipo de modal. | | animation | 'slide' \| 'scale' \| 'slide-right' | ❌ | 'slide' | Animación de entrada. | | title | string | ❌ | — | Título del modal. | | marginTop | number | ❌ | 5 | Margen superior del encabezado. | | maxHeight | number | ❌ | Dinámico | Altura máxima del contenido. | | options | { label:string; value:any; icon?:string }[] | ❌ | [] | Lista de opciones. | | onSelectOption | (value:any)=>void | ❌ | — | Evento al seleccionar una opción. |

🚀 Ejemplo de uso

import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { CustomModernModal, useModal } from '@nova-ui-native/core';

export default function HomeScreen() {

  const checkoutModal = useModal({
    defaultVariant: 'bottom',
    defaultAnimation: 'slide',
    title: 'Panel de Pago',
    marginTop: 15,
  });

  return (
    <View style={styles.container}>

      <TouchableOpacity
        style={styles.btn}
        onPress={() => checkoutModal.open()}
      >
        <Text style={styles.btnText}>
          Abrir Checkout
        </Text>
      </TouchableOpacity>

      <CustomModernModal {...checkoutModal.modalProps}>

        <View style={{ paddingVertical: 10 }}>

          <Text style={styles.text}>
            Render de Facturación / Tarjetas
          </Text>

          <TouchableOpacity
            style={styles.actionBtn}
            onPress={checkoutModal.close}
          >
            <Text style={styles.btnText}>
              Confirmar Transacción
            </Text>
          </TouchableOpacity>

        </View>

      </CustomModernModal>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    justifyContent:'center',
    padding:24,
    backgroundColor:'#FAFAFA'
  },
  btn:{
    backgroundColor:'#18181B',
    padding:16,
    borderRadius:12,
    alignItems:'center'
  },
  actionBtn:{
    backgroundColor:'#059669',
    padding:14,
    borderRadius:10,
    marginTop:20,
    alignItems:'center'
  },
  btnText:{
    color:'#FFF',
    fontWeight:'600'
  },
  text:{
    color:'#52525B',
    fontSize:15,
    textAlign:'center'
  }
});

🔍 CustomAutocomplete

Un componente reutilizable de autocompletado para React Native con soporte para búsqueda local y mediante API.

✨ Características

• 🔍 Búsqueda en tiempo real.
• 📡 Soporte para filtrado local o remoto.
• ⚡ Optimizado para grandes volúmenes de datos.
• 🎨 Interfaz moderna y minimalista.
• ♻️ Totalmente tipado con TypeScript.

📋 Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | data | T[] | ✅ | — | Datos del componente. | | valueKey | keyof T | ✅ | — | Campo identificador. | | filterKey | keyof T | ✅ | — | Campo utilizado para buscar. | | value | string \| number \| null | ✅ | — | Valor seleccionado. | | onSelect | (value)=>void | ✅ | — | Evento al seleccionar. | | filterMode | 'local' \| 'api' | ❌ | 'local' | Tipo de búsqueda. | | onSearch | (query)=>void | ❌ | — | Callback para búsqueda remota. | | minSearchLength | number | ❌ | 1 | Caracteres mínimos para buscar. | | placeholder | string | ❌ | "Buscar..." | Placeholder del input. | | label | string | ❌ | — | Etiqueta superior. | | helperText | string | ❌ | — | Texto de ayuda. | | error | boolean | ❌ | false | Estado de error. | | loading | boolean | ❌ | false | Indicador de carga. | | containerStyle | StyleProp<ViewStyle> | ❌ | — | Estilo del contenedor. | | visibleItems | number | ❌ | 4 | Máximo de elementos visibles. | | maxResults | number | ❌ | 200 | Máximo de resultados. | | heightItem | number | ❌ | 0 | Altura adicional por elemento. |

🚀 Ejemplo

import React, { useState } from "react";
import { SafeAreaView, StyleSheet } from "react-native";
import { CustomAutocomplete } from "@nova-ui-native/core";

interface ItemData {
  id: string;
  nombre: string;
}

export default function App() {

  const [selectedValue, setSelectedValue] = useState<string | number | null>(null);

  const datasets: ItemData[] = [
    { id: "1", nombre: "Opción 1" },
    { id: "2", nombre: "Opción 2" },
    { id: "3", nombre: "Opción 3" },
    { id: "4", nombre: "Opción 4" },
  ];

  return (
    <SafeAreaView style={styles.container}>

      <CustomAutocomplete
        data={datasets}
        filterKey="nombre"
        valueKey="id"
        value={selectedValue}
        onSelect={setSelectedValue}
        label="Seleccione una opción"
        placeholder="Buscar..."
      />

    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container:{
    flex:1,
    padding:20,
    backgroundColor:"#F8FAFC"
  }
});

🌐 Búsqueda mediante API

<CustomAutocomplete
  data={clientes}
  value={cliente}
  valueKey="id"
  filterKey="nombre"
  filterMode="api"
  onSearch={buscarClientes}
  onSelect={setCliente}
/>

📂 Filtrado Local

<CustomAutocomplete
  data={clientes}
  value={cliente}
  valueKey="id"
  filterKey="nombre"
  onSelect={setCliente}
/>

🎨 Personalización

<CustomAutocomplete
  data={clientes}
  valueKey="id"
  filterKey="nombre"
  value={cliente}
  onSelect={setCliente}
  label="Clientes"
  helperText="Seleccione un cliente."
  placeholder="Buscar cliente..."
  visibleItems={6}
  maxResults={100}
  containerStyle={{ marginVertical: 10 }}
/>

📄 Licencia

MIT

❤️ Desarrollado para

• ⚛️ React Native
• 🚀 Expo
• 📘 TypeScript
• 🤖 Android
• 🍎 iOS

🔑 Palabras clave

React Native • Expo • UI Kit • Components • Autocomplete • Modal • Bottom Sheet • Search • TypeScript • Design System • Mobile UI • Native Components