Skip to content

Checkbox looks laggy in Picker in MULTI mode #4022

Description

@tetianaman

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:

Screen.Recording.2026-05-26.at.14.41.50.mov

How the checkbox would be nice to work:

Screen.Recording.2026-05-26.at.14.38.40.mov

Issue place - hardcoded activeOpacity={0.5}:

Image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    buga bug in one of the components

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions