CODEWITHSUNDEEP
react-native
Uchiha Alchemist
Uchiha Alchemist

Reputation: 71

How would I go about making a search filter bar in my React Native App?

I have this function component called Map, where I have PDF names stored in an Object. I display those PDF names on my screen, but I want to create a search bar where I can search through the PDF names because there are quite a lot and filter my results based off that search. Is there a way I can do this? My code is shown below, where all the of pdf names are stored and displayed on the screen in {item}. So I basically want to search the text (pdf names) stored in that variable. Please help.

const Map = ({props}) => {
...
return (
      <View> 
        <List>
             {
               Object.keys(pdf).map((item)=>
                 { 
                   return(<Text> {item} </Text>)
                 }
              }
        </List>
      </View>
     )
}

Upvotes: 0

Views: 243

Answers (2)

Uchiha Alchemist
Uchiha Alchemist

Reputation: 71

Nothing has helped me except this youtube video. I'm going to keep this post up for anyone that hasn't had any luck creating a search filter bar in React Native because that video literally did everything I wanted my pdf list to perfectly.

Upvotes: 0

Niranjan
Niranjan

Reputation: 71

Lets suppose this is you PDF array list,

pdfList = [
    {name: 'Felipe Calderon', year: 2012},
    {name: 'Rocio Calderon Martinez', year: 2012},
    {name: 'Laura Martinez Calderon', year: 2012},
    {name: 'Marcos Alberto Gonzales Calderon', year: 2012}, 
    {name: 'Brenda Calderon Ibañez', year: 2012},   
];

you can create a function which sends searchqueries, here example 'Calderon' is your search query.

let searchResult = pdfList.filter(({name}) => name.includes('Calderon'));

Console.log(searchResult)

now use this search result and update your state data which is used for displaying PDF list in your UI.

Upvotes: 1

Related Questions