Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

iOS TextInput - Selection doesn't update when using setNativeProps #34113

Closed
rushatgabhane opened this issue Jun 30, 2022 · 2 comments
Closed
Labels
Component: TextInput Related to the TextInput component. Needs: Triage 🔍 Platform: iOS iOS applications.

Comments

@rushatgabhane
Copy link

rushatgabhane commented Jun 30, 2022

Description

I have a TextInput and a button.
Pressing the button calls appendRandomNumber() which appends a random number to the TextInput.

To prevent re-renders, it uses setNativeProps to set the selection and text of the TextInput.

appendRandomNumber() {
  this.selection.start = this.selection.start + 1;
  this.selection.end = this.selection.end + 1;
  this.amount = this.amount.concat(Math.floor(Math.random() * 10));
  
  this.textInput.setNativeProps({ text: this.amount });
  this.textInput.setNativeProps({ selection: this.selection });
}

The issue is that the selection (cursor) doesn't update and is stuck in one place.

Note that this issue is not reproducible on Android.

Screen.Recording.2022-06-30.at.9.53.07.PM.mov

Version

0.69.1, 0.68.2

Output of npx react-native info

System:
OS: macOS 12.4
CPU: (8) arm64 Apple M1 Pro
Memory: 198.81 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 14.19.1 - /opt/homebrew/opt/node@14/bin/node
Yarn: Not Found
npm: 6.14.16 - /opt/homebrew/opt/node@14/bin/npm
Watchman: 2022.03.21.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
Android SDK: Not Found
IDEs:
Android Studio: 2021.1 AI-211.7628.21.2111.8193401
Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
Languages:
Java: 11.0.11 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.0.0 => 18.0.0
react-native: 0.69.1 => 0.69.1
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

  1. Open the snack.
  2. Click this button 5 times - Click here to append a random number

Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/@rushat200/setnativeprops-selection-bug

@necolas
Copy link
Contributor

necolas commented Jun 30, 2022

setNativeProps will not be supported in the new "Fabric" architecture, and should be considered deprecated

https://reactnative.dev/docs/new-architecture-library-intro#migrating-off-setnativeprops

@necolas necolas closed this as completed Jun 30, 2022
@rushatgabhane
Copy link
Author

@necolas just curious, why is setNativeProps being deprecated?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: TextInput Related to the TextInput component. Needs: Triage 🔍 Platform: iOS iOS applications.
Projects
None yet
Development

No branches or pull requests

3 participants