react-native-dropdown-picker

The repository includes an examples subdirectory which is a working Expo project. This project demonstrates various implementation patterns, including:

• Usage with Class Components
• Usage with Function Components
• Usage with TypeScript
• Usage with JavaScript

To run the examples locally:

1. Navigate to the examples directory.
2. Run npm install to install dependencies.
3. Run npx expo start to launch the project.

cd examples
npm install
npx expo start

You can set global defaults for the picker's behavior using the following methods on the Picker object. These settings will apply to all instances of the picker unless overridden by local props.

• setMode(mode): Sets the default MODE.
• setListMode(mode): Sets the default LIST_MODE.
• setDropDownDirection(direction): Sets the default DROPDOWN_DIRECTION.
• setLanguage(language): Sets the default LANGUAGE.
• setTheme(name): Sets the default theme from the available THEMES.

import Picker from 'react-native-dropdown-picker';

Picker.setMode('some_mode');
Picker.setListMode('some_list_mode');
Picker.setDropDownDirection('up');
Picker.setLanguage('en');
Picker.setTheme('dark');

You can extend the library's styling by adding custom themes. The available themes are stored in Picker.THEMES.

• addTheme(name, theme): Registers a new theme object under a specific name.
• setTheme(name): Sets the global default theme to the provided name.

import Picker from 'react-native-dropdown-picker';

const myCustomTheme = {
  container: { backgroundColor: 'red' },
  // ... other theme properties
};

Picker.addTheme('myTheme', myCustomTheme);
Picker.setTheme('myTheme');

The library allows you to add or modify translations for different languages to support internationalization.

• addTranslation(language, translation): Adds a new translation object for a specific language.
• modifyTranslation(language, translation): Merges new translation keys into an existing language's translation object.

Available language constants can be accessed via Picker.LANGUAGE.

import Picker from 'react-native-dropdown-picker';

// Add a new language
Picker.addTranslation('fr', { search: 'Rechercher' });

// Modify existing translation
Picker.modifyTranslation('fr', { select: 'Choisir' });

The Picker component is the main entry point for the library. It is used to render a dropdown picker in React Native applications. While the component itself is imported as the default export, it also serves as a namespace for configuring global settings like modes, directions, languages, and themes.

import Picker from 'react-native-dropdown-picker';

The RTL_STYLE function manually transforms a style object to support Right-to-Left (RTL) layouts when the device's I18nManager.isRTL is not already set to true. It swaps directional properties like marginLeft with marginRight, paddingStart with paddingEnd, etc.

Parameters:

• rtl: Boolean indicating if RTL mode should be applied.
• style: The original style object.

import { RTL_STYLE } from 'react-native-dropdown-picker';

const myStyle = { marginLeft: 10, paddingStart: 5 };
const rtlStyle = RTL_STYLE(true, myStyle); 
// Result: { marginRight: 10, paddingEnd: 5 }

Use GET_TRANSLATION to fetch localized strings. It supports a fallback mechanism to the default language if the requested key is missing in the specified language.

Parameters:

• key: The translation key to retrieve.
• language: The language code (from LANGUAGE constant). Defaults to LANGUAGE.DEFAULT ('EN').
• customTranslation: An object containing custom key-value pairs to merge with the translations. This allows you to override or extend existing translations.

import { GET_TRANSLATION, LANGUAGE } from 'react-native-dropdown-picker';

const label = GET_TRANSLATION('some_key', LANGUAGE.ARABIC, { some_key: 'Custom Arabic Text' });

The library provides a set of predefined themes that can be used to style the dropdown component. You can access the theme objects via the default export of the themes module. The available themes are:

• DEFAULT: A constant string 'LIGHT'.
• LIGHT: The light theme configuration.
• DARK: The dark theme configuration.

import themes from './src/themes';

// Accessing themes
const lightTheme = themes.LIGHT;
const darkTheme = themes.DARK;
const defaultThemeName = themes.DEFAULT; // 'LIGHT'

The light theme exports a StyleSheet containing the default styling for the dropdown component in light mode. This includes styles for the container, items, search input, and badges. While these are internal to the library's default theme, they define the visual structure of the component.

// Key style objects available in the light theme:

// Main component container
style: { ... },

// The dropdown list container
dropDownContainer: { ... },

// Individual list items
listItemContainer: { ... },
listItemLabel: { ... },

// Search input area
searchContainer: { ... },
searchTextInput: { ... },

// Badge styling
badgeStyle: { ... },
badgeDotStyle: { ... },

// Modal specific styles
modalContentContainer: { ... },
modalTitle: { ... }

The MODE constant defines how the selected item is displayed in the dropdown header. Use these values to set the mode prop:

• SIMPLE: The standard selection mode.
• BADGE: Displays the selection as a badge.

import { MODE } from 'react-native-dropdown-picker';

// Example usage in component props
<DropDownPicker mode={MODE.BADGE} ... />