Searchbar

Searchbar is a customizable search input component designed for React Native applications. It features animated transitions, haptic feedback, and integrates seamlessly with user input.

​

Installation

Ensure you have the necessary dependencies:

npm install react-native-reanimated expo-haptics

​

Import

import Searchbar from '@/components/common/searchbar';

​

Props

​

Usage

​

Basic Usage

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { AppDispatch, RootState } from '@/store';
import Searchbar from '@/components/common/searchbar';

const MySearchComponent = () => {
    const dispatch = useDispatch<AppDispatch>();
    const query = useSelector((state: RootState) => state.search.query);

    return (
         <Searchbar
            value={query}
            onChangeText={(text) => dispatch(setQuery(text))}
        />
    );
};

​

Explanation

• {value}: This prop is required and represents the current text in the search input.
• {onChangeText}: This prop is required and defines the function that will be executed when the text changes.
• {onFocus}: This optional prop allows you to handle focus events.
• {onBlur}: This optional prop allows you to handle blur events.
• {onCancel}: This optional prop defines the function that will be executed when the cancel button is pressed.
• {placeholder}: This optional prop sets the placeholder text for the input field.

​

Animation and Feedback

The Searchbar component features animated transitions for focus and blur states, providing a smooth user experience. Haptic feedback is triggered on cancel actions, enhancing interactivity.

This component is ideal for implementing search functionality in your React Native applications, ensuring a responsive and user-friendly interface.