Checkbox looks laggy in Picker in MULTI mode

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#4,022 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
78/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
javascript, react-native
Lĩnh vực
mobile

Hướng nghiên cứu

Đọc src/components/picker/PickerItem.js, bắt đầu từ TouchableOpacity xung quanh renderItem và hành vi activeOpacity được hardcode của nó. Tái hiện ví dụ MULTI-mode được cung cấp và xác minh rằng trạng thái checkbox được cập nhật mà không có độ trễ nhìn thấy được trên Android và iOS.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

bug

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
Ngôn ngữ chính
TypeScript
Star
7.2k
Fork
749
Merge trung bình
2 ngày 4 giờ
Pull request đã merge (30 ngày)
4

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của wix/react-native-ui-lib

Tất cả issue của wix/react-native-ui-lib

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.