Building a Custom Dropdown Component for React Native

Getting Started

To begin, create a new project using create-react-native-app and add the react-native-elements library to simplify the process of adding an icon to our dropdown.

npx create-react-native-app my-dropdown-app
cd my-dropdown-app
npm install react-native-elements

The Dropdown Component

Our dropdown component starts with a simple TouchableOpacity that toggles the visibility of the dropdown. The dropdown element itself has an absolute position, allowing it to open over the rest of the form. We’ll also add a state variable to track the visibility of the dropdown.

import React, { useState } from 'eact';
import { View, TouchableOpacity, Text, Modal } from 'eact-native';

const Dropdown = () => {
  const [visible, setVisible] = useState(false);
  const [selectedItem, setSelectedItem] = useState(null);

  return (
    
       setVisible(!visible)}>
        {/* dropdown button */}
      
      {visible && (
        
          {/* dropdown list */}
        
      )}
    
  );
};

Creating the Real Dropdown

To make our dropdown functional, we need to add a few more props: one for the data that will populate the dropdown items, and a function to fire when an item is selected. We’ll use a FlatList to create the list of items, which provides built-in functionality and performance benefits.

import { FlatList } from 'eact-native';

const Dropdown = ({ data, onSelect }) => {
  //...

  return (
    
      {/*... */}
      {visible && (
        
           setVisible(false)}>
            
               (
                   onSelect(item)}>
                    {item.label}
                  
                )}
              />
            
          
        
      )}
    
  );
};

Modifying the Visibility Toggle Function

To position the dropdown correctly, we need to measure the location of the button on the screen and set the top value of the dropdown accordingly. We’ll add a few constants to achieve this.

import { Dimensions } from 'eact-native';

const Dropdown = () => {
  const [top, setTop] = useState(0);

  const handleLayout = ({ nativeEvent }) => {
    setTop(nativeEvent.layout.y + nativeEvent.layout.height);
  };

  return (
    
       setVisible(!visible)} onLayout={handleLayout}>
        {/* dropdown button */}
      
      {visible && (
        
           setVisible(false)}>
            
              {/* dropdown list */}
            
          
        
      )}
    
  );
};

Rendering Items

The renderItem prop of the FlatList returns the component for each item. We’ll create a simple function to render the label and handle item presses. When an item is pressed, we’ll update the selected item state variable, replace the button label, and hide the dropdown.

const renderItem = ({ item }) => {
  return (
     onSelect(item)}>
      {item.label}
    
  );
};

The Final Result

With our dropdown component complete, we can now use it in our App.tsx file. We’ll add a state variable for the selected item, some sample data, and a Text element to display the selected item.

import React, { useState } from 'eact';
import Dropdown from './Dropdown';

const App = () => {
  const [selectedItem, setSelectedItem] = useState(null);
  const data = [
    { label: 'Item 1', value: 'item1' },
    { label: 'Item 2', value: 'item2' },
    //...
  ];

  const handleSelect = (item) => {
    setSelectedItem(item);
  };

  return (
    
      
      Selected item: {selectedItem? selectedItem.label : 'None'}
    
  );
};

Next Steps

Our dropdown component is now functional, but there’s still room for improvement. You can add better styles, more features, and even replace the external library with a self-contained component. Feel free to experiment and improve the component!

• Add better styles to the dropdown component
• Implement more features, such as search or filtering
• Replace the external library with a self-contained component