react-native-search-bar-button
🚀 Getting Started
Using Yarn:
yarn add react-native-search-bar-button
Using NPM:
npm i -s react-native-search-bar-button
✍️ Example
In the example below, we demonstrate all of the configurable properties of the <SearchBarButton />. Most notably, you can render a custom button component using renderButton and declare complete control over the behaviour of the <TextInput /> using textInputProps.
import React, { useCallback, useState } from "react";
import { SafeAreaView, StyleSheet, Easing, TouchableOpacity, View, Animated } from "react-native";
import { useWindowDimensions } from "react-native-use-dimensions";
import { SearchBarButton } from "react-native-search-bar-button";
export default function App() {
const [value, onChangeText] = useState("");
const [open, setOpen] = useState(false);
const { width } = useWindowDimensions();
const padding = 15;
const height = 55;
const renderButton = useCallback(
({ open, onChangeText, value, progress }) => (
<TouchableOpacity
style={{
flex: 1,
backgroundColor: "red",
}}
onPress={() => setOpen(!open)}
>
<Animated.Image
style={{
transform: [
{ rotate: progress.interpolate({
inputRange: [0, 1],
outputRange: ["0deg", "360deg"],
})},
],
width: height,
height,
}}
source={{ uri: "https://is3-ssl.mzstatic.com/image/thumb/Purple123/v4/97/74/dd/9774ddab-bfac-f412-9992-6715178c5b67/source/256x256bb.jpg" }}
/>
</TouchableOpacity>
),
[setOpen, height],
);
const onSubmitEditing = useCallback(
({ nativeEvent: { text } }) => {
console.warn({ text });
onChangeText("");
setOpen(false);
},
[onChangeText, setOpen],
);
return (
<>
<SafeAreaView />
<SearchBarButton
style={{
marginHorizontal: padding,
backgroundColor: "#355BCF",
}}
width={width - 2 * padding}
height={height}
open={open}
value={value}
onChangeText={onChangeText}
renderButton={renderButton}
textInputProps={{
placeholderTextColor: "#FFFFFF99",
placeholder: "What are you looking for?",
onSubmitEditing,
style: {
fontSize: 20,
color: "#FFFFFF",
},
}}
animationProps={{
easing: Easing.ease,
duration: 400,
}}
/>
</>
);
}