react native dynamic search bar

Spinner incorporado

Versión 2.0?

¿La versión 2.0 está aquí?

• ¿Completamente reescrito desde cero?
• Codificación mucho mejor para el mantenimiento y menos dependencia
• ¿Se eliminan 3 dependencias?
• Una mejor gestión de proporción y las personalizaciones geniales son posibles ahora
• Integración del modo oscuro?

No puedo esperar a ver qué vas a hacer con esta SearchBar .

Instalación

Agregue la dependencia:

Reaccionar nativo

npm i react-native-dynamic-search-bar

npm i react-native-spinkit

npm i @freakycoder/react-native-bounceable

Versión de expo

npm i WrathChaos/react-native-dynamic-search-bar#expo

npm i react-native-animated-spinkit

npm i @freakycoder/react-native-bounceable

Dependencias de pares

¡IMPORTANTE! Necesitas instalarlos

 "react-native-spinkit" : ">= 1.5.0" ,
"@freakycoder/react-native-bounceable" : ">= 0.2.2" , 

Dependencias entre pares de la exposición

¡IMPORTANTE! Necesitas instalarlos

 "react-native-animated-spinkit" : ">= 1.5.0" ,
"@freakycoder/react-native-bounceable" : ">= 0.2.2" ,

Uso

Importar

 import SearchBar from "react-native-dynamic-search-bar" ; 

Uso básico

 < SearchBar
  placeholder = "Search here"
  onPress = { ( ) => alert ( "onPress" ) }
  onChangeText = { ( text ) => console . log ( text ) }
/> 

Uso avanzado

Puede verificar el ejemplo del uso avanzado

 < SearchBar
  fontColor = "#c6c6c6"
  iconColor = "#c6c6c6"
  shadowColor = "#282828"
  cancelIconColor = "#c6c6c6"
  backgroundColor = "#353d5e"
  placeholder = "Search here"
  onChangeText = { ( text ) => this . filterList ( text ) }
  onSearchPress = { ( ) => console . log ( "Search Icon is pressed" ) }
  onClearPress = { ( ) => this . filterList ( "" ) }
  onPress = { ( ) => alert ( "onPress" ) }
/> 

Uso avanzado de spinner incorporado

Puede verificar el ejemplo del uso avanzado de spinner incorporado

 import React , { Component } from "react" ;
import { View } from "react-native" ;
import SearchBar from "react-native-dynamic-search-bar" ;

export default class Test extends Component {
  handleOnChangeText = ( text ) => {
    // ? Visible the spinner
    this . setState ( {
      searchText : text ,
      spinnerVisibility : true ,
    } ) ;

    // ? After you've done to implement your use-case
    // ? Do not forget to set false to spinner's visibility
    this . setState ( {
      spinnerVisibility : false ,
    } ) ;
  } ;

  render ( ) {
    const { spinnerVisibility } = this . state ;
    return (
      < View >
        < SearchBar
          height = { 50 }
          fontSize = { 24 }
          fontColor = "#fdfdfd"
          iconColor = "#fdfdfd"
          shadowColor = "#282828"
          cancelIconColor = "#fdfdfd"
          backgroundColor = "#ba312f"
          spinnerVisibility = { spinnerVisibility }
          placeholder = "Search any cosmetics ..."
          fontFamily = "BurbankBigCondensed-Black"
          shadowStyle = { styles . searchBarShadowStyle }
          onChangeText = { this . handleOnChangeText }
        />
      </ View >
    ) ;
  }
}

Configuración - Props

Propiedad	Tipo	Por defecto	Descripción
estilo	Vista de estilo	por defecto	Establezca o anule el objeto de estilo para la vista de búsqueda principal
moderno	booleano	FALSO	Habilitar el modo oscuro
onChangetext	función	función	Establezca su propia función para la lógica de OnChangetext
inesperado	función	función	Establezca su propia función para la funcionalidad Onpress
OnSearchPress	función	función	Establezca su propia función para la funcionalidad Onpress del botón de búsqueda
OnclearPress	función	función	Establezca su propia función para la funcionalidad Onpress del botón Borrar
en el franco	función	función	Establezca su propia función para la funcionalidad Onblur de la entrada de texto
en el tope	función	función	Establezca su propia función para la funcionalidad Onblur de la entrada de texto
textInputStyle	Estilo de texto	por defecto	establecer o anular el objeto de estilo para la entrada de texto
SearchiConImageStyle	Estilo de imagen	por defecto	Establezca o anule el objeto de estilo para el estilo de imagen del icono de búsqueda
CleariConImageStyle	Estilo de imagen	por defecto	Establezca o anule el objeto de estilo para el estilo de imagen de icono de claro
ImageComponent	componente	Imagen	Establezca su propio componente de imagen en lugar de la imagen predeterminada de React-Native One
seankoncomponent	componente	por defecto	Establezca su propio componente en lugar de icono para el componente de búsqueda
Cleariconcomponent	componente	por defecto	Establezca su propio componente en lugar de icono para el componente transparente
SearchiConImageSource	Isource	por defecto	Cambiar la fuente de imagen de icono de búsqueda
CleariconImageSource	Isource	por defecto	Cambiar la fuente de imagen de icono de claro
CleariconImageSource	Isource	por defecto	Cambiar la fuente de imagen de icono de claro
marcador de posición	cadena	"Buscar aquí ..."	Establezca su propia cadena de marcador de posición
PLADELDERTREXTCOLOR	color	indefinido	Establecer el color del texto del marcador de posición
spinnercolor	color	#fdfdfd	Cambiar el color de la ruleta
hilanderos	número	por defecto	Cambiar el tamaño de la ruleta
Tipo de spinnert	componente	Círculo	Cambiar el tipo de hilería
Spinnervisibilidad	booleano	FALSO	Cambiar la visibilidad de Spinner

Compatibilidad de la exposición

La barra de búsqueda dinámica se puede usar con Expo. Solo necesita agregar una dependencia de los pares:

 "react-native-dynamic-vector-icons" : "WrathChaos/react-native-dynamic-vector-icons#expo" 

Problemas conocidos

Androide

Los iconos vectoriales no muestran: O

-> Debe agregar esta línea de código a la aplicación/gradle

 apply from : "../../node_modules/react-native-vector-icons/fonts.gradle" 

¿Las animaciones no funcionan en el Android como el ejemplo?

-> Debe habilitar la diseño experimental en el Android. Aquí está cómo hacerlo:

 import { UIManager } from 'react-native' ;

constructor ( ) {
    super ( ) ;
    if ( Platform . OS === 'android' ) {
      UIManager . setLayoutAnimationEnabledExperimental && UIManager . setLayoutAnimationEnabledExperimental ( true ) ;
    }
}

Hoja de ruta

• Completamente reescrito con una mejor codificación y menos dependencia
• Refactorización de código completo con mejor mecanografiado
• LICENCIA
• Escribe un artículo sobre la lib en medio
• Desafío mecanografiado!
• Actualizar la versión de Expo a las últimas funciones
• Eliminación de estilo de sombra incorporado
• Ejemplo de sombra de envoltura en la documentación
• Mejor ejemplo y gifs

Autor

Freakycoder, [email protected]

Licencia

React Native Dynamic Barb Biblioteca está disponible bajo la licencia MIT. Consulte el archivo de licencia para obtener más información.