IOS Keyboard wont dismiss when using search bar in react site

Question

I am probably taking the wrong approach but I am working on a react site that has a search bar. On IOS/Safari if the user taps into the search the keyboard appears, but pressing done won't dismiss it, it just flicks down for a second and reappears.

I don't have much experience with react yet so I am unsure what the best approach is, so far I have tried writing a js function that uses blur when the focus changes but I can't get it to run yet so I don't know if this will work.

These are the two ways I've tried writing my function:

focusOut = () => {
    onToggleOpen();
    e.target.blur();
    console.log('Function has run');
}

function focusOut() {
    onToggleOpen();
    e.target.blur();
    console.log('Function has run');
}

And here is how I am currently trying to activate it:

<Search onfocusout={this.focusOut} />

Apologies if I am looking at this in the wrong way entirely, any suggestions are welcome.

Many thanks.

Answer 1

You can use built-in Keyboard module:

import { Keyboard } from 'react-native';

Keyboard.dismiss();