Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TextInput with nested Text field for styling duplicates letters when typing.

See original GitHub issue

Description

Recently we updated to RN 0.70, and have encountered an issue where having a nested <Text> inside a <TextInput> field causes double typing. Before this worked fine in RN 0.63.

We use this to stylize @mention inputs for a chat feature.

Notes: Adding value={‘’} fixes the issue for iOS, but causes a crash on Android with Cannot specify both value and children..

I managed to get it working on Android by commenting that line out in the RN code base, and patching it, but it causes another issue, where typing on Android “skips” a few letters when typing.

Version

0.70.0

Output of `npx react-native info`

System: OS: macOS 12.5.1 CPU: (12) x64 Intel® Core™ i7-8850H CPU @ 2.60GHz Memory: 1.82 GB / 16.00 GB Shell: 5.7.1 - /usr/local/bin/zsh Binaries: Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node Yarn: 1.22.19 - ~/git/caliber-mobile-app/node_modules/.bin/yarn npm: 8.18.0 - ~/.nvm/versions/node/v16.17.0/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: Not Found 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: Chipmunk 2021.2.1 Patch 2 Chipmunk 2021.2.1 Patch 2 Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild Languages: Java: 11.0.16 - /Users/abednarek/.sdkman/candidates/java/current/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.1.0 => 18.1.0 react-native: v0.70.0 => 0.70.0 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

Use a Text Input with nested <Text> for styling
Type in the text field, and notice that the characters are duplicated. 1 set is Styled as per the <Text> component, and the others are styled differently.

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

Code Snippet on reproducing this issue. Quite straight forward:

<TextInput
  style={{
    width: 240,
    height: 44,
    backgroundColor: '#ccc',    
  }}
  onChangeText={(text) => {
    setEnteredText(text);
  }}          
  >
  <Text
    style={{
      color: '#F0F'
    }}>
      {enteredText}
  </Text>
</TextInput>

Here’s what it looks like when I type “Hi”: Screen Shot 2022-09-12 at 2 25 20 PM