search-popup

A React Native search popup component easy to customize for both iOS and Android.

Features

• searchable popup with customisable props
• Easy to use
• Consistent look and feel on iOS and Android
• Customizable font size, colors

Getting started

    npm install search-popup --save

or

    yarn add search-popup

Demo

SearchPopup Props

Props	Params	Required	Description
showPopup	boolean	Yes	condition which makes popup hide or show
setShowPopup	function to update showPopup state	Yes	function to update showPopup state
data	Array	Yes	Data is a plain array
label	String	Yes	Extract the label from the data item
Key	String	Yes	Extract the primary key from the data item
selectedItem	Item	Yes	Selected value
setItem	function	Yes	function to set item from list
style	Style object	No	Styling object for popup
headingText	String	No	Text shown at top of the popup as heading
textInputProps	props object	No	props accepted by react native textInput can be given in this object
itemBackgroundColor	Valid colour	No	background color of the list item
selectedItemBackgroundColor	Valid colour	No	background color of the selected item from list

Style Prop Structure

headingContainer

Applies styling to heading View.

headingTextStyle

Applies styling to heading Text.

popup

Applies styling to Popup View.

list

Applies styling to list component.

listItemContainer

Applies styling to individual list Item View.
(NOTE: height given to this view will only have effect if it is provided in number)

listItemText

Applies styling to individual list Item Text.

mainView

Applies styling to main Popup View.

searchInput

Applies styling to search text input.

selectedListItemText

Applies styling to selected List item View.

SearchPopup example

  import React, {useState} from 'react';
import {
  Pressable,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Dimensions,
} from 'react-native';
import SearchPopup from './src/components/Search_Popup';

function App(): JSX.Element {
  const [show, setShow] = useState(true);
  const [item, setItem] = useState(countries[0].value);
  const [itemKey, setItemKey] = useState(countries[0].key);
  
  const data = [
    { value: 'Item 1', Key: '1' },
    { value: 'Item 2', Key: '2' },
    { value: 'Item 3', Key: '3' },
    { value: 'Item 4', Key: '4' },
    { value: 'Item 5', Key: '5' },
    { value: 'Item 6', Key: '6' },
    { value: 'Item 7', Key: '7' },
    { value: 'Item 8', Key: '8' },
  ];

  return (
    <SafeAreaView style={styles.container}>
      <SearchPopup
        showPopup={show}
        setShowPopup={setShow}
        setItem={setItem}
        SelectedItem={item}
        data={data}
        label={'value'}
        Key={'key'}
        itemBackgroundColor={'#fff'}
        selectedItemBackgroundColor={'#bbb'}
        headingText={'Select Item'}
        textInputProps={{
          placeholder: 'Search',
          placeholderTextColor: 'red',
        }}
        style={{
          headingContainer: {
            height: Dimensions.get('window').height * 0.05,
          },
          headingTextStyle: {
            color: '#000',
            fontSize: 18,
            fontWeight: '700',
          },
          popup: {
            height: '92%',
            width: '88%',
            borderRadius: 5,
            backgroundColor: 'floralwhite',
            alignItems: 'center',
            justifyContent: 'center',
            paddingTop: '4%',
            paddingHorizontal: '2%',
          },
          list: {
            width: '100%',
            paddingTop: 10,
            backgroundColor: 'pink',
            paddingBottom: '20%',
          },
          listItemContainer: {
            height: Dimensions.get('window').height * 0.07,
            justifyContent: 'center',
            paddingHorizontal: '8%',
            borderRadius: 5,
          },
          listItemText: {
            color: '#000',
            fontSize: 15,
          },
          mainView: {
            height: '100%',
            width: '100%',
            backgroundColor: 'rgba(0, 0, 0, .6)',
            alignItems: 'center',
            justifyContent: 'center',
          },
          searchInput: {
            color: '#000',
            marginHorizontal: '5%',
            backgroundColor: 'cornsilk',
            width: '100%',
            borderRadius: 5,
            borderColor: '#000',
            borderWidth: 1,
          },
          selectedListItemText: {
            color: '#fff',
            fontSize: 18,
          },
        }}
      />
      <Pressable
        style={{
          alignSelf: 'center',
          height: 45,
          minWidth: 200,
          paddingHorizontal: 15,
          backgroundColor: 'mistyrose',
          alignItems: 'center',
          justifyContent: 'center',
          borderRadius: 10,
        }}
        onPress={() => setShow(true)}>
        <Text style={{color: '#000'}}>{item}</Text>
      </Pressable>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'azure',
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;