secureTextEntry in TextInput does not dynamically update visibility when toggled via state in React Native 0.76.1

AliRezaBeigy commented 6 days ago

Description

The secureTextEntry option in TextInput does not work as expected in React Native 0.76.1. When secureTextEntry is set to true, and the user types in the input, if the state changes to false, the input still shows dots instead of plain text. Conversely, when secureTextEntry is initially false and then toggled to true, the text remains visible.

Steps to reproduce

Create a TextInput component with secureTextEntry controlled by a state variable.
Initially set secureTextEntry to true.
Type some text into the input.
Toggle the state to false and observe the text visibility.
Repeat with secureTextEntry initially set to false and toggle to true.

React Native Version

0.76.1

Affected Platforms

Runtime - Android, Runtime - iOS

Output of `npx react-native info`

System:
  OS: macOS 14.6.1
  CPU: (8) x64 13th Gen Intel(R) Core(TM) i7-13700K
  Memory: 64.19 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.2.0
    path: /usr/local/bin/node
  Yarn:
    version: 3.6.4
    path: /usr/local/bin/yarn
  npm:
    version: 10.7.0
    path: /usr/local/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.15.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java: Not Found
  Ruby:
    version: 2.6.10
    path: /usr/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: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

Reproducer

https://github.com/AliRezaBeigy/ReactNativeSecureText

Screenshots and Videos

No response

AliRezaBeigy commented 6 days ago

The problem solve by disable new architecture

Barney4242 commented 5 days ago

I do not see this issue. For me secureTextEntry works as expected. RN 0.76.1, Expo

migueldaipre commented 4 days ago

Hey @AliRezaBeigy, could you provide a public link to the repro?

As @Barney4242 comment, this is working.

AliRezaBeigy commented 4 days ago

Hello, I apologize for the misinformation in my previous comment. After further testing, I've identified that the issue specifically arises when using setNativeProps. This functionality works as expected in React Native 0.75.4, but in 0.76.1, it seems to break the dynamic toggling of secureTextEntry.

I've created a sample repository to reproduce this issue: https://github.com/AliRezaBeigy/ReactNativeSecureText

Thank you for your attention to this matter, and I apologize again for the oversight in my initial report.

cipolleschi commented 1 day ago

@AliRezaBeigy Thanks for the issue.

This use case is not working with setNativeProps in the New Architecture because of how the new Architecture is structured. In the New Architecture we have 3 trees:

The react tree (in JS)
The Shadow tree in C++
The Native tree in native (Objective-C for iOS, Java/Kotlin for android)

When React commits a change, it modifies the Shadow Tree and the Shadow Trees ask the native tree to render the UI. In this scenario, all the trees are always in synch.

When you use useNativeProps, you bypass the update to the ShadowTree. This means that the ShadowTree is not aware that you changed the secureTextEntry prop and the next commit from React will reset the value to the previous one.

We need to find a mechanism to sync the Native tree with the Shadow tree to make it work well.

facebook / react-native