Search

A customizable search bar.

Galaxy Search Bar

A default search bar for searching the galaxy.

Preview

import { View, TextInput } from "react-native";
import React from "react";
import EvilIcons from "@expo/vector-icons/EvilIcons";

const SearchBar = () => {
  return (
    <View className="mx-4 my-3">
      <View className="flex-row items-center bg-gray-100 rounded-full px-4 py-3">
        <EvilIcons name="search" size={24} color="gray" />
        <TextInput
          placeholder="Search the galaxy..."
          className="flex-1 ml-2 text-base outline-none"
          placeholderTextColor="gray"
        />
      </View>
    </View>
  );
};

export default SearchBar;

Usage Example

import React from "react";
import { View } from "react-native";
import SearchBar from "./components/SearchBar/GalaxySearchBar";

const App = () => {
  return (
    <View>
      <SearchBar />
    </View>
  );
};

export default App;