Building an Optimized Animated Dropdown Component in React Native and Expo

5 min readJan 5, 2025

Dropdown Component in React Native and Expo

This guide will build an optimized animated custom dropdown component for the React Native and Expo app. We’ll integrate features like animations, modal overlays, and performance optimizations for large datasets using React.memo, useMemo, and custom hooks.

Project Setup

# create a new expo app
npx create-expo-app@latest rn-expo-animated-dropdown

# navigate to the project directory
cd rn-expo-animated-dropdown

# reset the boilerplate to make the codebase minimal
npm run reset-project

# remove the app-example directory
rm -rf app-example

Install necessary libraries:

npx expo install react-native-reanimated react-native-gesture-handler @expo/vector-icons

Start the app

npx expo start

running the app on Android Emulator and iOS Simulator side by side

Create Dropdown Component

// components/Dropdown.tsx

import React from 'react';
import { Dimensions, Pressable, StyleSheet, Text, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';

const { width, height } = Dimensions.get('window');

const Dropdown = () => {
  return (
    <View style={styles.container}>
      <Pressable style={styles.button}>
        <Text style={styles.buttonText}>Placeholder</Text>
        <Ionicons name="chevron-down" size={24} color="gray" />
      </Pressable>
    </View>
  );
};

export default Dropdown;

const styles = StyleSheet.create({
  container: {
    width: width,
    marginVertical: 10,
  },
  button: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: 'gray',
    borderRadius: 8,
    padding: 10,
    backgroundColor: 'white',
  },
  buttonText: {
    fontSize: 16,
    color: 'gray',
  },
});j

Use the dropdown component

// app/index.tsx

import React from 'react';
import { StyleSheet, View } from 'react-native';

import Dropdown from '@/components/Dropdown';

export default function Index() {
  return (
    <View style={styles.container}>
      <Dropdown />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#1f6eed',
  },
});

Create a custom hook to handle dropdown logic:

// hooks/useDropdown.ts

import React from 'react';
import { Dimensions, LayoutRectangle, Pressable } from 'react-native';
import {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
} from 'react-native-reanimated';

import { IOption } from '@/types';

const screenHeight = Dimensions.get('window').height;

export const useDropdown = () => {
  const [isVisible, setIsVisible] = React.useState(false);
  const [selectedOption, setSelectedOption] = React.useState<IOption>();
  const [dropdownPosition, setDropdownPosition] = React.useState<
    'top' | 'bottom'
  >('bottom');
  const [buttonLayout, setButtonLayout] =
    React.useState<LayoutRectangle | null>(null);

  const buttonRef = React.useRef<React.ElementRef<typeof Pressable>>(null);
  const dropdownHeight = useSharedValue(0);
  const dropdownOpacity = useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => ({
    height: dropdownHeight.value,
    opacity: dropdownOpacity.value,
  }));

  const showDropdown = React.useCallback(() => {
    dropdownHeight.value = withTiming(200, { duration: 300 });
    dropdownOpacity.value = withTiming(1, { duration: 300 });
  }, [dropdownHeight, dropdownOpacity]);

  const hideDropdown = React.useCallback(() => {
    dropdownHeight.value = withTiming(0, { duration: 200 });
    dropdownOpacity.value = withTiming(0, { duration: 200 });
    setTimeout(() => setIsVisible(false), 200);
  }, [dropdownHeight, dropdownOpacity]);

  const toggleDropdown = React.useCallback(() => {
    if (!isVisible && buttonRef.current) {
      buttonRef.current.measure((fx, fy, width, height, px, py) => {
        const spaceBelow = screenHeight - (py + height);
        const spaceAbove = py;

        setDropdownPosition(
          spaceBelow >= 200 || spaceBelow > spaceAbove ? 'bottom' : 'top'
        );
        setButtonLayout({ x: px, y: py, width, height });
        setIsVisible(true);
        showDropdown();
      });
    } else {
      hideDropdown();
    }
  }, [isVisible, buttonRef, showDropdown, hideDropdown]);

  const handleSelect = React.useCallback(
    (option: IOption) => {
      setSelectedOption(option);
      hideDropdown();
    },
    [hideDropdown]
  );

  return {
    isVisible,
    selectedOption,
    dropdownPosition,
    buttonLayout,
    buttonRef,
    animatedStyle,
    toggleDropdown,
    handleSelect,
  };
};

Update the Dropdown component

// components/Dropdown.tsx

import React from 'react';
import {
  View,
  Text,
  FlatList,
  Modal,
  TouchableWithoutFeedback,
  Pressable,
  StyleSheet,
  Dimensions,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import Animated from 'react-native-reanimated';

import { DropdownProps } from '@/types';
import { useDropdown } from '@/hooks/useDropdown';

const { width } = Dimensions.get('window');

const Dropdown: React.FC<DropdownProps> = ({
  options,
  placeholder,
  onSelect,
}) => {
  const {
    isVisible,
    selectedOption,
    dropdownPosition,
    buttonLayout,
    buttonRef,
    animatedStyle,
    toggleDropdown,
    handleSelect,
  } = useDropdown();

  return (
    <View style={styles.container}>
      <Pressable
        ref={buttonRef}
        style={styles.dropdownButton}
        onPress={toggleDropdown}
      >
        <Text style={styles.dropdownButtonText}>
          {selectedOption ? selectedOption.label : placeholder}
        </Text>
        <Ionicons name="chevron-down" size={20} color="gray" />
      </Pressable>

      <Modal
        visible={isVisible}
        transparent
        animationType="none"
        onRequestClose={toggleDropdown}
      >
        <TouchableWithoutFeedback onPress={toggleDropdown}>
          <View style={styles.modalOverlay} />
        </TouchableWithoutFeedback>

        {buttonLayout && (
          <Animated.View
            style={[
              styles.modalContainer,
              dropdownPosition === 'top'
                ? { bottom: buttonLayout.y + buttonLayout.height }
                : { top: buttonLayout.y + buttonLayout.height },
              animatedStyle,
            ]}
          >
            <FlatList
              data={options}
              keyExtractor={(item, index) => `${item.value}-${index}`}
              renderItem={({ item }) => (
                <Pressable
                  style={styles.option}
                  onPress={() => {
                    handleSelect(item);
                    if (onSelect) onSelect(item);
                  }}
                >
                  <Text style={styles.optionText}>{item.label}</Text>
                  {selectedOption?.value === item.value && (
                    <Ionicons name="checkmark" size={20} color="green" />
                  )}
                </Pressable>
              )}
              showsVerticalScrollIndicator={false}
            />
          </Animated.View>
        )}
      </Modal>
    </View>
  );
};

export default Dropdown;

const styles = StyleSheet.create({
  container: {
    width: width,
    marginVertical: 10,
  },
  dropdownButton: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: 'gray',
    borderRadius: 8,
    padding: 10,
    backgroundColor: 'white',
  },
  dropdownButtonText: {
    fontSize: 16,
    color: 'gray',
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  modalContainer: {
    position: 'absolute',
    left: 16,
    right: 16,
    backgroundColor: 'white',
    borderRadius: 8,
    padding: 16,
    overflow: 'hidden',
  },
  option: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: 'lightgray',
  },
  optionText: {
    fontSize: 16,
  },
});

Source code available on GitHub

GitHub - jaamaalxyz/rn-expo-animated-dropdown: Animated Dropdown Component in React Native and Expo

Animated Dropdown Component in React Native and Expo - jaamaalxyz/rn-expo-animated-dropdown

github.com

Relevant resources:

Conclusion

In this article, we have successfully built a modular and reusable dropdown component for a React Native and Expo app, incorporating advanced features like animations and optimized list rendering. By separating concerns into two distinct hooks — useDropdown for managing dropdown behavior and useDropdownAnimation for handling animations—we achieved a clean and maintainable architecture.

Key highlights include:

Applying react-native-reanimated to create visually appealing transitions, ensuring a polished user experience.
Leveraging Animated component of react-native-reanimated for efficient list rendering and smooth animations.

This approach not only simplifies the component’s structure but also enhances reusability, performance, and scalability. With this foundation, you can easily extend the dropdown’s functionality or apply the hooks and animations to other components in your project.

Feel free to adapt this implementation to suit your app’s unique requirements, and enjoy the seamless user experience your dropdown component delivers! 🚀