React Native Picker Module for Android & IOS

With this package you can easily use picker with onPress function.

Using react-native-modal and @react-native-picker/picker component for IOS and using RecyclerView and AlertDialog for Android as NativeModule.

v2.0.7 released.

• Picker library updated to @react-native-picker/picker from @react-native-community/picker

v2.0.6 released.

• TypeScript type definitions updated.
• Android Gradle updated.
• backgroundColor prop added for Android.
• tintColor prop added for Android & IOS.
• confirmButtonAlwaysEnabled prop added for IOS.
• pickerRef changed to ref and forwardRef used.

v2.0.4 released.

• @react-native-picker/picker added because picker maintainer is changed.

v2.0.31 released.

v2.0.31

• PRs merged. Some issues fixed

v2.0.2

• Android input.substr issue solved.

v2.0.1

• On IOS null value issue solved.

Version 2.0.0

• useNativeDriver flag added.
• @react-native-community/picker added because picker extracted from core react native
• react-native-modal added to package for IOS
• selectedColor added
• disabled & enabled IOS confirm button styles added.
• Now we can set object array for items or array.
• IOS part start using hooks
• confirmButtonStyle & cancelButtonStyle & contentContainerStyle added
• Adding image to picker item at Android removed. If you need this feature please use v1.3.1
• And a lot of upgrade...

Getting Started

With YARN

yarn add react-native-picker-module && yarn add react-native-modal && yarn add @react-native-picker/picker

After React Native v0.60.0

cd ios && pod install

Before React Native v0.60.0

Automatic linking

react-native link react-native-picker-module

Manual Linking

Manual Installation (If something went wrong with react-native link)

Props

Props	Type	Default & Description	Required	OS
value	string	-	No	Android, IOS
useNativeDriver	bool	true	No	IOS
backdropColor	string	-	No	IOS
backdropOpacity	double	0.7	No	IOS
items	array / object array	-	Yes	Android, IOS
title	string	-	No	Android, IOS
titleStyle	object	{}	No	IOS
confirmButtonStyle	object	{}	No	IOS
cancelButtonStyle	object	{}	No	IOS
contentContainerStyle	object	{}	No	IOS
itemStyle	object	{}	No	IOS
cancelButtonTextStyle	object	{}	No	IOS
confirmButtonEnabledTextStyle	object	{}	No	IOS
confirmButtonDisabledTextStyle	object	{}	No	IOS
ref	RefObject	-	Yes	Android, IOS
onValueChange	func	(value: string) => void	Yes	Android, IOS
cancelButton	string	Cancel	No	IOS
confirmButton	string	Confirm	No	IOS
onCancel	func	-	No	Android, IOS
selectedColor	string	-	No	Android, IOS
backgroundColor	string	-	No	Android
tintColor	string	-	No	Android, IOS
confirmButtonAlwaysEnabled	bool	false	No	IOS

Usage with Hooks

import React, {useRef, useState} from 'react';
import {Button, SafeAreaView, Text} from 'react-native';
import ReactNativePickerModule, {PickerRef} from 'react-native-picker-module';

const App = () => {
    const pickerRef = useRef<PickerRef>(null);
    const [value, setValue] = useState();
    const dataset_1 = [1, 2, 'Java', 'Kotlin', 'C++', 'C#', 'PHP'];
    return (
            <>
                <SafeAreaView>
                    <Button
                            title="Select a language"
                            onPress={() => pickerRef.current?.show()}
                    />
                    <Text>Selected Item Text: {value}</Text>
                </SafeAreaView>
                <ReactNativePickerModule
                        ref={pickerRef}
                        value={value}
                        title={'Select a language'}
                        items={dataset_1}
                        titleStyle={{color: 'white'}}
                        itemStyle={{color: 'white'}}
                        selectedColor="#FC0"
                        confirmButtonEnabledTextStyle={{color: 'white'}}
                        confirmButtonDisabledTextStyle={{color: 'grey'}}
                        cancelButtonTextStyle={{color: 'white'}}
                        confirmButtonStyle={{
                            backgroundColor: 'rgba(0,0,0,1)',
                        }}
                        cancelButtonStyle={{
                            backgroundColor: 'rgba(0,0,0,1)',
                        }}
                        contentContainerStyle={{
                            backgroundColor: 'rgba(0,0,0,1)',
                        }}
                        onCancel={() => {
                            console.log('Cancelled');
                        }}
                        onValueChange={value => {
                            console.log('value: ', value);
                            setValue(value);
                        }}
                />
            </>
    );
};

export default App;

FYI

You can use more than one picker in same screen. You just need to set different pickerRef.

License

This project is licensed under the MIT License - see the LICENSE.md file for details