expo-picker

Customizable picker components for react-native & expo. Includes color, date time, single option and multi options pickers.

Platform Compatibility

iOS	Android	Web
✅	✅	❌

Samples

Date time

Single & multi options with customizations

Color

Prerequisites

Module requires a few module dependencies (look at peerDependencies within package.json) and some theme variable initalizations before it can be used and components redered properly.

Required theme variables:

• colors.background - Background color for the picker screen used to display select options
• colors.backgroundHighlight - Background highlight color used to highlight select options

import { ThemeProvider } from 'styled-components';
import { Provider as PaperProvider } from 'react-native-paper';
import { App } from './app';

const theme = {
    colors: {
        background: backgroundColor,
        backgroundHighlight: backgroundHighlightColor,
        ...
    },
    ...
};

export const AppThemeProvider = ({ children }) => (
    <ThemeProvider theme={theme}>
        <PaperProvider theme={theme}>
            {children}
        </PaperProvider>
    </ThemeProvider>
);

Before picker can be displayed, Picker component needs to be rendered within App as a descendant of theme provider and SafeAreaProvider:

import { Picker } from '@codexporer.io/expo-picker';
import { SafeAreaProvider } from 'react-native-safe-area-context';
...

export const App = () => (
    <SafeAreaProvider>
        <AppThemeProvider>
            ...other components
            <Picker />
        </AppThemeProvider>
    </SafeAreaProvider>
);

As a requirement to display picker screen, it needs to be integrated with react native navigation:

import { getRouteConfig } from '@codexporer.io/expo-picker';
import { NavigationContainer } from '@react-navigation/native';
...

const Stack = createSharedElementStackNavigator();
const { Navigator, Screen } = Stack;
const routeConfig = getRouteConfig();
...

const navigationRef = useRef();
const [{ navigation }, { initNavigation }] = usePicker();
const currentNavigationRef = navigationRef.current;

useEffect(() => {
    if (!navigation && currentNavigationRef) {
        initNavigation(currentNavigationRef);
    }
}, [
    navigation,
    initNavigation,
    currentNavigationRef
]);

<NavigationContainer ref={navigationRef}>
    <Navigator>
        <Screen
            name={routeConfig.name}
            component={routeConfig.screen}
            options={routeConfig.screenOptions}
            ...rest props
        />
        ...other screens
    </Navigator>
</NavigationContainer>

To use date time picker, translations needs to be registered, preferably in your app index file:

import { en, registerTranslation } from 'react-native-paper-dates';

registerTranslation('en', en);

Note: For iOS only, when using Hermes engine, Intl polyfill is requeired, as per comment in expo/config-plugins#73 (comment)

Usage

Picker is simple for use component. Everything needed is provided through usePicker hook:

import { usePicker } from '@codexporer.io/expo-picker';
...

export const MyComponent = () => {
    const [, { openPicker, closePicker, changeConfig }] = usePicker();

    const onShowPicker = () => {
        openPicker(...pickerConfig);
    };
    
    const onRerenderPicker = () => {
        changeConfig(...pickerConfig);
    };
    
    const onClosePicker = () => {
        closePicker();
    };

    return ...;
};

Exports

symbol	description
Picker	picker component
usePicker	hook used to control the picker

usePicker

Returns an array with openPicker, closePicker and changeConfig actions on the second index:

const [, { openPicker, closePicker, changeConfig }] = usePicker();

...
openPicker(...pickerConfig);
...
changeConfig(...pickerConfig);
...
closePicker();

Open picker / change config action parameters

parameter	description
pickerType	Type of the picker to be displayed: "time" - date & time picker, "color" - color picker, otherwise select options picker will be used (by default select options picker will be used)
mode	Type of the date & time picker to be displayed: "date" - for date picker only, "time" - for time picker only, "datetime" - for date & time picker (default: "date")
title	Title displayed in picker screen for select options picker (default: empty string)
items	Array of strings to be displayed as options for select options picker
selectedValue	Selected value within the picker. Format depends of the picker type. For color picker it should be string in format rgb(r, g, b) or hash #123456; for date & time picker it should be Date object; for select options it should be string value from items parameter
startYear	The start year when the component is rendered, number. (default: 1950)
endYear	The end year when the component is rendered, number. (default: 2050)
onValueChange	Callback invoked when value is changed. Format depends of the picker type. For color picker it will be called with hash #123456 string; for date & time picker it will be called with Date object; for select options it will be called with string value from items parameter
isMultiSelect	Defines if select options picker is multi select (default: false)
selectedValues	Array of strings, selected values. Used only in multi select options picker, where selectedValue will be ignorred. Array should contain string values from items parameter
onValuesChange	Callback invoked with array of string selected items when values are changed. Used only in multi select options picker, where onValueChange will be ignorred
renderOptionContent	Used to render select option item content. If not passed, item will be displayed as a content
renderTopView	Used to render view on the top of the picker screen with select options
renderBottomView	Used to render view on the bottom of the picker screen with select options
renderEmptyView	Used to render render empty view, when there are no select options
hasSelector	If false select "radio", nor "checkbox" will be rendered. By default selector is rendered
shouldHideSelectAll	If true, "select all options" option for multi select options will be hidden
shouldHideConfirmScreenButton	If true, header confirm action for multi select options will be hidden
canFilter	NOT IMPLEMENTED