wix / wix/react-native-ui-lib

Checkbox looks laggy in Picker in MULTI mode

Open Beginner friendly
#4,022 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.