Cómo construir una React Native FlatList con capacidad de búsqueda en tiempo real

Si alguna vez usó una aplicación móvil o creó una, entonces debe haber encontrado algún tipo de lista, ya sea una larga lista de contactos, productos, países u otras cosas.

Pueden parecer muy simples para un usuario final. Pero para los desarrolladores, mostrar una larga lista de datos siempre ha sido un problema cuando se trata de listas largas de rendimiento. Esto es especialmente cierto en las aplicaciones que se crean con React Native.

Antecedentes

Durante los primeros días de React Native, tuvimos a los buenos ListView. Tenía muchas características que lo hacían muy atractivo y era una opción predeterminada para mostrar de manera eficiente la lista vertical de datos cambiantes.

Sin embargo, con el tiempo, surgieron muchos problemas y errores, y llegó un momento en que el equipo de React Native se dio cuenta de que era hora de reinventar la rueda.

Entrar en FlatList

En marzo de 2017, Facebook introdujo el FlatListcomponente, que es una forma más sencilla y eficaz de implementar listas sencillas y eficaces. No solo eso, su API es más fácil de entender que la original ListView. Así es como se ve una FlatList simple:

 } />

Aparte de FlatList, también puede utilizar SectionListpara renderizar listas seccionadas.

Que sigue

Como mencioné anteriormente, ListView se usó principalmente para mostrar listas largas de datos cambiantes verticales. Pero las listas largas de datos son tan útiles como un martillo sin mango. ?

Casi todo el tiempo, cada vez que encuentra una lista larga de datos, también se le presenta la capacidad de buscar esos datos para que no se pierda en la búsqueda.

React Native Searchable FlatList

Decidí construir algo para resolver este problema. Puede encontrar el repositorio completo del proyecto aquí.

Si no está familiarizado con FlatList, le recomendaría que repase primero los conceptos básicos de FlatList. Este artículo de Spencer Carli es el mejor para principiantes que son nuevos en React Native.

Y ahora, sin más preámbulos, ¡comencemos y creemos nuestra lista plana de búsqueda!

Primero, establezcamos algunos estados iniciales que usaremos más adelante en el proyecto:

this.state = { loading: false, data: [], error: null, };

También necesitaremos una variable de matriz:

this.arrayholder = [];

Aparentemente, una lista vacía no es divertida. Así que condimente con una lista aleatoria de usuarios.

Vamos al usuario randomuser.me, que es una API gratuita de código abierto para generar datos de usuario aleatorios. Es como Lorem Ipsum, pero para la gente.

Creemos una función que vaya y obtenga algunos datos del usuario para nosotros.

makeRemoteRequest = () => { const url = `//randomuser.me/api/?&results=20`; this.setState({ loading: true }); fetch(url) .then(res => res.json()) .then(res => { this.setState( null, loading: false, ); this.arrayholder = res.results; }) .catch(error => { this.setState({ error, loading: false }); }); };

En el fragmento de código anterior, estamos usando la fetchAPI para realizar una solicitud de API remota. Cuando se complete la solicitud, recibiremos los datos del usuario que se guardan en el dataestado y también en nuestro arrayholder.

Ahora, para que el usuario busque en la lista, debemos agregar una barra de búsqueda en la parte superior del archivo FlatList. FlatListtiene un accesorio para agregar cualquier componente personalizado a su encabezado, r lo cual es útil ya que agregaremos un componente de búsqueda allí.

renderHeader = () => { return (  this.searchFilterFunction(text)} autoCorrect={false} /> ); };

En la función anterior, estamos usando un react-native-elementsSearchBarcomponente como componente de encabezado.

De forma predeterminada, no hay lógica que filtre la lista a medida que escribimos dentro de SearchBar. Para eso, necesitaremos escribir una función que filtre los resultados como el texto dentro de los SearchBarcambios.

searchFilterFunction = text => { const newData = this.arrayholder.filter(item => { const itemData = `${item.name.title.toUpperCase()} ${item.name.first.toUpperCase()} ${item.name.last.toUpperCase()}`; const textData = text.toUpperCase(); return itemData.indexOf(textData) > -1; }); this.setState({ data: newData }); };

La función anterior ejecutará la función de filtro en el arrayholder. Filtraremos usuarios en función de su nombre, por lo que almacenaremos el nombre dentro de la itemDatavariable y lo convertiremos a mayúsculas.

Esta función recibirá el texto que el usuario ingrese como parámetro, el cual almacenaremos en otra variable textData luego de convertirlo a mayúsculas.

Después de eso, usaremos indexOfpara comparar el texto y devolver verdadero si el texto se encuentra dentro del itemData. Si se devuelve un verdadero, entonces filterse mantendrán los datos; de lo contrario, se ignorará. De modo que se devuelven nuevos datos cada vez que el usuario escribe cualquier texto en la barra de búsqueda. Estos nuevos datos se establecen en el dataestado, que eventualmente se utilizará como fuente de datos para FlatList.

Ahora es el momento de renderizar FlatList.

  (  )} keyExtractor={item => item.email} ItemSeparatorComponent={this.renderSeparator} ListHeaderComponent={this.renderHeader} />

Eso es todo lo que necesitamos hacer. ¡¡Viva!!

Pensamientos finales

Me salteé un código que no es tan importante para este tutorial y en aras de la brevedad. Puede encontrar el repositorio de trabajo completo en GitHub.

Además, creo que puede haber otras formas de lograr lo mismo, así que si encuentra otra forma, no dude en compartirla.

También puedes seguirme en Twitter y GitHub. Y mira mis artículos anteriores en Medium.

Other Helpful Articles:

  • React Native Location Tracking
  • React Native charts with dynamic tooltips
  • React Native charts with dynamic tooltips