RNTester: example list search filter resets after returning from an example

Đang mở
  • Có gì không ổn?
#59,868 3 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 2 ngày

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

Đánh giá

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

Hướng nghiên cứu

Start with RNTesterExampleFilter, RNTesterAppShared, and RNTesterModuleList under packages/rn-tester; trace how filter and category state is lost when the list unmounts. Keep that state available when returning from an example, then reproduce the Components list steps and confirm the search text and selected category persist.

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

Mô tả

Needs: Attention Needs: Repro
Description

In RNTester, the search text in the Components and APIs lists resets when you open an example and go back. You must enter the filter again each time.

The cause is in RNTester itself: RNTesterExampleFilter keeps filter and category in its own component state, and RNTesterAppShared renders RNTesterModuleList, which contains the filter, only when no example is open. Opening an example unmounts the filter and drops its state. A possible fix is to keep the filter state in RNTesterAppShared or in the navigation reducer, next to the recentlyUsed state that already lives there.

Steps to reproduce
  1. Open RNTester and go to the Components list.
  2. Type Flat in the "Search..." field and press Return. The list shows only FlatList.
  3. Open FlatList.
  4. Tap Back.

Expected: The list shows with the search text Flat, as before.

Actual: The search field is empty ("Search...") and the full list shows, with FlatList under "Recently Viewed".

TV builds (react-native-tvos) also show category pills above the list, and the selected category resets in the same way.

React Native Version

main at f480836ad8e (packages/react-native version 1000.0.0)

Affected Platforms

Runtime - iOS

Tested on an iPhone 18 Pro simulator, iOS 27.0, RNTester debug build. Also seen on the Apple TV 4K (3rd generation) simulator, tvOS 27.0, with the react-native-tvos RNTester, which uses the same code. Not tested on Android.

Output of npx @react-native-community/cli info
System:
  OS: macOS 26.7.1
  CPU: (18) arm64 Apple M5 Pro
  Memory: 1.60 GB / 48.00 GB
  Shell:
    version: 5.3.20
    path: /opt/homebrew/bin/bash
Binaries:
  Node:
    version: 24.13.0
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 11.4.2
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2026.07.27.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.17.0
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 27.2
      - iOS 27.2
      - macOS 27.2
      - tvOS 27.2
      - visionOS 27.2
      - watchOS 27.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2025.1 AI-251.26094.121.2512.13840223
  Xcode:
    version: 27.2/27B52
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.20.1
    path: /usr/bin/javac
  Ruby:
    version: 4.0.7
    path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: false
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: true
Stacktrace or Logs
None. No error or warning is logged; the filter state is lost when the list unmounts.
MANDATORY Reproducer

The reproducer is RNTester in this repository (packages/rn-tester), with the steps above.

Screenshots and Videos

No response

Ngôn ngữ chính
C++
Star
127k
Fork
25.5k
Merge trung bình
3 ngày 18 giờ
Pull request đã merge (30 ngày)
188

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 react/react-native

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

Issue tương tự

Thêm issue về C++

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.