label not showing when dark mode is enabled Please help me

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,
),
}}
/>

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

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...

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

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

if disabled option is not selectable. Thank you

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

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

it is not possible to pass the outlineStyle prop to textInput

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?

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.

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.

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

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

<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

is there any way to change the outline color

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

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.

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

How can I adjust Modal close button width

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

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', }, }} /> )} />

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

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

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?

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?

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

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); }} />

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.

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"