¿Cómo agregar SearchBar en React Native?

En este artículo agregaremos la función de búsqueda en React-Native. Esto puede considerarse como una continuación del componente de lista plana nativa de React/ . En el artículo mencionado anteriormente, creamos una lista plana usando el componente Flatlist, hagamos que se pueda buscar usando el componente SearchBar. Para agregar una barra de búsqueda a su lista plana, la sintaxis básica es la siguiente:

Sintaxis básica:

<SearchBar
    placeholder="Type Here..."
    onChangeText={this.updateSearch}
    value={search}
/>

Enfoque: la sintaxis anterior agrega una barra de búsqueda estándar específica de la plataforma en su aplicación, que suele ser un cuadro rectangular con espacio para la entrada. Al desplazarse a la sección de implementación, notará que agregamos un marcador de posición de apoyo que especifica el valor predeterminado que muestra la barra de búsqueda cuando se abre. Además, queremos que la barra de búsqueda tenga un tema claro con bordes redondeados, de ahí los siguientes accesorios. Ahora, cuando queremos buscar un valor, queremos mostrar ese valor que se ingresa en la barra de búsqueda, para eso agregamos un valor de búsqueda de objetos de Buscarclass, por defecto está vacío, pero a medida que escribimos se modifica y almacena nuestra entrada de texto actual. Dado que los valores de búsqueda son personalizados, desactivamos la opción de corrección automática e invocamos la función de búsqueda tan pronto como se ingresa el texto en el campo de búsqueda.

Accesorios en la barra de búsqueda:

• cancelButtonProps: especifica varios accesorios pasados ​​para cancelar el botón, estos pueden personalizar su color, estilo de botón, color de texto, etc.
• cancelButtonTitle: solía personalizar el título del botón cancelar presente en el lado derecho.
• cancelIcon:   este accesorio permite anular los accesorios de icono o usar un componente personalizado, también esto es específico para la plataforma Android.
• clearIcon: este accesorio permite anular los accesorios de icono o usar un componente personalizado. Se pueden utilizar valores como nulo o falso para ocultar el icono.
• containerStyle: el contenedor de SearchBar se puede estilizar usando este accesorio.
• inputContainerStyle: esta propiedad se usa para diseñar el contenedor donde se ingresa el texto.
• inputStyle: este apoyo se utiliza para estilizar el texto de entrada.
• leftIconContainerStyle: aplica estilo al contenedor de iconos en el lado izquierdo.
• lightTheme: este accesorio cambia el tema a un tema claro.
• loadingProps: este accesorio se pasa a ActivityIndicator.
• onCancel:   este accesorio permite que se active la devolución de llamada al presionar el botón cancelar (iOS) o el ícono Atrás (Android).
• onChangeText: esta propiedad invoca el método que debería activarse cuando se cambia el texto.
• onClear:   Esto especifica el método que se activará cuando se borre la entrada.
• marcador de posición: este accesorio se utiliza para establecer el texto del marcador de posición.
• placeholderTextColor: esta propiedad establece el color del texto del marcador de posición.
• plataforma:   esta propiedad especifica la apariencia de la barra de búsqueda. Los valores a elegir son «predeterminado», «ios», «android».
• rightIconContainerStyle: podemos diseñar el contenedor de iconos en el lado derecho usando este accesorio.
• round : este accesorio se usa para cambiar el estilo de TextInput a esquinas redondeadas.
• searchIcon: este accesorio permite anular los accesorios de icono o usar un componente personalizado. Utilice nulo o falso para ocultar el icono.
• showCancel: este propif establecido en verdadero, el botón de cancelar permanecerá visible incluso después de los eventos de desenfoque.
• showLoading: esta propiedad muestra el efecto del indicador de actividad de carga.
• underlineColorAndroid: esta propiedad especifica un color de subrayado transparente, que no sea el predeterminado.

Implementación:

• Paso 1: Abra su terminal e instale expo-cli, si aún no lo ha hecho.

  npm install --global expo-cli

• Paso 2: después de la instalación, inicialicemos un proyecto, si aún no lo ha hecho.

  expo init dummy

• Paso 3: Ahora navegue a su proyecto.

  cd dummy

Estructura de carpetas: si siguió los pasos anteriores, su estructura de carpetas debería verse así.

Ejemplo: ahora veamos la implementación de cómo agregar una barra de búsqueda usando el enfoque anterior.

import React, { Component } from "react";
import { StyleSheet, Text, View, FlatList } from "react-native";
import { ListItem, SearchBar } from "react-native-elements";
import filter from "lodash.filter";
  
const DATA = [
  {
    id: "1",
    title: "Data Structures",
  },
  {
    id: "2",
    title: "STL",
  },
  {
    id: "3",
    title: "C++",
  },
  {
    id: "4",
    title: "Java",
  },
  {
    id: "5",
    title: "Python",
  },
  {
    id: "6",
    title: "CP",
  },
  {
    id: "7",
    title: "ReactJs",
  },
  {
    id: "8",
    title: "NodeJs",
  },
  {
    id: "9",
    title: "MongoDb",
  },
  {
    id: "10",
    title: "ExpressJs",
  },
  {
    id: "11",
    title: "PHP",
  },
  {
    id: "12",
    title: "MySql",
  },
];
  
const Item = ({ title }) => {
  return (
    <View style={styles.item}>
      <Text>{title}</Text>
    </View>
  );
};
  
const renderItem = ({ item }) => <Item title={item.title} />;
class Search extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      data: DATA,
      error: null,
      searchValue: "",
    };
    this.arrayholder = DATA;
  }
  
  searchFunction = (text) => {
    const updatedData = this.arrayholder.filter((item) => {
      const item_data = `${item.title.toUpperCase()})`;
      const text_data = text.toUpperCase();
      return item_data.indexOf(text_data) > -1;
    });
    this.setState({ data: updatedData, searchValue: text });
  };
  
  render() {
    return (
      <View style={styles.container}>
        <SearchBar
          placeholder="Search Here..."
          lightTheme
          round
          value={this.state.searchValue}
          onChangeText={(text) => this.searchFunction(text)}
          autoCorrect={false}
        />
        <FlatList
          data={this.state.data}
          renderItem={renderItem}
          keyExtractor={(item) => item.id}
        />
      </View>
    );
  }
}
  
export default Search;
  
const styles = StyleSheet.create({
  container: {
    marginTop: 30,
    padding: 2,
  },
  item: {
    backgroundColor: "#f5f520",
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
});

Ejecute la aplicación: ahora, inicie su servidor ejecutando el siguiente comando

npm run web

Puede escanear su código QR generado desde la aplicación Expo Go y obtener este resultado.

Producción:

Referencia: https://reactnativeelements.com/docs/searchbar/