Unlocking the Impossible: Search Keywords Within WebView in React Native
Tags: reactnative, android, ios, javascript
Published: 2023-12-12 09:31:12

When you’re looking for a specific phrase or word on a web page, the last thing you want to do is go through the entire page for that word. Searching for a word on a web page is a great way to save time.

In this article, you’ll find instructions on how to search for words on a WebView in React Native.

**How to Search for a Word Using a Web Browser**

If you want to search for a specific word in a web browser, you can perform this task using your keyboard shortcuts. To access your search shortcuts, here’s what you need to do:

1. Go to the web page you want to search through.
2. Use the Control + F keywords on your PC, or Command + F on Mac.
3. The find bar will show up in the top-right corner or at the bottom of your screen.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ck5iyvst9828mlubr1j9.gif)

4. Enter the word you want to search for, and the word will be highlighted across the web page.

**Searching for a Word in React Native’s WebView**

First, you must know that web view is not a component inside the react-native core, so we need to install the package.

`npm install react-native-webview`

After that, we can use the web-view

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qalff8rq4f6uc4pchdl3.png)

if you ever work with native Android web view then you will find it is very easy to integrate **Search Functionality**. The native Android WebView offers built-in functions like `findall()` and `findnext()` that make integrating search features a breeze.

But if you look into the `react-native-webview` API [documentation](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md) then you’ll find there are no props, no API, or no built-in functions that help you to integrate such functionality.

So, How can we achieve this? 🤔

Are there any other properties or functions we can use to achieve this?

The answer is Yes, we can use `injectJavaScript` Method to implement this functionality.

Ok, now we have a way to achieve this, but what about the bridge or support that carries out the search and highlights the keyword functionality in the webView?

In this case, we’re using `mark.js` script, which helps us search for specific words and highlight them.

Okay, now that our roadmap is prepared, let’s explore the essential functions and their functionality.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jjxoe2i9x3yfx3kqteab.png)

There are 3 major functions that are used to implement the functionality

1. searchKeyword — triggered by the onChangeText event on React Native TextInput.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ngrbxos0p6v2sdhfjit.png)

2.focusNext and focusPrevious — activated when the next and previous buttons are pressed.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fjo99l39jrpngw7gh4js.png)

3.jumpTo — triggered when the next and previous buttons are pressed to highlight the major next and previous keywords.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i1ptdc7ah1j4oscyj21h.png)

Well, that’s it. 🎉 Run the code to see it in action.🥳

> **Output**


Please check out this sample [project on GitHub](https://github.com/Rushit013/RNWebSearch) for more information

_I hope this article has brought some new knowledge your way today. If you found it enjoyable and helpful, please don’t hesitate to give me a couple of claps! 👏_

_Please leave a comment with your feedback._

_If you’d like to support me as a writer, consider Following me on [Dev.to](https://dev.to/rushitjivani), and Connecting with me on [LinkedIn](https://www.linkedin.com/in/rushit-jivani-a0a329194/)._