Skip to main content

Search Bar

This is a replication of the iOS Search Bar animation. First, you need to create two refs, one for the TextInput and one for the Container. Then you put the TextInput as the SnapComponent. Next you you define onBlur on the Container, which triggers textInputRef.blur(). Then you define onFocus and onBlur on the TextInput which trigger containerRef.focus() and containerRef.blur() respectively.

import { AppleStyle } from 'react-native-scrollable-navigation-bar';import { SearchBar } from 'react-native-elements';
Live Editor
Result