Checkbox looks laggy in Picker in MULTI mode

Author: tetianamanCreated May 26, 2026Updated May 26, 2026
Labelsbug

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}:

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

bash
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