Flickering options when two select dropdown are present

[prabinpant]

I am using expo go, and have 2 dropdown selectors in a page. When clicking on one of the dropdown, the other options show briefly and flicker out.

ScreenRecording_07-02-2025.22-56-49_1.mov

here is the code snippet of the component, removed unnecessary snippets:

import { Animated, StyleSheet, Text, View } from 'react-native';
import SelectDropdown from 'react-native-select-dropdown';

export default function LensControlDropdown({
  data,
  defaultValue,
  onSelect,
  width = 100
}: LensControlDropdownProps) {
  const rotateAnim = useRef(new Animated.Value(0)).current;

  const rotateIcon = (isOpened: boolean) => {
    Animated.timing(rotateAnim, {
      toValue: isOpened ? 1 : 0,
      duration: 200,
      useNativeDriver: true
    }).start();
  };

  const rotation = rotateAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '180deg']
  });

  return (
    <SelectDropdown
      data={data}
      defaultValue={defaultValue}
      onSelect={(selectedItem: string) => {
        onSelect(selectedItem);
      }}
      renderButton={(selectedItem: string | null, isOpened: boolean) => {
        rotateIcon(isOpened);
        return (
          <View style={[styles.dropdownButton, { width }]}>
            <Text style={styles.dropdownButtonText}>{defaultValue}</Text>
            <Animated.View style={{ transform: [{ rotate: rotation }] }}>
              <Feather name="chevron-down" size={20} color={colors.gray400} />
            </Animated.View>
          </View>
        );
      }}
      renderItem={(item: string, index: number, isSelected: boolean) => (
        <View
          style={[
            styles.dropdownItem,
            isSelected && styles.dropdownItemSelected,
            index === data.length - 1 && styles.lastDropdownItem
          ]}
        >
          <Text style={styles.dropdownItemText}>{item}</Text>
        </View>
      )}
      dropdownStyle={styles.dropdown}
    />
  );
}

and how the component is used:

    <View style={UIStyles.lensControlPanel}>
        <Image source={{ uri: selectedLensData.icon }} style={UIStyles.lensIcon} />
        <LensControlDropdown
          data={availableFocalLengths}
          defaultValue={selectedFocalLength}
          onSelect={setSelectedFocalLength}
        />
        <LensControlDropdown
          data={availableTransmissions}
          defaultValue={selectedTransmission}
          onSelect={setSelectedTransmission}
        />
      </View>

[erindhoxha]

Same is happening for me. Did you find any fix for this? Thanks!