Checkbox looks laggy in Picker in MULTI mode
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 7.2k
- Forks
- 748
- Avg merge
- 2d 18h
- Merged PRs (30d)
- 1
Description
Component: Picker.Item (src/components/picker/PickerItem.js)
Type: Bug (or enhancement if treated as missing API)
Description
The checkbox state update "wait" until ToggleOpacity animation finishes. Multi Picker mode.
The checkbox should get checked instantly.
Screenshots/Video
How it is now:
https://github.com/user-attachments/assets/681bf448-74ef-4eb0-98a0-f71882db073c
How the checkbox would be nice to work:
https://github.com/user-attachments/assets/f86d436d-077c-46da-9ae2-febed37651c2
Issue place - hardcoded activeOpacity={0.5}:
Related to
- Components
- Demo
- Docs
- Typings
Steps to reproduce
Click on checkbox in Picker in MULTI mode
Expected behavior
Checkbox shouldn't be laggy
Actual behavior
Looks like laggy
More Info
Code snippet
import React, {useState} from 'react';
import {Picker, List, View, Colors} from 'react-native-ui-lib';
/**
* Minimal MULTI picker repro.
*
* PickerItem.js wraps renderItem in:
* TouchableOpacity activeOpacity={0.5} onPress={toggle}
*/
const renderItem = (
_value: string,
{isSelected, isItemDisabled}: {isSelected: boolean; isItemDisabled?: boolean},
label?: string,
) => (
<View pointerEvents="none">
<List.Item
title={label}
disabled={isItemDisabled}
titleColor={isSelected ? Colors.$textPrimary : undefined}
checkbox={{value: isSelected}}
/>
</View>
);
export function MinimalMultiPickerRepro() {
const [value, setValue] = useState<string[]>([]);
return (
<Picker
useDialog
mode={Picker.modes.MULTI}
value={value}
onChange={setValue}
renderItem={renderItem}
placeholder="Select options"
topBarProps={{
title: 'Multi select',
doneLabel: 'Done',
message: `${value.length} selected`,
}}
>
<Picker.Item value="a" label="Option A" />
<Picker.Item value="b" label="Option B" />
<Picker.Item value="c" label="Option C" />
</Picker>
);
}
Environment
- React Native version: 0.78.3
- React Native UI Lib version: 9.0.3-snapshot.8016
Affected platforms
- Android
- iOS
- [] Web
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Read src/components/picker/PickerItem.js, starting at the TouchableOpacity around renderItem and its hardcoded activeOpacity behavior. Reproduce the provided MULTI-mode example and verify that checkbox state updates without a visible delay on Android and iOS.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 78/100