The react-native-paper-dropdown from fateh999

Dropdown component has 'any' type in types interface

Not working with proguard enabled

Do we need to add anything to proguard rules.. It not working in release in build

Problem clicking the icon

If you click the icon you can access to the TextField and the dropdown is not being displayed.

How to set the height of Dropdown Items' container

Is it possible to set a height to the container of the dropdown's items?
I've tried setting it on a SafeAreaView which wraps the DropDown components but the Dropdown ended up disappearing.

Unable to scroll dropDownContainer on Android

It works fine on iOS, but as the title says, I can't scroll dropDownContainer on Android.

Does not work with babel config in package.json

I created a new expo project and installed react-native-paper and react-native-paper-dropdown. I then added the react-native-paper/babel plugin to the babel config. To test the package, I copied the demo code of this package into the App.js file and everything worked like expected.

But when i copy the babel config into the package.json file, i always get the following errors and the dropdowns do not open.

On the normal dropdown, I get a warning.

Error

Error: EISDIR: illegal operation on a directory, read at Object.readSync (node:fs:723:3) at tryReadSync (node:fs:433:20) at Object.readFileSync (node:fs:479:19) at UnableToResolveError.buildCodeFrameMessage (/Users/huckjulius/Projects/Test/my-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:347:17) at new UnableToResolveError (/Users/huckjulius/Projects/Test/my-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:333:35) at ModuleResolver.resolveDependency (/Users/huckjulius/Projects/Test/my-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:211:15) at DependencyGraph.resolveDependency (/Users/huckjulius/Projects/Test/my-app/node_modules/metro/src/node-haste/DependencyGraph.js:413:43) at /Users/huckjulius/Projects/Test/my-app/node_modules/metro/src/lib/transformHelpers.js:317:42 at /Users/huckjulius/Projects/Test/my-app/node_modules/metro/src/Server.js:1471:14 at Generator.next ()

On the multiselect dropdown, I get an error.

Error

Error: Looks like you forgot to wrap your root component with `Provider` component from `react-native-paper`.

Please read our getting-started guide and make sure you've followed all the required steps.

https://callstack.github.io/react-native-paper/getting-started.html

This error is located at:
in PortalConsumer
in Portal
in ThemedComponent (created by withTheme(Portal))
in withTheme(Portal) (created by Menu)
in RCTView (created by View)
in View (created by Menu)
in Menu
in ThemedComponent (created by withTheme(Menu))
in withTheme(Menu)
in Unknown (created by App)
in RCTSafeAreaView
in SafeAreaView (created by App)
in RCTView (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by Surface)
in Surface
in ThemedComponent (created by withTheme(Surface))
in withTheme(Surface) (created by App)
in ThemeProvider (created by App)
in ThemeProvider (created by Provider)
in RCTView (created by View)
in View (created by Portal.Host)
in Portal.Host (created by Provider)
in Provider (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in DevAppContainer (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:43:2 in showErrorDialog

Error: Looks like you forgot to wrap your root component with Provider component from react-native-paper.

Please read our getting-started guide and make sure you've followed all the required steps.

https://callstack.github.io/react-native-paper/getting-started.html

This error is located at:
in PortalConsumer
in Portal
in ThemedComponent (created by withTheme(Portal))
in withTheme(Portal) (created by Menu)
in RCTView (created by View)
in View (created by Menu)
in Menu
in ThemedComponent (created by withTheme(Menu))
in withTheme(Menu)
in Unknown (created by App)
in RCTSafeAreaView
in SafeAreaView (created by App)
in RCTView (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by Surface)
in Surface
in ThemedComponent (created by withTheme(Surface))
in withTheme(Surface) (created by App)
in ThemeProvider (created by App)
in ThemeProvider (created by Provider)
in RCTView (created by View)
in View (created by Portal.Host)
in Portal.Host (created by Provider)
in Provider (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in DevAppContainer (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:43:2 in showErrorDialog

Error: Looks like you forgot to wrap your root component with Provider component from react-native-paper.

Please read our getting-started guide and make sure you've followed all the required steps.

https://callstack.github.io/react-native-paper/getting-started.html

This error is located at:
in PortalConsumer
in Portal
in ThemedComponent (created by withTheme(Portal))
in withTheme(Portal) (created by Menu)
in RCTView (created by View)
in View (created by Menu)
in Menu
in ThemedComponent (created by withTheme(Menu))
in withTheme(Menu)
in Unknown (created by App)
in RCTSafeAreaView
in SafeAreaView (created by App)
in RCTView (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by Surface)
in Surface
in ThemedComponent (created by withTheme(Surface))
in withTheme(Surface) (created by App)
in ThemeProvider (created by App)
in ThemeProvider (created by Provider)
in RCTView (created by View)
in View (created by Portal.Host)
in Portal.Host (created by Provider)
in Provider (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in DevAppContainer (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:43:2 in showErrorDialog

Error: Looks like you forgot to wrap your root component with Provider component from react-native-paper.

Please read our getting-started guide and make sure you've followed all the required steps.

https://callstack.github.io/react-native-paper/getting-started.html

This error is located at:
in PortalConsumer
in Portal
in ThemedComponent (created by withTheme(Portal))
in withTheme(Portal) (created by Menu)
in RCTView (created by View)
in View (created by Menu)
in Menu
in ThemedComponent (created by withTheme(Menu))
in withTheme(Menu)
in Unknown (created by App)
in RCTSafeAreaView
in SafeAreaView (created by App)
in RCTView (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by Surface)
in Surface
in ThemedComponent (created by withTheme(Surface))
in withTheme(Surface) (created by App)
in ThemeProvider (created by App)
in ThemeProvider (created by Provider)
in RCTView (created by View)
in View (created by Portal.Host)
in Portal.Host (created by Provider)
in Provider (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in DevAppContainer (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0

Error: Looks like you forgot to wrap your root component with Provider component from react-native-paper.

Please read our getting-started guide and make sure you've followed all the required steps.

https://callstack.github.io/react-native-paper/getting-started.html

This error is located at:
in PortalConsumer
in Portal
in ThemedComponent (created by withTheme(Portal))
in withTheme(Portal) (created by Menu)
in RCTView (created by View)
in View (created by Menu)
in Menu
in ThemedComponent (created by withTheme(Menu))
in withTheme(Menu)
in Unknown (created by App)
in RCTSafeAreaView
in SafeAreaView (created by App)
in RCTView (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by Surface)
in Surface
in ThemedComponent (created by withTheme(Surface))
in withTheme(Surface) (created by App)
in ThemeProvider (created by App)
in ThemeProvider (created by Provider)
in RCTView (created by View)
in View (created by Portal.Host)
in Portal.Host (created by Provider)
in Provider (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in DevAppContainer (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
Error: EISDIR: illegal operation on a directory, read
at Object.readSync (node:fs:723:3)
at tryReadSync (node:fs:433:20)
at Object.readFileSync (node:fs:479:19)
at UnableToResolveError.buildCodeFrameMessage (/Users/huckjulius/Projects/Test/my-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:347:17)
at new UnableToResolveError (/Users/huckjulius/Projects/Test/my-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:333:35)
at ModuleResolver.resolveDependency (/Users/huckjulius/Projects/Test/my-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:211:15)
at DependencyGraph.resolveDependency (/Users/huckjulius/Projects/Test/my-app/node_modules/metro/src/node-haste/DependencyGraph.js:413:43)
at /Users/huckjulius/Projects/Test/my-app/node_modules/metro/src/lib/transformHelpers.js:317:42
at /Users/huckjulius/Projects/Test/my-app/node_modules/metro/src/Server.js:1471:14
at Generator.next ()

Here is my test project: https://github.com/juliushuck/issue-react-native-paper-dropdown

EventEmitter.removeListener('change', ...): Method has been deprecated

I'm getting the following warning.
WARN EventEmitter.removeListener('change', ...): Method has been deprecated. Please instead use remove() on the subscription returned by EventEmitter.addListener.

"react-native": "^0.65.1",
"react-native-paper": "^4.9.2",
"react-native-paper-dropdown": "^1.0.7",

Dropdown doesn't expand react native's Modal too.

Undefined is not an object

Error occurs when i use theme to react-native-paper-dropdown and shows "Undefined is not an object (evaluating '(theme || activeTheme).colors.text').

import React, {useState} from "react";
import PropTypes from 'prop-types';
import DropDown from "react-native-paper-dropdown";
import { TextInput } from "react-native-paper";

export function Select({label, onChange, items, selectedItem, value, textInputMode,  ...props}){
    const [showDropDown, setShowDropDown] = useState(false);
    const [gender, setGender] = useState("");
    
    return(         
        <DropDown
            theme={{roundness:15}}
            label={label}
            visible={showDropDown}
            showDropDown={() => setShowDropDown(true)}
            onDismiss={() => setShowDropDown(false)}
            value={gender}
            setValue={setGender}
            list={items}
            mode={textInputMode}
            dropDownStyle={{backgroundColor:'white',borderRadius:15}}
            inputProps={{ right: <TextInput.Icon name={'menu-down'}/>}
        }
        /> 
    )
}


Select.propTypes={
    onChange: PropTypes.func,
    value:PropTypes.string,
    multiEnable:PropTypes.bool,
    items: PropTypes.array,
    textInputMode: PropTypes.string
}

I want to use borderRadius styling. But dropdownStyle doesn't work

How can i Test React-native-paper-dropdown with jest

I cannot event find element with testid or label or anything. Please help me out here.

How to add custom data pulled from database

How can one add data such as name and set value to id ?

How to customize the 'menu-up' and 'menu-down' icon font?

Not working on Modal

The component is not working if you have it on a modal screen

Outlined label Not Showing

label Text not showing in outlined Mode
Touch background shadow color showing

Doesn't select on Web

This doesn't work for web, unless you add the following code to the Menu.Item on line 98

onPress={() => { if(!multiselect) { setActive(_item.value)} }} />

Is there a way to change component height?

Sorry if I'm missing it, but is there a way to change the base component height? TIA.

Demo image in README.md

Hey there,
It is a good idea to have a demo image in the README.md file. It gives the user a clear view of what he/she gonna get when he/she installs the package.
If you allow me, I can add an image showing how the dropdown looks.

Not working with scroll in web

Steps to reproduce

insert example as new snack in snack.expo.dev

import {
  Appbar,
  DarkTheme,
  DefaultTheme,
  Provider,
  Surface,
  ThemeProvider,
} from 'react-native-paper';
import React, { useState } from 'react';
import { SafeAreaView, StatusBar, StyleSheet, View } from 'react-native';
import DropDown from 'react-native-paper-dropdown';

function App() {
  const [nightMode, setNightmode] = useState(false);
  const [showDropDown, setShowDropDown] = useState(false);
  const [gender, setGender] = useState<string>('');
  const [showMultiSelectDropDown, setShowMultiSelectDropDown] = useState(false);
  const [colors, setColors] = useState<string>('');
  const genderList = [
    {
      label: 'Male',
      value: 'male',
    },
    {
      label: 'Female',
      value: 'female',
    },
    {
      label: 'Others',
      value: 'others',
    },
  ];
  const colorList = [
    {
      label: 'White',
      value: 'white',
    },
    {
      label: 'Red',
      value: 'red',
    },
    {
      label: 'Blue',
      value: 'blue',
    },
    {
      label: 'Green',
      value: 'green',
    },
    {
      label: 'Orange',
      value: 'orange',
    },
  ];

  return (
    <Provider theme={nightMode ? DarkTheme : DefaultTheme}>
      <ThemeProvider theme={nightMode ? DarkTheme : DefaultTheme}>
        <StatusBar
          backgroundColor={
            nightMode ? DarkTheme.colors.surface : DefaultTheme.colors.primary
          }
          barStyle={'light-content'}
        />
        <Appbar.Header>
          <Appbar.Content title="React Native Paper Dropdown" />
          <Appbar.Action
            icon={nightMode ? 'brightness-7' : 'brightness-3'}
            onPress={() => setNightmode(!nightMode)}
          />
        </Appbar.Header>
        <Surface style={styles.containerStyle}>
          <SafeAreaView style={styles.safeContainerStyle}>
            <DropDown
              label={'Gender'}
              mode={'outlined'}
              visible={showDropDown}
              showDropDown={() => setShowDropDown(true)}
              onDismiss={() => setShowDropDown(false)}
              value={gender}
              setValue={setGender}
              list={genderList}
            />
            <View style={styles.spacerStyle} />
            <DropDown
              label={'Colors'}
              mode={'outlined'}
              visible={showMultiSelectDropDown}
              showDropDown={() => setShowMultiSelectDropDown(true)}
              onDismiss={() => setShowMultiSelectDropDown(false)}
              value={colors}
              setValue={setColors}
              list={colorList}
              multiSelect
            />
          </SafeAreaView>
        </Surface>
      </ThemeProvider>
    </Provider>
  );
}

const styles = StyleSheet.create({
  containerStyle: {
    flex: 1,
  },
  spacerStyle: {
    marginBottom: 15,
  },
  safeContainerStyle: {
    flex: 1,
    margin: 20,
    justifyContent: 'center',
  },
});

export default App;

look at the "web" tab of the snack device section
make window vertically small until scrollbar appears
scroll down a bit
open dropdown

Result

The dropdown opens at the wrong position. The offset is equal to the scroll position of the window, so the dropdown moves twice as fast as the scrollbar of the window.

Taking too much time when the dataset contains a long long list in Android

Dropdown taking too much time to show when there is a long list in Android.

Please add search feature in dropdown

This great library

uncompiled dist

I think because the dropdown uses optional chaining syntax in the DropDown.js file it breaks without adding the library to a babel rule to compile it

Styling Menu.Item props

How can I change the style props of Menu/

Code:

export type DropdownItem = {
  label: string;
  value: string;
};
type DropdownProps = {
  label: string;
  items: DropdownItem[];
};
const Dropdown: FC<DropdownProps> = ({label, items}) => {
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(items?.[0].value ?? '');

  return (
    <Provider>
      <SafeAreaView style={style.containerStyle}>
        <DropDown
          label={label}
          mode={'outlined'}
          value={value}
          setValue={val => setValue(val.toString())}
          list={items}
          showDropDown={() => setOpen(true)}
          onDismiss={() => setOpen(false)}
          visible={open}
          inputProps={{
            right: <TextInput.Icon name={'menu-down'} />,
          }}
          theme={dropdownInputTheme}
          dropDownStyle={style.dropdownStyle}
          dropDownItemStyle={style.dropdownItemStyle}
        />
      </SafeAreaView>
    </Provider>
  );
};

const selectionColor = '#DD622B';
const dropdownInputTheme = {
  ...DefaultTheme,
  roundness: 2,
  dark: false,

  colors: {
    ...DefaultTheme.colors,
    primary: selectionColor,
  },
};
const style = StyleSheet.create({
  containerStyle: {
    marginHorizontal: 20,
  },
  dropdownStyle: {
    backgroundColor: 'red',
    padding: 10,
  },

  dropdownItemStyle: {
    // padding: 20,
    backgroundColor: 'white',
    borderColor: 'blue',

    // marginVertical: -8,
  },
});

dropDownItemTextStyle problem on IOS

dropDownItemTextStyle and dropDownItemSelectedTextStyle props are working fine on android but not on IOS.

How to change background color of selected item container

Dropdown model open on wrong position covering dropdown button to half while statusbar is translucent true on android

Character cuts when we change height of Dropdown

Can you please check below issue of react-native-paper

callstack/react-native-paper#2680

Same issue occurs in this too when we change height of TextInput, how can we overcome this issue in this library?

Background shadow issue on click

When we click on dropdown, there is a background shadow effect appears.
Is there any way to remove it?

Reference Image :

Style isn't changing

Is it possible to change the borders color and the height of the dropdown?

Feature Request: Can you add a multi select view ?

For Reference: https://www.npmjs.com/package/react-native-multi-selectbox

Feature Request:
There aren't any material multi-select for react native using react native paper.

How to change background color?

display dropdown pics in readme

doing that will get you more users

android： right icon no show

Is there any way to change the background colour?

I want to make the backgroud color to white

Default value

Hi,
How I set a default value?
Thanks!

Solution for clearing selected item in dropdown.

Hello, I really need help in this matter. In my project, I have created 2 dropdown. The option list of the second dropdown is based on what user selected in the first dropdown. So supposedly, the selected item in the second dropdown should be cleared every time the selected item in the first dropdown change. How should I do that? I have tried this approach but it doesnt work.

const [showDropDown1, setShowDropDown1] = useState(false);
const [showDropDown2, setShowDropDown2] = useState(false);

const [rI, setrI] = useState('')
const [lI, setlI] = useState('')

const remoteItems = [
    {id: 1, label: 'Item 1', value: 'item-1'},
    {id: 2, label: 'Item 2', value: 'item-2'},
];
const lItems = [
    {id: 1, label: 'L 1', value: 'l-1'},
    {id: 2, label: 'L 2', value: 'l-2'},
];

const handleSetrI = (rI) => {
    setlI('')
    setrI(rI);
}

return (

<DropDown
visible={false}
label={'Car Brand'}
mode={'outlined'}
visible={showDropDown1}
showDropDown={() => setShowDropDown1(true)}
onDismiss={() => setShowDropDown1(false)}
value={rI}
setValue={(val) => handleSetrI(val)}
list={remoteItems}
/>
<DropDown
visible={false}
label={'Car Model'}
mode={'outlined'}
visible={showDropDown2}
showDropDown={() => setShowDropDown2(true)}
onDismiss={() => setShowDropDown2(false)}
value={lI}
setValue={setlI}
list={lItems}
/>

)

No way to customize?

Could you potentially expose the style prop?

Add Boolean as acceptable `value` type in `valueList`

We can set string and number types but at the moment we need to make arbitrary conditional statements to compare values to a string to turn them into a boolean value in our form. Would be great if the valueList value type natively supported Boolean types.

outline color

How can I add outline color to the container?

Dropdown menu blank Due to color: undefined

The dropdown menu show nothing because the color is undefined

After I change the color to : (theme || activeTheme).colors.text the menu show out

dropDownStyle props have not working

dropDownStyle props have not working. it does not any effect.

thank you

Weird ripple behaviour

When using the dropdown menu in both outlined and flat mode, the ripple effect is only visible on the background part of the Dropdown component (even though with flat it's visible only on the corner, but still, quite irritating)

My dependencies and their versions:
"@react-native-async-storage/async-storage": "^1.15.11", "@react-navigation/drawer": "^6.1.8", "@react-navigation/native": "^6.0.6", "base-64": "^1.0.0", "date-and-time": "^2.0.1", "react": "17.0.2", "react-native": "0.66.2", "react-native-gesture-handler": "^1.10.3", "react-native-paper": "^4.10.0", "react-native-paper-dropdown": "^1.0.7", "react-native-reanimated": "^2.2.4", "react-native-safe-area-context": "^3.3.2", "react-native-screens": "^3.9.0", "react-native-uuid": "^2.0.1", "react-native-vector-icons": "^9.0.0", "utf8": "^3.0.0"

how to change border color when we focus on the dropdown

how to change border color when focus to dropdown. which props to use?

Any way to also focus on TextInput when Dropdown is focused?

I see that you use the react-native-paper TextInput to render the input field, but the TextInput (outlined) has a feature that changes the border color based on the theme color on focus. Is there any way we can achieve the same behavior with this Dropdown component? I tried forking it to call the TextInput "focus" method manually, but I couldn't build it to test it.

Local state or redux state is lost in setValue

`

import React, { useState } from "react"; import { StyleSheet, View, FlatList } from "react-native";
import DropDown from "react-native-paper-dropdown";

function App() {

const [showDropDown, setShowDropDown] = useState(false);

const [gender, setGender] = useState();

const [dishes, setDishes] = useState( [
{
title: "Main dishes",
data: ["Pizza", "Burger", "Risotto"]
},
{
title: "Sides",
data: ["French Fries", "Onion Rings", "Fried Shrimps"]
},
{
title: "Drinks",
data: ["Water", "Coke", "Beer"]
},
{
title: "Desserts",
data: ["Cheese Cake", "Ice Cream"]
}
]);

const setValue = (v) => {
console.log(dishes) //here sometimes getting empty array
}

return (
<FlatList
data={dishes}
renderItem={({item,index}) => <DropDown label={"Dishes"} mode={"outlined"} visible={showDropDown} showDropDown={() => setShowDropDown(true)} onDismiss={() => setShowDropDown(false)} value={v} setValue={setValue} list={item.data} />}

/>

);

}

`
Sometimes I'm getting redux state or local state empty in setValue. Please help explaining the issue & a solution if possible.

Thanks

Multiselect not working

After adding the multiSelect prop to the Dropdown component, the multiselect checkboxes do not appear.

Options do not appear on Android due to inactive color.

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-paper-dropdown/dist/DropDown.js b/node_modules/react-native-paper-dropdown/dist/DropDown.js
index 091b0bf..39041df 100644
--- a/node_modules/react-native-paper-dropdown/dist/DropDown.js
+++ b/node_modules/react-native-paper-dropdown/dist/DropDown.js
@@ -33,7 +33,7 @@ const DropDown = forwardRef((props, ref) => {
           {list.map((_item, _index) => (<Menu.Item key={_index} theme={theme} titleStyle={{
         color: value === _item.value
             ? activeColor || (theme || activeTheme).colors.primary
-            : undefined,
+            : 'black',
     }} onPress={() => {
         setValue(_item.value);
         if (onDismiss) {

This issue body was partially generated by patch-package.