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

Prop	Type	Required	Description
`{value}`	`string`	Yes	The current value of the search input.
`{onChangeText}`	`(text: string) => void`	Yes	Function to call when the text changes.
`{onFocus}`	`(e: NativeSyntheticEvent<TextInputFocusEventData>) => void`	No	Function to call when the input is focused.
`{onBlur}`	`(e: NativeSyntheticEvent<TextInputFocusEventData>) => void`	No	Function to call when the input loses focus.
`{onCancel}`	`() => void`	No	Function to call when the cancel button is pressed.
`{placeholder}`	`string`	No	Placeholder text for the input.

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.

Get Started

AI Wrapper

Authentication

Monetization

Core Features

Analytics & Monitoring

Prebuilt Screens

UI Components

Troubleshooting

Installation

Import

Props

Usage

Basic Usage

Explanation

Animation and Feedback

​Installation

​Import

​Props

​Usage

​Basic Usage

​Explanation

​Animation and Feedback

Installation

Import

Props

Usage

Basic Usage

Explanation

Animation and Feedback