Picker Search not working

[LorenDorez]

Description

I copied the example picker from the Demo app but unfortunately searching doesnt appear to work. Im using Expo Go incase that might be an issue.

Related to

• Picker

Steps to reproduce

1. Load the component
2. Click to open the picker and see the list of langs
3. Type in ada to the search

Expected behavior

When I type ada the list should filter down

Actual behavior

Does nothing

More Info

Code snippet

import { longOptions } from "@/utils/dev/PickerScreenLongOptions";
import { useState } from "react";
import { Colors, Picker } from "react-native-ui-lib";

export default function CompanyPicker() {
    const [language, setLanguage] = useState();
    return (
        <Picker
            placeholder="Favorite Language"
            floatingPlaceholder
            value={language}
            enableModalBlur={false}
            onChange={item => setLanguage(item)}
            topBarProps={{title: 'Languages'}}
            // style={{color: Colors.red20}}
            showSearch
            searchPlaceholder={'Search a language'}
            searchStyle={{color: Colors.blue30, placeholderTextColor: Colors.grey50}}
            // onSearchChange={value => console.warn('value', value)}
            items={longOptions}
          />
    );
}

Environment

• React Native version: 0.74.3
• React Native UI Lib version: ^7.25.0
• Expo: 51

Affected platforms

• Android
• iOS

[LorenDorez]

Doing some more digger the usePickerSearch gets passed in children but in my case this appears to be undefined, should this pass in the items prop and not children?

[LorenDorez]

So looks like it works if i move my items to the children like such:

import { longOptions } from "@/utils/dev/PickerScreenLongOptions";
import { useState } from "react";
import { Colors, Picker } from "react-native-ui-lib";

export default function CompanyPicker() {
    const [language, setLanguage] = useState();
    return (
        <Picker
            placeholder="Favorite Language"
            floatingPlaceholder
            value={language}
            enableModalBlur={false}
            onChange={item => setLanguage(item)}
            topBarProps={{title: 'Languages'}}
            // style={{color: Colors.red20}}
            showSearch
            searchPlaceholder={'Search a language'}
            searchStyle={{color: Colors.blue30, placeholderTextColor: Colors.grey50}}
            // onSearchChange={value => console.warn('value', value)}
            //items={longOptions}
        >
            {longOptions.map(option => (
              <Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
            ))}
        </Picker>
    );
}

but if i do that i lose the label on selected item :(

[Akash9923]

Above code is working

[adids1221]

Hi, we are working on fix for this.
related PR

[adids1221]

The fix was merged, should be released in the next version.

[LorenDorez]

Thanks for all the hard work here 🙏