react-native-animated-searchbar

Animated search bar for react-native apps

Usage no npm install needed!

<script type="module">
  import reactNativeAnimatedSearchbar from 'https://cdn.skypack.dev/react-native-animated-searchbar';
</script>

README

React Native Animated Searchbar for easy usage

:star: Screenshot

:arrow_down: Installation


$ yarn add react-native-animated-searchbar

or

$ npm install --save react-native-animated-searchbar

:flashlight: Example Usage

import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import Fontawesome from 'react-native-vector-icons/FontAwesome';
import Feather from 'react-native-vector-icons/Feather';
import AnimatedSearchbar from 'react-native-animated-searchbar';
import { SearchScreen } from './SearchScreen'
Fontawesome.loadFont();
Feather.loadFont();





export const Example = () => {

    const HeaderRight = <View style={styles.rightSide}>
        <Feather name={"message-circle"} size={24} color={"#d32f2f"} />
    </View>

    const SearchBarIcon = <View style={styles.baricon}>
        <Fontawesome name={"search"} size={18} color={"gray"} />
    </View>



    return (
        <AnimatedSearchbar
            headerRight={HeaderRight}
            searchBarIcon={SearchBarIcon}
            searchScreen={<SearchScreen />}
            onChangeText={(text) => console.log(text)}
            title={"Contacts"}
        >
            <View style={styles.mainView}>
                <Text style={styles.text}>Main Screen</Text>
                {/* Your screen */}
            </View>
        </AnimatedSearchbar>
    );
}

const styles = StyleSheet.create({
    rightSide: {
        flex: 1,
        alignSelf: 'stretch',
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
        marginRight: 20
    },
    baricon: {
        alignSelf: 'stretch',
        justifyContent: 'center',
        marginLeft: 10
    },
    mainView: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'purple'
    },
    searchScreen: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'green'
    },
    text: {
        fontSize: 28,
        color: "white"
    }
})

:paperclip: Config

Params Type Default Required Description
backgroundColor string #191919 NO Background color of the hader
animationDuration number 150 NO Component animation duration
headerRight Component - NO Right side of the header. You can put your custom component.
headerLeft Component - NO Left side of the header. You can put your custom component.
title string Title No Title text of the component
cancelText string Cancel NO Cancel text of the searchbar
cancelTextStyle StyleSheet - NO Styles of the cancel text
cancelTextMarginRight number 20 NO Margin right of the cancel text
placeholder string Search... NO Placeholder of the search bar
searchbarStyle StyleSheet - NO Style of the search bar
placeholderTextColor string gray NO Placeholder color of the searchbar
onPressCancel func - NO Run on press cancel text
onFocus func - NO Run on focus search bar
onChangeText func - NO Run on change text
headerHeight number 50 NO Header height without searchbar
searchBarIcon Component - NO Searchbar icon
searchScreen Component - NO Second screen for search. Open on focus search bar