React Native SearchBar

Search Bar for iOS & Android with voice and history features for React Native.

Install

npm i -S @zettabrasil/react-native-searchbar

We will need to install first the following libraries to get this working well:

@react-native-community/voice.

npm i -S @react-native-community/voice

Need to include permissions for NSMicrophoneUsageDescription and NSSpeechRecognitionUsageDescription inside Info.plist for iOS. See the included VoiceTest for how to handle these cases.

<dict>
  ...
  <key>NSMicrophoneUsageDescription</key>
  <string>Description of why you require the use of the microphone</string>
  <key>NSSpeechRecognitionUsageDescription</key>
  <string>Description of why you require the use of the speech recognition</string>
  ...
</dict>

@react-native-community/async-storage.

npm i -S @react-native-community/async-storage

Link the iOS package

npx pod-install

Usage

Checkout the example

This library depends on react-native-root-siblings to work properly. So, it is necessary to make the following configuration in the root app component:

import { SearchBarWrapper } from '@zettabrasil/react-native-searchbar';

export default function App() {
  return (
    <SearchBarWrapper>
      <View>
        { /* app content */ }
      </View>
    </SearchBarWrapper>
  );
}