srivastavaanurag79 / react-native-paper-select

Dropdown using React Native Paper TextInput, Checkbox and Dialog

Namaste 🙏

I'm Anurag, a.k.a. Vivacious Vendace 👨🏽‍💻

• 👨🏽‍💻 I’m currently working at Blump Tech, as a Lead Engineer: Frontend.
• 💬 Ask me about opportunities to work with me.
• 🌱 I’m currently learning React Native.
• 📫 How to reach me:
  • LinkedIn
  • Instagram
  • Grepper
  • Medium
  • dev.to
• 😃 More about me: srivastavaanurag79.github.io

react-native-paper-select's Issues

Support for left icon

First of all thanks for the component, it has been useful for my use case.
However, I noticed that there is no prop that allows me to put the icon on the left in the input. I read that the component's base is TextInput so I think it is possible.

translation

there is an way to translate "done" and "search" texts to other language?

I can't set default multi value can you help please

Hi , whenever i click on the item it will select all items in the dropdown even though i was passing multiEnable false

<PaperSelect
label="Category"
value={pickerValue.selectedList}
onSelection={value => {
console.log('value: ', value);
// setPickerValue({
// value: value.text,
// error: '',
// });
}}
selectedArrayList={[]}
arrayList={[...pickerValue.list]}
multiEnable={false}
selectAllEnable={false}
/>
the code is here

ERROR Warning: TextInput.Icon: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

"react-native-paper": "^5.12.3",
"react-native-paper-select": "^1.1.1"

ERROR Warning: TextInput.Icon: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
in TextInput.Icon (created by PaperSelect)
in IconAdornment (created by TextInputAdornment)
in TextInputAdornment (created by TextInputOutlined)
in RCTView (created by View)
in View (created by TextInputOutlined)
in TextInputOutlined
in Unknown (created by PaperSelect)
in RCTView (created by View)
in View (created by PaperSelect)
in ThemeProvider (created by PaperSelect)
in PaperSelect (created by Formik)
in Formik (created by JoinNewSchemeScreen)
in RCTView (created by View)
in View (created by Card.Content)
in Card.Content (created by JoinNewSchemeScreen)
in RCTView (created by View)
in View (created by Card)
in RCTView (created by View)
in View (created by Animated(View))
in Animated(View)
in Unknown (created by Card)
in Card (created by JoinNewSchemeScreen)
in RCTView (created by View)
in View (created by JoinNewSchemeScreen)
in RCTView (created by View)
in View (created by ScrollView)
in RCTScrollView (created by ScrollView)
in ScrollView (created by ScrollView)
in ScrollView (created by JoinNewSchemeScreen)
in RCTView (created by View)
in View (created by JoinNewSchemeScreen)
in JoinNewSchemeScreen (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by BottomTabView)
in RCTView (created by View)
in View (created by Screen)
in RCTView (created by View)
in View (created by Background)
in Background (created by Screen)
in Screen (created by BottomTabView)
in RNSScreen (created by Animated(Anonymous))
in Animated(Anonymous)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze
in InnerScreen (created by Screen)
in Screen (created by MaybeScreen)
in MaybeScreen (created by BottomTabView)
in RNSScreenContainer (created by ScreenContainer)
in ScreenContainer (created by MaybeScreenContainer)
in MaybeScreenContainer (created by BottomTabView)
in RCTView (created by View)
in View (created by SafeAreaProviderCompat)
in SafeAreaProviderCompat (created by BottomTabView)
in BottomTabView (created by BottomTabNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by BottomTabNavigator)
in BottomTabNavigator (created by BottomTabNavigator)
in BottomTabNavigator (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by CardContainer)
in RCTView (created by View)
in View (created by CardContainer)
in RCTView (created by View)
in View (created by CardContainer)
in RCTView (created by View)
in View
in CardSheet (created by Card)
in RCTView (created by View)
in View (created by Animated(View))
in Animated(View) (created by PanGestureHandler)
in PanGestureHandler (created by PanGestureHandler)
in PanGestureHandler (created by Card)
in RCTView (created by View)
in View (created by Animated(View))
in Animated(View) (created by Card)
in RCTView (created by View)
in View (created by Card)
in Card (created by CardContainer)
in CardContainer (created by CardStack)
in RNSScreen (created by Animated(Anonymous))
in Animated(Anonymous)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze
in InnerScreen (created by Screen)
in Screen (created by MaybeScreen)
in MaybeScreen (created by CardStack)
in RNSScreenContainer (created by ScreenContainer)
in ScreenContainer (created by MaybeScreenContainer)
in MaybeScreenContainer (created by CardStack)
in RCTView (created by View)
in View (created by Background)
in Background (created by CardStack)
in CardStack (created by HeaderShownContext)
in RCTView (created by View)
in View (created by SafeAreaProviderCompat)
in SafeAreaProviderCompat (created by StackView)
in RNGestureHandlerRootView (created by GestureHandlerRootView)
in GestureHandlerRootView (created by StackView)
in StackView (created by StackNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by StackNavigator)
in StackNavigator (created by AppStackNavigator)
in AppStackNavigator (created by App)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by App)
in ThemeProvider (created by PaperProvider)
in RCTView (created by View)
in View (created by Portal.Host)
in Portal.Host (created by PaperProvider)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by PaperProvider)
in PaperProvider (created by App)
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent)

Use Paper theme by default

I thought this package would use PaperProvider theme by default, and while technically it does, it also overrides styles meaning the theme is ignored.

E.g. I useMD3DarkTheme for dark mode, but the styling for the TextInput is overridden because it uses its own styles.

textInput: {
    backgroundColor: '#fff',
    color: '#000',
  },

here

Is this intentional? Would you accept a PR to change it?

Same for the dialog background color

tsc compile error in `src/interface/paperSelect.interface.ts`

We are using src/interface/paperSelect.interface.ts in our ci/cd pipeline to make sure that there are no unused variables etc. in our react native application.

This emits the following error:

> npx tsc --noEmit -p . --pretty

node_modules/react-native-paper-select/src/interface/paperSelect.interface.ts:4:32 - error TS2307: Cannot find module 'react-native-paper/lib/typescript/src/types' or its corresponding type declarations.

4 import type { ThemeProp } from 'react-native-paper/lib/typescript/src/types';
                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 1 error in node_modules/react-native-paper-select/src/interface/paperSelect.interface.ts:4

We are using V1.1.1 of react-native-paper-select, together with V5.12.3 of react-native-paper

If I change import type { ThemeProp } from 'react-native-paper/lib/typescript/src/types'; in paperSelect.interface.ts to import { ThemeProp } from 'react-native-paper/lib/typescript/types';, no compile error occurs anymore

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

I'm getting the following error when I try to render the component as in the demo code:

Error: Looks like you forgot to wrap your root component withProvidercomponent fromreact-native-paper.

I'm using the following libraries:

"expo": "~46.0.16",
"react-native": "0.69.6",
"react-native-paper": "5.5.2",

Let me know if I should provide more information.

Hi , whenever i click on the item it will select all items in the dropdown even though i was passing multiEnable false

Long wrapped checkbox label are not aligned

Hi @srivastavaanurag79

For some check boxes the labels are very long so they were going out of modal width like below:

so I tried wrapping them around using
checkboxLabelStyle={{ flex: 1, flexWrap: 'wrap' }}

The wrapping of text is working fine but they are not appropriately aligned.
I have tried applying width, textAlign, selfAlign, flexShrink and other CSS properties but the alignment remains the same.
Here is the image.

Could you please have a look and help me with the solution?

Modal Close Button Text width

How can I adjust Modal close button width

"react-native": "0.68.2"
"react-native-paper-select": "^1.1.0"

Feature request: Disable Option

interface ListItem {
_id: string;
value: string;
disabled?: boolean;
}

if disabled option is not selectable. Thank you

TypeScript Support

Hello! Thanks for sharing this library. How does one add typing to this library for use with TypeScript?

how to clear the search box text

I type something in the search input box and click on the close or done button. If I want to select it again the previously searched text is already there. How can I clear this up?

@srivastavaanurag79

TextInput OutlineStyle

it is not possible to pass the outlineStyle prop to textInput

Cannot read property 'level3' of undefined

This error is located at:
in Dialog (created by PaperSelect)
in ThemeProvider
in RCTView (created by View)
in View (created by PortalManager)
in PortalManager (created by Portal.Host)
in Portal.Host (created by PaperProvider)
in RCTView (created by View)
in View (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by PaperProvider)
in PaperProvider (created by RootLayout)
in Provider (created by RootLayout)
in RootLayout
in Unknown (created by Route())
in Route (created by Route())
in Route() (created by ContextNavigator)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by wrapper)
in RNGestureHandlerRootView (created by GestureHandlerRootView)
in GestureHandlerRootView (created by GestureHandlerRootView)
in GestureHandlerRootView (created by wrapper)
in wrapper (created by ContextNavigator)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by ContextNavigator)
in ContextNavigator (created by ExpoRoot)
in ExpoRoot (created by App)
in App (created by withDevTools(App))
in withDevTools(App) (created by ErrorOverlay)
in ErrorToastContainer (created by ErrorOverlay)
in ErrorOverlay
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent), js engine: hermes

first click on android doesn't work

Every time I open the dialog in android device, first time I click on an option, it isn't being picked but on the second click it works flawless. Is there a fix for it?

Component is very slow to use on Android

Hi, I'm using the component with Formik, and it's very slow: it takes a lot to open the dialog and a lot of time when closing the dialog after clicking on Done. I haven't tested on iPhone yet.

There a way to change "Select All" label in multi select mode enabled?

I would appreciate if theres a way to change this first item text to my own used language.

outlineColor in textInputProps is not working in iOs, but working fine in android

I have the following select, the issue is that the  outlineColor in textInputProps is ignored, it is always black

<PaperSelect
value={values.country}
onSelection={(value) => {
handleChange('country')(value.text);
}}
arrayList={countryList}
textInputMode="outlined"
selectedArrayList={[]}
errorText=""
activeOutlineColor={style.selectedOuterInput}
multiEnable={false}
checkboxProps={{
checkboxColor: style.selectedOuterInput,
checkboxLabelStyle: { color: 'black' },
}}
textInputProps={{
activeOutlineColor: style.selectedOuterInput,
outlineColor: getOutlineColor(
errors,
touched,
'country',
style,
),
}}
/>

PaperSelect error styling

I have 2 inputs

1. PaperSelect
2. TextInput from react-native-paper
   ( see attached screenshot )
   

I wanted to style the error state for PaperSelect the same as TextInput from react-native-paper
I'm able to set border color, but not able to set color on label

react-native-paper-select: 1.1.1
react-native-paper: 5.12.3

It will better to have error prop like TextInput: https://callstack.github.io/react-native-paper/docs/components/TextInput/#error

label not showing in darkmode

label not showing when dark mode is enabled Please help me

Cannot apply textInputStyle color

Hi,
Firstly, many thank's for your great work !! 👍
Is there any way to change the textInputStyle color ?
when I use textInputStyle={{ color: '#222222', fontWeight: '800' }}, fontWeight is modified but not color. Any Idea ?
I tried this way :
<Controller name="masque" control={control} render={({ field: { onChange, value } }) => ( <PaperSelect label="Masques" value={value} textInputMode="outlined" textInputStyle={{ color: '#222222', fontWeight: '800' }} onSelection={(value: any) => { setMasqueList({ ...masqueList, value: value.text, selectedList: value.selectedList, error: '', }); onChange(value.text); }} arrayList={[...masqueList.list]} selectedArrayList={masqueList.selectedList} errorText={masqueList.error} multiEnable={false} hideSearchBox={true} dialogTitleStyle={{ color: '#4BAFBF' }} textInputProps={{ underlineColor: '#e74c3c', outlineColor: '#cecece', activeOutlineColor: '#4BAFBF', }} checkboxProps={{ checkboxColor: '#4BAFBF', checkboxUncheckedColor: '#e74c3c', }} searchbarProps={{ iconColor: 'brown', }} searchText="Rechercher" dialogCloseButtonText="Annuler" dialogDoneButtonText="Valider" dialogCloseButtonStyle={{ color: '#e74c3c' }} dialogDoneButtonStyle={{ color: 'white', backgroundColor: '#1abc9c', padding: 9, borderRadius: 5, overflow: 'hidden' }} theme={{ colors: { onSurfaceVariant: '#cecece', }, }} /> )} />

Madal not respond to KeyboardAvoidingView

Modal window is not keyboard aware.
I'm using
However, the modal does not seem to respond to it.

PaperSelect inside a Modal

Hi there,
I think I have some problems to open the select modal inside another modal, because when I click on select it doesn't open anything.
This is my code:

    <Portal>
      <Modal visible={visible} animationType="slide">
        <ScrollView>
          <PaperSelect />
        </ScrollView>
        <Toast />
      </Modal>
    </Portal>

Using testID

Hi,

Unfortunately, there is no testID that can be provided to enable the use of testing solutions.

Is it possible to add testID support ?

Cheers,
Luc

Option to hide search

Static Modal Content Issue

I want to give my custom modal for selections? How I can do this?

Is it possible to use react-native-paper-select without checkboxes?

I want to disable checkbox and select one of the options just like in react-native select but with material-design styling from react-native-paper. Is it possible?

Is library still actively maintained?

Hi, wondering if this library is still actively maintained? I opened a PR a couple weeks ago and it has not been reviewed yet.

#56

I can not find the outline text color change option

is there any way to change the outline color

The above screenshot I would like to change the Select Payment Type color to white

How to update the value dynamically after api call

Hi, Please help me on this,

I am new to React Native, i am using this control, but its value is not changing after api response, i need to update its value dynamically.

    const rd = [];
    response.data.data.map((data) => {
      rd.push({
         _id: data.id.toString(),
         value: data.employee,
       });
     });

        setReporting({
          list:rd,
          value: value.text,
          selectedList: value.selectedList,
          error: '',
        });

I am using above code but its not working.

Close Dropdown Automatically on Selection When multipleEnable is false

Currently, when multipleEnable is set to false, the dropdown does not close automatically after a selection is made. This behavior can be improved to enhance user experience.

Feature Request:

• Feature: If multipleEnable is false, the dropdown should close automatically after a selection is made.
• Current Behavior: The dropdown remains open after a single selection.
• Expected Behavior: The dropdown should automatically close after a selection is made, making it more intuitive for single-selection use cases.

Use Case
When using the dropdown in single-selection mode, users expect the dropdown to close immediately after a choice is made. This would streamline the user interface and improve usability.

More customization

Hey there, really really love this select... i was hoping if there is a way we can customise more of this select, for example reduce the modal box size(height and width), use custom font, for example how the react native paper textInput allows to utilize your custom font...

Unable to change option color

is there any way to change the option text color

in this scenario where the background color is white, it is "White Text On A White Background"

Feature Needed: Support to be able to have Checkbox.android on ios

It would be nice to have this feature to have react native paper Checkbox Android on iOs as iphone has this weird tick sign instead for a default checkbox .

<Checkbox.Android status={checked ? 'checked' : 'unchecked'} onPress={() => { setChecked(!checked); }} />