Checkbox looks laggy in Picker in MULTI mode

Aperta Adatta ai principianti
  • Qualcosa non va?
#4,022 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
78/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Tranquilla
Stack tecnologico
javascript, react-native
Ambito
mobile

Direzione di ricerca

Leggi src/components/picker/PickerItem.js, iniziando dalla TouchableOpacity intorno a renderItem e dal suo comportamento activeOpacity codificato direttamente. Riproduci l’esempio MULTI-mode fornito e verifica che lo stato della casella di controllo si aggiorni senza ritardi visibili su Android e iOS.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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
Lingua principale
TypeScript
Stelle
7.2k
Fork
749
Merge medio
29m
PR unite (30g)
1

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di wix/react-native-ui-lib

Tutte le issue di wix/react-native-ui-lib

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.